在React.js中工作时,有一些事情让我感到非常困惑。
在互联网上有很多使用.js文件的React的例子,但也有很多人使用.jsx文件。
我读过JSX文件,我的理解是它们只是让您在JavaScript中编写HTML标记。 但同样的东西也可以写在JS文件中。
那么。js和。jsx之间的实际区别是什么呢?
在React.js中工作时,有一些事情让我感到非常困惑。
在互联网上有很多使用.js文件的React的例子,但也有很多人使用.jsx文件。
我读过JSX文件,我的理解是它们只是让您在JavaScript中编写HTML标记。 但同样的东西也可以写在JS文件中。
那么。js和。jsx之间的实际区别是什么呢?
当前回答
根据IDE或编辑器的不同,.jsx有不同的文件图标:P。不阅读代码就知道它是什么文件是一个很好的实践。捆绑器和编译器可能知道它,并会处理所有的事情,但是仅从文件名来区分.jsx和.js之间的区别将对开发人员有很大帮助。
编辑:jsx不仅仅是js,它是javascript + xml,它允许你在js文件中编写html而不使用模板字符串。出于这个原因,使用. jsx代替.js(这也是有效的)是一个很好的实践。
其他回答
当涉及到文件扩展名时,没有。你的捆绑器/转译器/任何东西负责解决文件内容的类型。
然而,在决定将什么放入.js或.jsx文件类型时,还有一些其他考虑因素。由于JSX不是标准JavaScript,有人可能会说任何不是“普通”JavaScript的东西都应该有自己的扩展。例如,JSX代表. JSX, TypeScript代表.ts。
这里有一个很好的讨论可供阅读
JSX标签(<Component/>)显然不是标准的javascript,如果你把它们放在一个裸的<script>标签中,就没有特殊的意义。因此所有包含它们的React文件都是JSX而不是JS。
按照惯例,React应用程序的入口点通常是.js而不是.jsx,即使它包含React组件。也可以是。jsx。任何其他JSX文件通常都有. JSX扩展名。
在任何情况下,存在模糊性的原因是,最终扩展并不重要,因为转译器乐于咀嚼任何类型的文件,只要它们实际上是JSX。
我的建议是:别担心。
为什么JSX ? React包含了这样一个事实,即呈现逻辑本质上是与其他UI逻辑耦合的:事件如何处理,状态如何随时间变化,以及如何准备数据以显示。
React没有通过将标记和逻辑放在单独的文件中人为地分离技术,而是使用包含两者的松散耦合单元(称为“组件”)来分离关注点。我们将在后面的部分中回到组件,但如果你还不习惯在JS中放置标记,这篇文章可能会说服你。
React不需要使用JSX,但大多数人发现它在JavaScript代码中使用UI时作为一种视觉辅助很有帮助。它还允许React显示更多有用的错误和警告消息。
要了解更多信息,请查看React关于JSX的文档。 https://reactjs.org/docs/introducing-jsx.html
根据IDE或编辑器的不同,.jsx有不同的文件图标:P。不阅读代码就知道它是什么文件是一个很好的实践。捆绑器和编译器可能知道它,并会处理所有的事情,但是仅从文件名来区分.jsx和.js之间的区别将对开发人员有很大帮助。
编辑:jsx不仅仅是js,它是javascript + xml,它允许你在js文件中编写html而不使用模板字符串。出于这个原因,使用. jsx代替.js(这也是有效的)是一个很好的实践。
JSX不是标准的JavaScript,根据Airbnb风格指南“eslint”可以考虑这种模式
// filename: MyComponent.js
function MyComponent() {
return <div />;
}
作为警告,如果您将文件命名为MyComponent。JSX它将通过,除非你编辑eslint规则 你可以在这里查看风格指南