Generate Your React App with Prompts or Figma
Topics
Can I use .ts for a React component?
Do .tsx files work without TypeScript?
Why does .ts not allow JSX?
Can I rename .jsx to .tsx directly?
Confused about the difference between
.tsand.tsxin React? TypeScript (.ts) handles logic and type safety, while TSX (.tsx) lets you mix TypeScript with JSX for building UI components. This blog breaks down their roles, how they fit into a project, and when to use each for cleaner, scalable code.
Developers often ask a simple but loaded question: When should I use .ts files and when should I use .tsx files in a React project?
If you've been switching between them without much thought, your project might already be carrying unnecessary complexity.
Want to know how this choice affects readability, scalability, and team collaboration?
This blog explains the differences clearly. It walks through React components, the role of TSX files, and why the right file extension can make your TypeScript code more maintainable. You’ll also see practical examples, a diagram, and structured recommendations to help you keep your codebase clean and future-proof.
.ts Files?A .ts file is simply a TypeScript file that does not contain JSX syntax. Think of it as a place for utility functions, type definitions, data models, or static typing helpers. It’s where you write logic that doesn’t directly render user interfaces. If you were to open a .ts file in a text editor, you would see plain TypeScript code, not HTML-like markup.
Developers use .ts files for:
.tsx Files?Atsx file is a TypeScript file that supports JSX syntax. This is necessary when defining a React component . JSX stands for JavaScript XML, a way to write JSX elements directly inside your TypeScript code. If you’re building user interfaces with React and TypeScript, you’ll almost always have .tsx files in your project.
Developers create .tsx files for:
1// components/Greeting.tsx 2import React from 'react'; 3 4interface MyComponentProps { 5 name: string; 6} 7 8const MyComponent: React.FC<MyComponentProps> = ({ name }) => { 9 return <h1>Hello, {name}!</h1>; 10}; 11 12export default MyComponent
Explanation: This uses JSX syntax inside a TypeScript file. It renders user interfaces and follows the .tsx file extension rule for React components.
| Feature | .ts file | .tsx file |
|---|---|---|
| JSX Support | ❌ | ✅ |
| Typical Usage | Logic, utility functions, types | React components, UI rendering |
| File extension Purpose | Pure TypeScript logic | TypeScript + JSX syntax |
| Best For | APIs, constants, reusable logic | Building user interfaces |
| React Usage | Rare (non-UI code only) | Always |
| Example Content | Functions, data models | JSX with props and state |
Tip: If your file contains even a single JSX element, it should use the .tsx extension.
Every React component that returns JSX syntax needs to be inside a .tsx file. Without it, the compiler throws an error because .ts doesn’t parse JSX. For example, a functional component using <div> tags will fail in .ts format but succeed in .tsx.
Think of .tsx files as the file type that marries TypeScript with JavaScript XML. It lets you combine strong type checking with expressive UI declarations. You get both structure and flexibility in the same file.
A clean project structure helps developers navigate files faster and prevents confusion between .ts and .tsx.
Here’s a recommended layout:
1src/ 2 components/ 3 Header.tsx 4 Footer.tsx 5 utils/ 6 formatDate.ts 7 parseData.ts 8 types/ 9 index.ts
Explanation:
Explanation: This diagram shows the decision-making process for choosing between .ts and .tsx. By asking one question — "Does it contain JSX syntax?" — you can decide instantly which file extension to use.
JSX syntax blends the structure of HTML with the power of JavaScript. When written inside TypeScript files, it needs a .tsx extension.
Key points:
1const MyComponent = () => { return <div>Sample JSX output</div>; };
If you save this in a .ts file, you’ll face an error. The compiler will flag the <div> as unexpected syntax.
Sometimes developers mistakenly put non-UI code inside .tsx files. That leads to unnecessary compiler work and mixes unrelated concerns. It’s better to keep .ts files for logic that doesn’t involve rendering.
Use .ts files for:
1export interface MyComponentProps { title: string; count: number; }
This is also the ideal place to store constants, enums, and configuration objects.
In larger projects, .tsx files should only be used for React components or layout code. Mixing utility functions into these files clutters them and slows down refactoring. A dedicated folder for helpers and hooks keeps the component layer clean.
Best practice:
The .tsx file extension works just like .jsx file extension, except it supports TypeScript features. Both allow JSX syntax, but .tsx adds static typing and type checking.
This means you can define prop types and get compiler-level feedback before runtime. It’s one of the strongest reasons to adopt .tsx in modern React projects.
1// utils/math.ts export function add(a: number, b: number) { return a + b; } // components/Calculator.tsx import React from 'react'; import { add } from '../utils/math'; const MyComponent = () => { return <div>Sum: {add(2, 3)}</div>; }; export default MyComponent;
Explanation: The .ts file holds the math function. The .tsx file renders the React component with JSX syntax.
But what if you could build a React app without touching code at all?
Rocket.new lets you create production-ready React applications using simple text prompts — no code required. You describe the app you want, and Rocket builds the application for you.
When setting up a test environment, keep .ts files and .tsx files separate for clarity. This helps when switching to a different test environment or adding different plugins. It also makes test coverage reporting cleaner because UI and logic are measured independently.
Use .ts for handling logic. Use .tsx for UI that includes JSX. This approach keeps your code organized. It makes React components easier to update and review. Clear file separation also helps new developers understand the structure faster. Over time, this consistency reduces bugs and improves collaboration. By keeping the right extension for the right purpose, your project stays easier to read, faster to debug, and smoother to scale.