Many developers moving from JavaScript to TypeScript have this question:

🤔 “Can I use both .js and .tsx files in the same React project?”

The answer is:

✅ YES — absolutely.

In fact, many real-world React applications use a mix of:

• .js
• .jsx
• .ts
• .tsx

especially during migration from JavaScript to TypeScript.

In this guide, you’ll learn:

• What .js and .tsx files are
• Can they work together
• Real-world usage
• Benefits and drawbacks
• Best practices

📌 Understanding File Types

Before understanding mixed usage, let’s quickly understand each file type.

🔹 What is .js?

.js means:

JavaScript file

Example:

function add(a, b) { 
  return a + b;
}

🔹 What is .tsx?

.tsx means:

TypeScript + JSX file

Used when:

• Writing React components
• Using TypeScript types

Example:

type Props = { 
     name: string;
};
function User({ name }: Props) {
     return <h1>{name}</h1>;
}

Can They Work Together?

YES ✅

You can absolutely use:

• .js
• .jsx
• .ts
• .tsx

inside the same React project.

Real-World Scenario

Many companies:

• Start project in JavaScript
• Slowly migrate to TypeScript

So they temporarily have:

src/ ├── App.tsx ├── Header.jsx ├── utils.js ├── api.ts └── Dashboard.tsx

👉 This is completely normal.

How Does It Work?

When using TypeScript in React:

👉 TypeScript compiler can understand JavaScript files too.

Important Configuration

In tsconfig.json:

{  
"compilerOptions": {    "allowJs": true  }
}

What Does allowJs Do?

"allowJs": true

👉 Allows TypeScript to compile .js files also.

Without this:

❌ TypeScript may ignore JS files.

Example Project Structure

Example

src/ ├── components/ │    ├── Button.tsx │    ├── Navbar.jsx │ ├── utils/ │    ├── math.js │    ├── api.ts │ └── App.tsx

👉 All these files can work together.

Importing Between JS and TSX

✅ Import JS into TSX

import add from "./utils/math";

✅ Import TSX Component

import Button from "./components/Button";

Why Developers Mix .js and .tsx

✅ 1. Gradual Migration

Big applications cannot migrate instantly.

So teams:

• Convert slowly
• File by file

✅ 2. Legacy Code Support

Old JavaScript files may still work perfectly.

✅ 3. Faster Development

Some utility files may remain simple .js.

Important Differences

Benefits of Using .tsx

✅ Better Error Detection

TypeScript catches mistakes early.

✅ Strong Type Safety

type User = {  name: string; };

✅ Better Developer Experience

• Auto suggestions
• Safer refactoring
• Better maintainability

Problems You May Face

❌ 1. Type Errors with JS Files

Sometimes TypeScript cannot understand JS structure properly.

❌ 2. Inconsistent Codebase

Mixing too many styles may confuse developers.

❌ 3. Any-Type Problems

JS files may reduce type safety.

Best Practice (Recommended)

✅ Recommended Approach

If possible:

👉 Gradually move toward TypeScript

🚀 Good Strategy

Step 1

Keep old files in JS.

Step 2

Write new components in TSX.

Step 3

Slowly migrate old files.

Example Migration

Old JS Component

function Button(props) {
     return <button>{props.title}</button>;
}

Migrated TSX Component

type Props = {  title: string;};
function Button({ title }: Props) {
    return <button>{title}</button>;
}

Important Note About .ts vs .tsx

Interview Question

❓ Can we use .js and .tsx together in React?

👉 Answer:

Yes. React projects can use both JavaScript and TypeScript files together. TypeScript supports gradual migration using allowJs.

Final Summary

✔ .js and .tsx can work together
✔ Common in real-world migration projects
✔ Use allowJs: true in TypeScript config
✔ TSX provides better type safety
✔ Gradual migration is best practice

💡 Found this helpful? Subscribe for simple React and TypeScript guides with real-world examples. Happy Coding!