ReactJS - .JS vs .JSX

Question

There is something I find very confusing when working in React.js.

There are plenty of examples available on internet which use .js files with React but many others use .jsx files.

I have read about JSX files and my understanding is that they just let you write HTML tags within your JavaScript. But the same thing can be written in JS files as well.

So what is the actual difference between .js and .jsx ?

Answer 1

There is none when it comes to file extensions. Your bundler/transpiler/whatever takes care of resolving what type of file contents there is.

There are however some other considerations when deciding what to put into a .js or a .jsx file type. Since JSX isn't standard JavaScript one could argue that anything that is not "plain" JavaScript should go into its own extensions ie., .jsx for JSX and .ts for TypeScript for example.

There's a good discussion here available for read

Answer 2

In most of the cases it’s only a need for the transpiler/bundler, which might not be configured to work with JSX files, but with JS! So you are forced to use JS files instead of JSX.

And since react is just a library for javascript, it makes no difference for you to choose between JSX or JS. They’re completely interchangeable!

In some cases users/developers might also choose JSX over JS, because of code highlighting, but the most of the newer editors are also viewing the react syntax correctly in JS files.

Answer 3

JSX tags (<Component/>) are clearly not standard javascript and have no special meaning if you put them inside a naked <script> tag for example. Hence all React files that contain them are JSX and not JS.

By convention, the entry point of a React application is usually .js instead of .jsx even though it contains React components. It could as well be .jsx. Any other JSX files usually have the .jsx extension.

In any case, the reason there is ambiguity is because ultimately the extension does not matter much since the transpiler happily munches any kinds of files as long as they are actually JSX.

My advice would be: don't worry about it.

Answer 4

As other mentioned JSX is not a standard Javascript extension. It's better to name your entry point of Application based on .js and for the rest components, you can use .jsx.

I have an important reason for why I'm using .JSX for all component's file names. Actually, In a large scale project with huge bunch of code, if we set all React's component with .jsx extension, It'll be easier while navigating to different javascript files across the project(like helpers, middleware, etc.) and you know this is a React Component and not other types of the javascript file.

Answer 5

As already mentioned, there is no difference, if you create a file with .jsx or .js.

I would like to bring another expect of creating the files as .jsx while creating a component.

This is not mandatory, but an architectural approach that we can follow. So, in large projects we divide our components as Presentational components or Container components. Just to brief, in container components we write the logic to get data for the component and render the Presentational component with props. In presentational components, we usually donot write functional logic, presentational components are used to represent the UI with required props.

So, if you check the definition on JSX in React documents.

It says,

 const element = <h1>Hello, world!</h1>;

It is called JSX, and it is a syntax extension to JavaScript. We recommend using it with React to describe what the UI should look like. JSX may remind you of a template language, but it comes with the full power of JavaScript.

JSX produces React “elements”. Instead of artificially separating technologies by putting markup and logic in separate files, React separates concerns with loosely coupled units called “components” that contain both.

React doesn’t require using JSX, but most people find it helpful as a visual aid when working with UI inside the JavaScript code. It also allows React to show more useful error and warning messages.

It means, It's not mandatory but you can think of creating presentational components with '.jsx' as it actually binds the props with the UI. and container components, as .js files as those contains logic to get the data.

It's a convention that you can follow while creating the .jsx or .js files, to logically and physically separate the code.

Answer 6

Besides the mentioned fact that JSX tags are not standard javascript, the reason I use .jsx extension is because with it Emmet still works in the editor - you know, that useful plugin that expands html code, for example ul>li into

<ul>
  <li></li>
</ul>

Answer 7

JSX isn't standard JavaScript, based to Airbnb style guide 'eslint' could consider this pattern

// filename: MyComponent.js
function MyComponent() {
  return <div />;
}

as a warning, if you named your file MyComponent.jsx it will pass , unless if you edit the eslint rule you can check the style guide here

Answer 8

if you use .jsx it will be treated as a react page so its features will be applied by extensions automatically. for example if you use emmet in .jsx file, .container, this will create a div with className not class

    <div className="container"></div>

if you apply the same emmet inside a js file, you would get this:

    <div class="container"></div>

Answer 9

copied from: https://reactjs.org/docs/introducing-jsx.html

Why JSX? React embraces the fact that rendering logic is inherently coupled with other UI logic: how events are handled, how the state changes over time, and how the data is prepared for display.

Instead of artificially separating technologies by putting markup and logic in separate files, React separates concerns with loosely coupled units called “components” that contain both. We will come back to components in a further section, but if you’re not yet comfortable putting markup in JS, this talk might convince you otherwise.

React doesn’t require using JSX, but most people find it helpful as a visual aid when working with UI inside the JavaScript code. It also allows React to show more useful error and warning messages.

Answer 10

Depending on the IDE or editor, .jsx has a different file icon :P. And it's a good practice to know what file it is without reading the code. The bundler and compiler might know it and will take care of everything, but telling the difference between .jsx and .js from just the file name will help you as a developer a lot.

EDIT: jsx is more than js, it is javascript + xml, which allows you to write html inside a js file without using template strings. For this reason it's a good practice to use .jsxfor your react files, instead of .js (which is also valid).

Answer 11

CLEAR your doubt for diffrence between .js & .jsx

In a ReactJS application, both .js and .jsx file extensions are commonly used. Here's the difference between them:

1. .js Files:

• JavaScript files with a .js extension are standard JavaScript files.
• They can contain regular JavaScript code and are not specific to React.
• You can write JavaScript logic, define functions, variables, classes, etc.
• However, when using React, .js files are typically used for non-component-related code, such as utility functions, helper functions, or configuration files.

2. .jsx Files:

• .jsx files are JavaScript files that contain JSX syntax.
• JSX (JavaScript XML) is an extension to JavaScript that allows you to write HTML-like code within JavaScript.
• JSX is a syntax extension provided by React and is used to define React components.
• React components are the building blocks of a React application, and they encapsulate reusable pieces of UI.
• JSX files contain both JavaScript logic and HTML-like markup (JSX syntax) that define the structure and appearance of React components.

In summary, .js files are standard JavaScript files used for general JavaScript code, while .jsx files are JavaScript files that contain JSX syntax and are specifically used for defining React components.

For your QUESTION:

Yes, you can use both .js and .jsx files in your React application. React supports both file extensions, allowing you to mix regular JavaScript code and JSX syntax within your project.

Typically, you would use .jsx files for defining React components that contain JSX syntax. This allows you to write HTML-like markup directly in your JavaScript code, making it easier to describe the structure and appearance of your components.

On the other hand, .js files can be used for regular JavaScript code that is not specific to React components. This includes utility functions, helper functions, configuration files, or any other JavaScript logic that doesn't involve JSX.

When importing components or files into other parts of your React application, you would specify the file extension (.js or .jsx) depending on the type of file you are importing.

For Example:

// Importing a component from a .jsx file
import MyComponent from './MyComponent.jsx';

// Importing a regular JavaScript file
import utilityFunction from './utilityFunction.js';

Remember to configure your build system (such as Babel or webpack) to handle both .js and .jsx file extensions and transpile JSX code into regular JavaScript code if needed.