const MyComponent = () => {
return <div>
<p>This is not HTML...!</p>
<p>Wait...Is this JavaScript?</p>
<p>No, What the hell is this?</p>
<p>This is JSX.</p>
</div>
}
如果我们不想使用JXS,则上面代码片段的相应代码将如下所示。*
const MyComponent = () => {
return React.createElement("div", null, React.createElement("p", null, "This is not HTML...!"), React.createElement("p", null, "Wait...Is this JavaScript?"), React.createElement("p", null, "No, What the hell is this?"), React.createElement("p", null, "This is JSX."));
};
9条答案
按热度按时间ppcbkaq51#
JS是标准的javascript,JSX是一种类似HTML的语法,你可以在React中使用它(理论上)使创建React组件更容易、更直观。正如文档所说,唯一的目的是使创建React组件更容易....,.没有其他的东西。没有JSX,使用JS语法创建大型嵌套HTML文档将是一个巨大的痛苦; JSX只是简单地简化了这个过程。
3zwtqj6y2#
默认情况下,每个JSX语法都转换为JS函数调用,即转换为Javascript。
JSX有助于编写容易得多、干净得多的代码。
示例:
你可以 checkout Babel is a JavaScript compiler.,选择react在预置选项,看看它实际上是如何变成每一行。
5ssjco0h3#
使用JSX编译器,您可以将JSX表达式转换为对
React.createElement
的调用。这是一种更方便的方法,可以实现以前使用内联HTML文件作为SCRIPT
标记所实现的功能,而且实际上,还有其他JSX编译器没有绑定到React。为了给予你一个清晰的例子,试着看一下下面的JSX代码,因为它是通过Babel编译成JS的:
gjmwrych4#
JavaScript就像任何普通的编程语言一样,没有任何额外的库或框架。它也可以被称为纯JavaScript。
另一方面,JSX是JavaScript中的语法糖,语法糖是编程语言中的一种语法,旨在使内容更易于阅读或表达。JSX主要用于JavaScript沿着库/框架支持,如ReactJS或ReactNative。
JSX示例
内容如下:
Syntactic sugar - Wikipedia
Introducing JSX – React
vom3gejh5#
JSX是ECMAScript的一个类似XML的语法扩展,根本不需要绑定到React。React只是一个transpiler,一个将JSX树转换为有效JavaScript的引擎。还有其他类似React的transpiler也有JSX语法,JSXDom和MercuryJSX。JSX不符合任何XML或HTML规范,也不属于ECMAScript,是Facebook发明的。
JSX背后的原因是Facebook希望有一种语法扩展,开发人员可以通过清晰简洁的规范来支持它,并希望最大限度地减少另一种“语言”。
ozxc1zmp6#
在这里您将看到js和jsx的基本区别
JavaScript示例
JSX等效
1l5u6lss7#
简单地说,JSX可以被认为是用JavaScript编写HTML,如果我们不得不在没有JSX的情况下编写HTML,就需要编写冗长的代码来创建DOM元素,这在理解上略显复杂。
React文档提供了各种示例和场景:https://reactjs.org/docs/jsx-in-depth.html
6tdlim6h8#
JSX是看起来像HTML的东西,它告诉React要么创建一个普通的HTML元素,要么显示另一个组件。
如果它告诉React创建一个普通的HTML元素,它看起来像这样:
如果它告诉React显示另一个组件,它看起来像这样:
yuvru6vn9#
JSX是JavaScript的语法扩展。它允许您在JavaScript文件中编写类似HTML的代码,并帮助您创建可重用的UI组件。
以下是JSX代码示例:
JSX不是有效的JavaScript代码,因此需要将其转换为浏览器能够理解的JavaScript代码,这种转换通常使用Babel之类的transpiler来完成。
另一方面,JavaScript(JS)是一种用于Web开发的编程语言,是一种由浏览器或服务器端运行环境(如Node.js)执行的语言。
以下是JavaScript代码示例:
JSX通常与React(一个用于构建用户界面的JavaScript库)结合使用,以创建可重用的UI组件。React库提供了一个名为ReactDOM.render()的方法,可用于将JSX元素呈现到DOM中。