Whats the reason to always use .jsx instead of .js

[danielfttorres]

Hello, I would like to know about using .js and .jsx as an extension of the React files:

Are there any differences? Which are?

• In which cases would the use of .jsx instead of .js is more recommended?
• This question would be relevant when using: Babel/Webpack for precompiling files?

Thanks

[ljharb]

See the discussion in #985, but essentially, .js should only ever be for files that use features of standard JavaScript - anything nonstandard, like jsx, flow, typescript, or early-stage proposals, needs a different extension. For convenience, we've chosen .jsx but you could choose any unique extension you like.

.jxs will describe the pupose/contents of the file from a higher level .It'll be easier while navigating to different files across the project.

[williscool]

It seems like the react team at facebook and the airbnb team that own the most popular javascript style guide here are at odds with each other over file extensions.

Airbnb team seems adamant about not having any non standard code in a js file re this issue (#1235)

and this pull #985

and names any files with the stuff should have jsx

Facebook team seems adamant that js should be the only extension no matter what is in the file

facebook/create-react-app#87 (comment)

For my (and probably others) future reference when setting up a new js repo with the eslint-config-airbnb

[hyoretsu]

Since you can't use JSX tags in a console, they aren't normal .js stuff. And .jsx helps differentiate files.

[abdennour]

jsx => js + X => js + X11 => js + UI (View).

However, i don't recommend that. Just use redux and your code will be organized.