React项目中为什么同时存在.js和.jsx两种不同的文件后缀？

两种后缀同时存在的核心原因 #

• 历史兼容问题：React和Babel的早期版本没有对JSX语法的文件后缀做强制约束，只要构建工具配置了JSX转译能力，写在.js文件里的JSX语法也可以正常编译运行，大量早期React项目延续了这种写法，后续迭代过程中不会强行修改已有文件的后缀，就出现了新旧写法共存的情况。
• 语义化标识需求：React官方后续推出.jsx后缀，本质是做语义层面的明确标识，让开发者、IDE、构建工具不用扫描文件内容就能快速判断：这个文件包含JSX语法，属于React组件/业务相关文件，提升开发和编译效率。
• 构建规则差异化需要：不少项目会针对后缀做差异化编译配置，比如只对.jsx文件执行JSX语法转译、React相关的lint校验，.js文件默认按普通ECMAScript语法处理，减少不必要的编译开销，这种场景下两种后缀会被明确区分使用。

注意：后缀的区分只是社区和官方推荐的约定，不是语法强制，只要构建配置支持，JSX语法完全可以写在.js文件中正常运行。

区分JSX语法文件和普通JS文件的方法 #

• 按后缀约定判断：如果项目遵循官方/社区规范，.jsx后缀的文件就是使用了JSX语法的React相关文件，.js后缀默认是不含JSX的普通JS文件，通常用来写工具函数、常量定义、公共配置这类非组件逻辑。
• 按文件内容判断：只要文件中出现了类似const App = () => <h1>Hello World</h1>这种HTML标签直接嵌入JS代码的写法，不管后缀是什么，都属于使用了JSX语法的文件。
• 按项目配置判断：可以查看项目的ESLint规则react/jsx-filename-extension的配置项，或者webpack/vite等构建工具的loader匹配规则，就能明确项目内部约定的JSX文件后缀规则。

内容的提问来源于stack exchange，提问作者user15268764