CODEWITHSUNDEEP
javascriptreactjsjsx
Abdul Ahmad
Abdul Ahmad

Reputation: 10021

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

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?

Upvotes: 14

Views: 7828

Answers (3)

to7be
to7be

Reputation: 576

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

Upvotes: 6

erichardson30
erichardson30

Reputation: 5054

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'

Upvotes: 21

Akshat Mahajan
Akshat Mahajan

Reputation: 9846

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.

Upvotes: 8

Related Questions