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.
See these online discussions on the issue: