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.