Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
hydrotik opened this issue Oct 24, 2016 · 1 comment

Comments

@hydrotik
Copy link

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
Copy link
Member

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants