CODEWITHSUNDEEP
reactjs
user14358266
user14358266

Reputation:

What is the difference between .js, .tsx and .jsx in React?

I have come across these 3 main file types:

What is the difference between the 3? Which one should be used? Which one is used more commonly?

Upvotes: 95

Views: 145989

Answers (4)

Pratik Kujur
Pratik Kujur

Reputation: 49

In React, JavaScript (JS) is the primary language for writing code. However, React code is often written using JSX and TypeScript (TSX) for type safety. Here's the difference between these file extensions:

  1. .js (JavaScript):
    • JavaScript is the fundamental programming language used for building React applications.
    • React components can be written in plain JavaScript using the .js extension.
    • In .js files, you can write React components using ES6 class components or functional components with the function keyword.
    • JSX (JavaScript XML) can also be used within .js files to describe the structure of the UI.

Example of a React component in a .js file:

import React from 'react';

function MyComponent() {
  return <div>Hello, World!</div>;
}

export default MyComponent;
  1. .jsx (JavaScript + JSX):
    • .jsx files are essentially the same as .js files but are explicitly named with the .jsx extension to indicate the usage of JSX syntax for defining React components.
    • JSX allows you to write HTML-like code within your JavaScript components, making it easier to define the structure of your UI elements.

Example of a React component in a .jsx file:

import React from 'react';

function MyComponent() {
  return <div>Hello, World!</div>;
}

export default MyComponent;
  1. .tsx (TypeScript + JSX):
    • .tsx files are used when you want to incorporate TypeScript, a statically typed superset of JavaScript, into your React project.
    • TypeScript adds type checking to your code, making it more robust and less prone to certain types of errors.
    • Like .jsx files, .tsx files also use JSX syntax for defining React components.

Example of a React component in a .tsx file:

import React from 'react';

interface MyComponentProps {
  name: string;
}

function MyComponent({ name }: MyComponentProps) {
  return <div>Hello, {name}!</div>;
}

export default MyComponent;

In summary, .js files can be used for writing React components in plain JavaScript with JSX, .jsx files are explicitly named with the .jsx extension for JavaScript with JSX, and .tsx files are used for TypeScript with JSX to add static type checking to your React code. The choice between them depends on your project's requirements and your preference for type safety.

Upvotes: 3

Baskaran Aathithyan
Baskaran Aathithyan

Reputation: 47

A JS file is a JavaScript file extension and This would be the fully Javascript functions only.

JSX is a file syntax extension used by React and here you can use CSS and Html as well. You should use JSX files when rendering a React component.

TSX is the TypeScript version of JSX

Upvotes: 1

zero298
zero298

Reputation: 26878

  • .js is JavaScript, plain and simple
const Foo = () => {
    return React.createElement("div", null, "Hello World!");
};
  • .ts is TypeScript, Microsoft's way of adding "concrete" types to JavaScript
const Foo: FunctionalComponent = () => {
    return React.createElement("div", null, "Hello World!");
};
  • .jsx is JavaScript but with JSX enabled which is React's language extension to allow you to write markup directly in code which is then compiled to plain JavaScript with the JSX replaced with direct API calls to React.createElement or whatever API is targeted
const Foo = () => {
    return <div>Hello World!</div>;
};
  • .tsx is similar to jsx except it's TypeScript with the JSX language extension.
const Foo: FunctionalComponent = () => {
    return <div>Hello World!</div>;
};

All of these will compile down to JavaScript code. See also React Without JSX

Bear in mind that just because it has a certain extension, doesn't mean that that is what the file actually is (frustratingly). I have run into several projects that use .js as an extension for files that include JSX syntax as well as a few that even include TypeScript.

Upvotes: 154

Stan Loona
Stan Loona

Reputation: 705

A JS file is a JavaScript file extension, this is used for any modules and snippets of code made in pure JavaScript. You should use JS files when writing functions that won't use any React feature but will be used among different React components.

JSX is a file syntax extension used by React, you can render component, import CSS files and use React hooks among other things. You should use JSX files when rendering a React component.

TSX is the TypeScript version of JSX, TypeScript is a superset that adds static typing in JavaScript. You should use TypeScript whenever it's possible to do so as it has numerous advantages (code scalability and static typing)

Upvotes: 10

Related Questions