使用 .js 和 .jsx 作为 Reactjs 的文件结尾有什么区别？

Question

我想了解以 .js 和 .jsx 结尾的 Reactjs 文件之间的区别？

我确实知道 JS 是标准的 javascript，而 JSX 是我们用来创建 React 组件的类似 HTML 的语法。

但我确实看到，如果我使用 JSX 语法编写 React 组件并以 .js 或 .jsx 结尾文件名，它们都可以工作（看起来是相同的方式）。

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

它会影响性能吗？

有些事情会不会以一种方式行不通？

Answer 1

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

\n

现在有了 Babel 和 Webpack 捆绑器，您无需担心 .jsx 或 .js。最后，所有内容都将捆绑到 JavaScript 中。请记住一件事，Web 浏览器无法理解 .jsx 文件或 JSX 语法。最终是在浏览器内运行的 JavaScript。

\n

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

\n

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

\n

Answer 2

区别之一是，一些代码编辑器会理解您正在处理 JSX 语法，因此他们能够在处理特定于 React 的代码（例如自动完成功能、提前输入等）时提供更多帮助。

两种类型都适合您:)