Home » Reactjs » Do I have to save react component files with a jsx extension

Do I have to save react component files with a jsx extension

Posted by: admin January 29, 2018 Leave a comment

Questions:

I’ve been writing react for a few months now and I just realized that some of my files have a .js extension while others have .jsx extension. When I write jsx in the .js files, everything still works. Does it matter what the extension is?

by the way (for context), I’m using webpack to generate a bundle.js file. Does that affect anything?

Answers:

No using .js or .jsx doesn’t matter since you have webpack/babel to transpile everything. Really the main difference is when you import files in, you have to include .jsx extension for jsx files where if it is just a js file, you can just put the file name. Ex : import File from ‘./file.jsx’ vs import File from ‘./file’

Questions:
Answers:

No, it doesn’t matter what the extension is.

The JSX transpiler bundled with Babel (which I presume you’re using with Webpack) goes through every file in a watched directory, and simply converts only those segments which match JSX syntax.

All of your files will be reproduced in a corresponding build directory or – in this case – to your Webpack bundle. The transpiler is capable of differentiating regular Javascript from JSX, and will not make changes to the former.

It is still good practice to use .jsx anyway, so that it’s clear to
humans.

Questions:
Answers:

As already mentioned, technically it doesn’t matter.

But, especially when it comes to collaborative projects, it’s may be interesting to check the Airbnb React/JSX Style Guide which is mentioning:

Extensions: Use .jsx extension for React components.

Source: https://github.com/airbnb/javascript/tree/master/react