为何.jsx文件仍需import React from 'react'？.js与.jsx区别存疑

答案： #

核心原因和文件扩展名无关，得从JSX的编译逻辑说起：

• JSX只是语法糖，最终会被Babel这类工具编译成对应函数调用代码。
• 在React 17之前，不管用.js还是.jsx扩展名，编译后的代码都直接依赖React对象来执行React.createElement，所以必须手动导入React模块，否则运行时会报错找不到React变量。
• React 17及以后，官方更新了JSX转换规则，编译后的代码会自动从react/jsx-runtime导入所需函数，不再依赖全局或手动导入的React对象，这时候不管用什么扩展名，都不需要手动写import React from 'react'了。

如果你的项目现在还要求导入React，大概率是编译配置（比如Babel版本、Webpack规则）还停留在旧的JSX转换逻辑上，和你用.jsx扩展名没关系——扩展名只是告诉编译工具“这个文件要按JSX规则处理”，解决不了编译后代码对React的依赖问题。

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