使用.js和.jsx作为Reactjs文件扩展名的区别是什么？

Question

我想了解在Reactjs文件末尾使用.js和.jsx的区别。

我知道JS是标准的JavaScript语言，JSX是类似HTML的语法，用于创建React组件。

但是我发现，如果我使用JSX语法编写React组件，并以.js或.jsx结尾命名文件，它们似乎都可以正常工作（看起来相同）。

那么以.js和.jsx保存React文件有什么区别？

它会影响性能吗？

某些功能在其中一种方式下无法工作吗？

- DanaBg

---

它们是相同的，某些框架也使用.js存储React，您如何配置编译器使它们不同。 - Josh Lin

Answer 1

好的，这两个文件扩展名通常用于编写或定义React组件。随着React的发展，它带来了JSX语法，开发人员开始在.jsx文件中编写他们的组件。借助Babel转译器的帮助，JSX被转译为JS。

现在，借助Babel和Webpack打包工具，你无需担心.jsx或.js的问题。最终，一切都将被捆绑成JavaScript。请记住，Web浏览器不理解.jsx文件或JSX语法。在浏览器中运行的是JavaScript。

通常，当您的文件仅包含JSX并定义用户界面时，我们使用.jsx，这样您就可以更容易地了解文件的实际内容。以下是一个示例。

//profile.jsx
var profile = <div>  
    <img src="avatar.png" className="profile" />  
    <h3>{[user.firstName, user.lastName].join(' ')}</h3>
</div>;

- Pradeep Gill

Answer 2

其中一个区别是，某些代码编辑器能够理解您正在处理 JSX 语法，因此在处理 React 特定的代码（例如自动完成、类型提前等）时，它们将能够提供更多帮助。

两种类型都可以为您正常工作 :)

- AdamKniec