在React.js 工作时，我发现有些事情让我很困惑。
互联网上有大量使用.js 文件和React 文件的示例，但许多其他示例使用.jsx 文件。
我已阅读有关JSX 文件的信息，我的理解是它们只是让您在JavaScript 中写入HTML 标签。
但是同样的东西也可以写在JS文件中。
那么.js 和.jsx 之间的实际区别是什么？
【问题讨论】：
标签： javascript html reactjs jsx file-type
在文件扩展名方面没有。您的捆绑器/转译器/任何负责解析文件内容类型的东西。
然而，在决定将什么放入.js 或.jsx 文件类型时，还有其他一些考虑因素。由于 JSX 不是标准 JavaScript，有人可能会争辩说，任何不是“普通”JavaScript 的东西都应该进入它自己的扩展，例如，.jsx 用于 JSX，.ts 用于 TypeScript。
【讨论】：
.jsx 不是必需的
在大多数情况下，它只需要转译器/捆绑器，它可能未配置为与 JSX 文件一起使用，而是与 JS 一起使用！所以你不得不使用 JS 文件而不是 JSX。
而且由于 react 只是一个用于 javascript 的库，因此您在 JSX 或 JS 之间进行选择没有区别。 它们完全可以互换！
在某些情况下，由于代码突出显示，用户/开发人员可能还会选择 JSX 而不是 JS，但大多数较新的编辑器也在 JS 文件中正确查看反应语法。
【讨论】：
JSX 标签 (<Component/>) 显然不是标准的 javascript，例如，如果将它们放在裸露的 <script> 标签中，则没有特殊含义。因此，所有包含它们的 React 文件都是 JSX 而不是 JS。
按照惯例，React 应用程序的入口点通常是 .js 而不是 .jsx，即使它包含 React 组件。它也可以是 .jsx。任何其他 JSX 文件通常具有 .jsx 扩展名。
无论如何，存在歧义的原因是因为最终扩展名并不重要，因为只要它们实际上是 JSX，转译器就会愉快地咀嚼任何类型的文件。
我的建议是：不要担心。
【讨论】：
var elem = <div>Text</div>; 也不是标准的html元素；它不支持appendChild、classList 和可能的其他html 功能。如果您想直接在 javascript 中使用 html 标签，最好将模板文字（反引号 `）与 innerHtml 或 outerHtml 一起使用。
正如其他提到的，JSX 不是标准的 Javascript 扩展。 Application 的入口点最好以.js 命名，其余组件可以使用.jsx。
我之所以使用.JSX 作为所有组件的文件名，有一个重要原因。
实际上，在一个包含大量代码的大型项目中，如果我们将所有 React 的组件设置为 .jsx 扩展名，那么在导航到整个项目中的不同 javascript 文件（如帮助程序、中间件等）时会更容易，而你知道这是一个 React 组件，而不是其他类型的 javascript 文件。
【讨论】：
如前所述，如果您使用.jsx 或.js 创建文件，则没有区别。
我希望在创建组件时将文件创建为.jsx。
这不是强制性的，而是我们可以遵循的架构方法。因此，在大型项目中，我们将组件划分为展示组件或容器组件。简而言之，在容器组件中，我们编写逻辑来获取组件的数据并使用道具渲染 Presentational 组件。在展示组件中，我们通常不编写功能逻辑，展示组件用于表示带有所需道具的 UI。
所以，如果你在 React documents 中检查 JSX 上的定义。
它说，
const element = <h1>Hello, world!</h1>;它被称为 JSX，它是 JavaScript 的语法扩展。我们 建议将它与 React 一起使用来描述 UI 的外观 喜欢。 JSX 可能会让你想起模板语言，但它自带 JavaScript 的全部功能。
JSX 产生 React “元素”。而不是人为的分离 通过将标记和逻辑放在单独的文件中的技术，React 将关注点与称为“组件”的松散耦合单元分开 包含两者。
React 不需要使用 JSX，但大多数人认为它很有帮助 在 JavaScript 代码中使用 UI 时的视觉辅助。它也是 允许 React 显示更多有用的错误和警告消息。
这意味着，这不是强制性的，但您可以考虑使用“.jsx”创建演示组件，因为它实际上将道具与 UI 绑定。和容器组件，如.js 文件，因为它们包含获取数据的逻辑。
这是您在创建 .jsx 或 .js 文件时可以遵循的约定，以在逻辑上和物理上分离代码。
【讨论】：
除了提到的 JSX 标签不是标准 javascript 的事实之外，我使用 .jsx 扩展名的原因是因为 Emmet 仍然可以在编辑器中工作 - 你知道，扩展 html 代码的有用插件，例如 ul>li 到
<ul>
<li></li>
</ul>
【讨论】：
"emmet.includeLanguages": { "javascript": "javascriptreact" }，但是，我同意 JSX 代码应该使用 .jsx 扩展名，如果可能。
JSX 不是标准 JavaScript，基于 Airbnb 样式指南“eslint”可以考虑这种模式
// filename: MyComponent.js
function MyComponent() {
return <div />;
}
作为警告，如果您将文件命名为 MyComponent.jsx，它将通过，除非您编辑 eslint 规则 你可以查看样式指南here
【讨论】：
为什么选择 JSX？ React 包含渲染逻辑与其他 UI 逻辑固有耦合的事实：如何处理事件、状态如何随时间变化以及如何准备数据以供显示。
React 不是通过将标记和逻辑放在单独的文件中人为地分离技术，而是使用包含两者的松散耦合单元（称为“组件”）来分离关注点。我们将在下一节中回到组件，但如果您还不习惯在 JS 中添加标记，那么本次演讲可能会让您信服。
React 不需要使用 JSX，但大多数人发现在 JavaScript 代码中使用 UI 时，它可以作为视觉辅助工具。它还允许 React 显示更多有用的错误和警告消息。
有关更多信息，请查看有关 JSX 的 React 文档。 https://reactjs.org/docs/introducing-jsx.html
【讨论】：