在使用 React.js 进行开发时，有一点令我很困惑。
网上有很多使用 .js 文件和 React 一起使用的例子，但也有很多例子使用了 .jsx 文件。
我已经阅读了关于 JSX 文件的介绍，我的理解是它们只是让你在 JavaScript 中写入 HTML 标签。但同样的内容也可以在 JS 文件中编写。
那么 .js 和 .jsx 之间的实际区别是什么？
ReactJS - .JS vs .JSX
578
- ConfusedDeveloper
1
2这并不会有任何区别，但是如果你是一个擅长编写清晰代码的人，可以遵循 Airbnb 编码风格，该风格建议使用 .jsx。https://github.com/airbnb/javascript/tree/master/react#basic-rules - James Bissick
11个回答
3
清楚你对.js和.jsx之间的区别的疑惑
在ReactJS应用程序中，通常使用.js和.jsx文件扩展名。以下是它们之间的区别：
1. .js文件：
- 具有.js扩展名的JavaScript文件是标准的JavaScript文件。
- 它们可以包含常规的JavaScript代码，不特定于React。
- 您可以编写JavaScript逻辑，定义函数、变量、类等。
- 然而，在使用React时，.js文件通常用于非组件相关的代码，例如实用函数、辅助函数或配置文件。
2. .jsx文件：
.jsx文件是包含JSX语法的JavaScript文件。- JSX（JavaScript XML）是JavaScript的扩展，允许您在JavaScript中编写类似HTML的代码。
- JSX是React提供的语法扩展，用于定义React组件。
- React组件是React应用程序的构建块，它们封装了可重用的UI部分。
- JSX文件既包含JavaScript逻辑，又包含定义React组件结构和外观的类似HTML的标记（JSX语法）。
总之，
.js文件是用于一般JavaScript代码的标准JavaScript文件，而.jsx文件是包含JSX语法的JavaScript文件，专门用于定义React组件。
是的，您可以在React应用程序中同时使用.js和.jsx文件。React支持这两种文件扩展名，允许您在项目中混合使用常规的JavaScript代码和JSX语法。
另一方面，.js文件可用于不特定于React组件的常规JavaScript代码。这包括实用函数、辅助函数、配置文件或任何不涉及JSX的JavaScript逻辑。
当将组件或文件导入到React应用程序的其他部分时，根据导入的文件类型，你需要指定文件扩展名(.js或.jsx)。
例如：
// Importing a component from a .jsx file
import MyComponent from './MyComponent.jsx';
// Importing a regular JavaScript file
import utilityFunction from './utilityFunction.js';.js和.jsx文件扩展名，并在需要时将JSX代码转译为常规的JavaScript代码。- Yogi Ghorecha
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接