JavaScript practices File extensions

Use .js for JavaScript file extensions. Avoid using .jsx.

Rationale

Here are a few reasons to avoid the .jsx file extension:

  • Not recommended by the React team — The React themselves doesn't recommend the .jsx extension. The official create-react-app only later started supporting it in 2016 (v0.4.1).

  • Lack of support — Webpack, Node.js, and browsers do not support the .jsx file extension by default. It's possible to configure Webpack to support .jsx files, but this is more of an "aftermarket" tweak than a typical use case.

  • Developer friction — If you were to add a line of JSX into a .js file, you'd need to rename it to .jsx. This hurts the ergonomics of the developer experience, as noted by Dan Abramov in this comment.

References

See these online discussions on the issue: