如前所述，如果用.jsx或.js创建文件，两者没有区别。

我想带来另一种期望，即在创建组件时将文件创建为.jsx。

这不是强制性的，而是一种我们可以遵循的架构方法。因此，在大型项目中，我们将组件划分为表示组件或容器组件。简单地说，在容器组件中，我们编写逻辑来获取组件的数据，并使用道具渲染表示组件。在表示组件中，我们通常不编写功能逻辑，表示组件用于表示带有所需道具的UI。

所以，如果你在React文档中检查JSX的定义。

它说,

const element = <h1>Hello, world!</h1>; It is called JSX, and it is a syntax extension to JavaScript. We recommend using it with React to describe what the UI should look like. JSX may remind you of a template language, but it comes with the full power of JavaScript. JSX produces React “elements”. Instead of artificially separating technologies by putting markup and logic in separate files, React separates concerns with loosely coupled units called “components” that contain both. React doesn’t require using JSX, but most people find it helpful as a visual aid when working with UI inside the JavaScript code. It also allows React to show more useful error and warning messages.

它的意思是，它不是强制性的，但你可以考虑用'来创建表示组件。jsx'，因为它实际上绑定了UI的道具。容器组件，如.js文件，包含获取数据的逻辑。

这是在创建.jsx或.js文件时可以遵循的约定，在逻辑上和物理上分离代码。

除了上面提到的JSX标签不是标准的javascript之外，我使用.jsx扩展名的原因是Emmet仍然可以在编辑器中工作——你知道，这个有用的插件可以扩展html代码，例如ul>li

<ul>
  <li></li>
</ul>

如前所述，如果用.jsx或.js创建文件，两者没有区别。

我想带来另一种期望，即在创建组件时将文件创建为.jsx。

这不是强制性的，而是一种我们可以遵循的架构方法。因此，在大型项目中，我们将组件划分为表示组件或容器组件。简单地说，在容器组件中，我们编写逻辑来获取组件的数据，并使用道具渲染表示组件。在表示组件中，我们通常不编写功能逻辑，表示组件用于表示带有所需道具的UI。

所以，如果你在React文档中检查JSX的定义。

它说,

const element = <h1>Hello, world!</h1>; It is called JSX, and it is a syntax extension to JavaScript. We recommend using it with React to describe what the UI should look like. JSX may remind you of a template language, but it comes with the full power of JavaScript. JSX produces React “elements”. Instead of artificially separating technologies by putting markup and logic in separate files, React separates concerns with loosely coupled units called “components” that contain both. React doesn’t require using JSX, but most people find it helpful as a visual aid when working with UI inside the JavaScript code. It also allows React to show more useful error and warning messages.

它的意思是，它不是强制性的，但你可以考虑用'来创建表示组件。jsx'，因为它实际上绑定了UI的道具。容器组件，如.js文件，包含获取数据的逻辑。

这是在创建.jsx或.js文件时可以遵循的约定，在逻辑上和物理上分离代码。

正如其他人提到的，JSX不是一个标准的Javascript扩展。最好基于.js命名应用程序的入口点，对于其他组件，您可以使用.jsx。

我有一个重要的原因，为什么我使用. jsx作为所有组件的文件名。 实际上，在一个有大量代码的大型项目中，如果我们将所有React的组件都设置为.jsx扩展名，那么在整个项目中导航到不同的javascript文件(如helper，中间件等)时会更容易，而且你知道这是一个React组件，而不是其他类型的javascript文件。

JSX不是标准的JavaScript，根据Airbnb风格指南“eslint”可以考虑这种模式

// filename: MyComponent.js
function MyComponent() {
  return <div />;
}

作为警告，如果您将文件命名为MyComponent。JSX它将通过，除非你编辑eslint规则 你可以在这里查看风格指南

如果你使用.jsx，它将被视为一个react页面，因此它的功能将被扩展自动应用。例如，如果你在.jsx文件中使用emmet， .container，这将创建一个className而不是class的div

    <div className="container"></div>

如果你在js文件中应用相同的emmet，你会得到这个:

    <div class="container"></div>