Use .jsx extension for JSX files instead of .js about react-starter-kit HOT 19 CLOSED

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

from react-starter-kit.

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

from react-starter-kit.

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 :(

from react-starter-kit.

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

from react-starter-kit.

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?

from react-starter-kit.

@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.

from react-starter-kit.

@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?

from react-starter-kit.

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

from react-starter-kit.

+1 to avoid confusion

from react-starter-kit.

+1 editors syntax highlighting

from react-starter-kit.

Create react app does not use jsx too

from react-starter-kit.

+1

from react-starter-kit.

+1

from react-starter-kit.

good point

from react-starter-kit.

FWIW a relevant discussion on this in the React repo:
facebook/react#3582 (comment)

from react-starter-kit.

@langpavel What about Facebook deprecating react-tools (last comment on facebook/react#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.

from react-starter-kit.

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

from react-starter-kit.

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

from react-starter-kit.

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' ?

from react-starter-kit.