Change bin/jsx default file extension to .jsx

[andrewdavey]

Currently, bin/jsx defaults to looking for .js files to which contain jsx content to compile. Whilst it's possible to override this using jsx -x jsx ..., I think that since jsx content is not valid JavaScript, using the .js extension by default isn't ideal.

Could we change bin/jsx to look for .jsx files instead?

Another advantage to this is that the generated .js files can live the same directory as the source .jsx. This simplifies the generation of source maps files as well, because the path to the .jsx is trivially relative to the generated .js

For example, given foo.jsx, running jsx . . would result in:

$ ls
foo.jsx
foo.js
foo.js.map

[zpao]

This is probably reasonable, though it'll break some people's current expectations. I do like that it would leave .js files alone by default. @benjamn?

[sophiebits]

+1, we can then get rid of the docblock.

[benjamn]

I really wish we'd done this from the beginning. My only concern is for backwards compatibility. Maybe target this for the next minor version bump and make a big deal of it in the release notes?

[andrewdavey]

+1 for breaking change at next minor version bump. You're still < 1.0, so semver-wise it's acceptable - as long as it's well documented ;)

Anyone who wanted to keep using .js can switch to using jsx -x js ...

[jokeyrhyme]

Urgh. I just got caught out by this big time. Spent 30 minutes trying to figure this out before I realised that jsx ignores *.jsx files by default. Felt really stupid when I realised that the tutorial files are all *.js. :P

[turadg]

Agreed on all points above. I'll add that using .jsx instead of .js tips off your editor to highlight correctly.

[koistya]

As far as I understand, if you choose to use .jsx extension for your React components, you will be forced to explicitly specify this extension in every require() statement throughout your code base (e.g. require('../TextEditor.jsx') instead of just require('../TextEditor')) in order to be able to navigate between files with CTR+Click (aka "navigate to source"). That's the primary reason why .js is currently used by default in React.js Starter Kit.

[gaearon]

@koistya This depends on the bundler you're using. In Webpack, extensions can be configured explicitly in resolve.extensions; pretty sure Browserify allows something similar.

[gaearon]

Oh, I get your point now. I don't really use an IDE.

Regardless, I think such issues should be filed against IDEs themselves. If you use JSX, IDE already has to have some knowledge about it (e.g. how to parse it), so it's not too much to expect it to also follow JSX requires IMO.

[jokeyrhyme]

Feels suspiciously like the user agent string conundrum. JSX is distinctly not JavaScript, but we put it in *.js files anyway because the tools we use don't conveniently look at *.jsx. We propagate a lie for convenience.

[brigand]

though it'll break some people's current expectations

It could give an error when no files are found, and the extension isn't explicitly set. I say error, as in non-zero exit code, so any CI servers that install the latest version implicitly will fail.

Something like this,

JSX found 0 .jsx files.

The default extension was changed from .js to .jsx.  To restore the old behavior add 
the following to your command: -x js

To suppress this error, explicitly set the extension: -x jsx

For more information see http://fb.me/react-updates-0-13

[rickbeerendonk]

Related: #2943

[sdiaz]

IDEs like Webstorm recognize JSX inside a .js, just configure JSX Harmony when the IDE detects JSX and prompt to use it instead of ECMAScript 5.1

[zpao]

We're deprecating react-tools so closing out.