ReactJS - .JS vs .JSX
Solution 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
Solution 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.
Solution 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.
Solution 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.
Solution 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.
ConfusedDeveloper
Newbie in programming for a couple of years. A developer who is not so good in programming and clear his doubts by asking silly questions on this platform.
Updated on July 08, 2022Comments
-
ConfusedDeveloper almost 2 years
There is something I find very confusing when working in
React.js
.There are plenty of examples available on internet which use
.js
files withReact
but many others use.jsx
files.I have read about
JSX
files and my understanding is that they just let you writeHTML
tags within yourJavaScript
. But the same thing can be written inJS
files as well.So what is the actual difference between
.js
and.jsx
? -
Felipe Augusto almost 6 yearsNice link! For me this discussion is something also interesting!
-
STW over 4 yearsWell said. JSX is neither JS or HTML, so giving it its own extension helps indicate what it is--even if using
.jsx
isn't a requirement -
Strategy Thinker over 4 yearsEven
var elem = <div>Text</div>;
is not a standard html element; it does not supportappendChild
,classList
and probably other html features. If you want html tags directly in javascript it is better to use the template literal (the backtick`
) together withinnerHtml
orouterHtml
. -
Thomas Higginbotham over 4 yearsIt's possible to use Emmet for .js files in Visual Studio Code by adding the following to your settings.json:
"emmet.includeLanguages": { "javascript": "javascriptreact" }
, but yes, I agree that JSX code should use the .jsx extension if possible. -
mercury about 3 yearsThe distinction between .js and .jsx files was useful before Babel, but it’s not that useful anymore.
-
Someone_who_likes_SE over 2 yearsWhile this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review
-
Ahmad Moghazi over 2 yearsAlso if your are using VS Code, .jsx files has a different file icon