Recommend using .jsx extension for React components, rather than .js

[horaceko]

Recommending that JSX files use the .js file extension is to imply that JS and JSX are interchangeable, which they are not. We should clearly distinguish between the two.

I also took the liberty of cleaning up some of the copy for consistency and grammar.

to: @alvinsng @spikebrehm @justjake

[spikebrehm]

👍 thank you

[justjake]

LGTM

[alvinsng]

Ah for context the main argument was from #331 (comment)

[nkbt]

Hm, such an arguable topic was so quickly merged in... JS and JSX are interchangeable since we compile them both anyway. With the same tool. JSX is JS, it is just a bunch of functions, just written in different syntax, like ES6 and ES5. We don't have special filenames for ES6 or ES7, do we? If browsers natively do not support that syntax, we still do not separate them. Separating them with file name means if you add/remove JSX "tag" you will have to rename file as well. JSX could also be used for functional composition, not only for markup.

[ljharb]

JSX isn't JS because it can't run without a transpile step. ES6 is JS, because in a spec-compliant engine, it will run (spec-compliance being the critical thing here)

I think it's a very bad idea to ever have non-standard syntax in a .js file.

If you're concerned about renaming, then you could just always name it .jsx?

[nkbt]

ES7 is not part of a spec yet too and cannot run without compiler. ES6 is,
but still cannot run without compilation. Isn't CamelCasing component's
name enough to tell it is a component?

[spikebrehm]

JSX is different than ES6 and ES7. JSX is not JavaScript.

Isn't CamelCasing component's name enough to tell it is a component?

Nope. We PascalCase all filenames that export a class constructor, like Flux stores.

[goatslacker]

@nkbt reason this was merged is because Airbnb adheres to this style guide internally and this is just the pattern that we happen to follow.

We also don't write any ES2016 at the moment.

[nkbt]

OK, got it