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?
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’
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.
It is still good practice to use
.jsx anyway, so that it’s clear to
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.