Please consider using .jsx for React components that contain jsx formatted markup.

[hydrotik]

Expected behavior

I propose that files with valid jsx markup should have the .jsx extension to help with project readability and to indicate the need for the file to be transpiled. This is a debatable request, but industry best practices have trended towards naming the file with the .jsx extension. It is easier to reason from a project level, avoids transpilation conflicts, avoids the need to change settings in the IDE, and helps to organize legacy code in a project. One could also argue that until jsx valid markup is included in the ECMAscript specification, it be treated as separate source file for transpilation and named accordingly.

Actual Behavior

Files containing jsx markup are named .js and IDE doesn't show correct syntax highlighting.

Steps to Reproduce the Behavior

N/A

I would also suggest adding this to .eslintrc

"react/jsx-filename-extension": [1, { "extensions": [".jsx"] }]

[mikemurray]

All javascript source in reaction is transcompiled with babel automatically, unless otherwise configured not to. Ecmascript, for the foreseeable future, will always be transcompiled.

You can write JSX in any .js or .jsx file. Babel you da true MVP.

We currently using babel preset stage-2 which has some nice goodies. Specifically, we are using class properties, which is in stage 2 of proposal. So, technically speaking, our JS source is using pre-release, yet-to-be-ratified features and is therefor technically not valid with the current Ecmascript 2016 spec.

Modern editors and IDEs can be configured to support JSX in JS. Atom, the current favorite editor of the team, supports this very well. We endorse it in our docs.

Other, very popular projects use .js extension for react components. Here's a small sample.

Facebook's own draft-js component:
( Granted they do file.react.js, but .js it is still )
https://github.com/facebook/draft-js/tree/master/src/component/contents

React Color:
https://github.com/casesandberg/react-color/tree/master/src/components/slider

Material UI:
https://github.com/callemall/material-ui/tree/master/src/BottomNavigation

React Bootstrap
https://github.com/react-bootstrap/react-bootstrap/tree/master/src

---

All pure Javascript, and Javascript source containing JSX will continue to use the .js extension.
Any remaining .jsx file extensions will be renamed to .js when we are able to do so.

If you are having issues with your IDE, please seek their documentation or chat with us in gitter / forums for tips on how to get set up.

Your points are not wrong, but this his how we've chosen to set up the project. So, I thank you for your feedback, and hope you continue providing it!

Closing.