React-starter-kit: Use .jsx extension for JSX files instead of .js

[dmnd]

As of React 0.12, it is recommended to use the .jsx file extension rather than the pragma in .js files.

This will also help with editors doing syntax highlighting & linting.

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[buxel]

+1 to avoid confusion

[frankleng]

+1

[saitodisse]

+1 editors syntax highlighting

[seemsindie]

+1

[koistya]

Components in the starter kit currently use .js file extension for two reasons:

1. As of now, it's the default file extension for React components used at Facebook. See react-tools jsx command-line build tool, which ignores .jsx files unless you specified -x jsx parameter. Also see React examples and Flux examples.
2. You can reference these components in your source code without specifying file extension, e.g. require('./MyComponent') instead of require('./MyComponent.jsx') and still be able to use "navigate to source" feature in your code editor.

Do you think that the benefits of having .jsx file extension for React components outmatch these two?

[sdiaz]

I prefer the use of .js as it's now

[saitodisse]

good point

[PixnBits]

Every .css file is valid SCSS, but a .scss file may not be valid CSS
Every .js file is valid TypeScript, but a .ts file may not be valid JS (ES3/5/6/2015/2016)
It feels a bit audacious to me that Facebook would put their custom superset into the subset's extension :(

[PixnBits]

FWIW a relevant discussion on this in the React repo:
https://github.com/facebook/react/issues/3582#issuecomment-89411479

[ehartford]

jsx isn't valid javascript so, it should not use a .js extension

[koistya]

@ehartford JSX it's just an extension to JavaScript, not a new language like TypeScript or CoffeeScript. Can you tell the same about async/await stuff which isn't valid JavaScript either?

[PixnBits]

@koistya JSX adds new syntax to ES just as TS does, they're both extensions/supersets that don't follow the ES spec or any stage'd proposal.

FWIW async/await is a Stage 3 proposal, but you raise an interesting point on if proposals TC39 is considering should be considered "valid-enough" ES.

[langpavel]

Irrelevant. JSX syntax can be used (and it is) in every javascript source file. Closing

[wembernard]

@langpavel What about Facebook deprecating react-tools (last comment on https://github.com/facebook/react/issues/832) and recommending .jsx extension?

@koistya You're confused.

JSX is a preprocessor step that adds XML syntax to JavaScript.

Typescript is a typed superset of JavaScript that compiles to plain JavaScript.

See the 2 keywords here: preprocessor, compiles ? Both offer different features but both work the same way.

As a newcomer to the React World, finding jsx syntax inside js is misleading. Everyone here's telling you it's confusing. You do as you please but you're going against your community, that's not really user-centric approach.

[ehartford]

facebook is recommending using .jsx extension how is this an invalid issue?

[kyeotic]

@ehartford Do you have a link for that, because the link PixnBits posted is React saying not to use .jsx.

[langpavel]

Create react app does not use jsx too

[koistya]

@ehartford .jsx is recommended by AirBnb guys, .js by Facebook guys.

[maratbn]

Irrelevant. JSX syntax can be used (and it is) in every javascript source file. Closing

If that's so, how come no browser will interpret a JSX <script> unless its 'type' attribute is specified as 'text/babel' (which will tell Babel to interpret it) rather than 'text/javascript' ?