JSX 代表 JavaScript XML。它是一个 React 扩展,允许编写看起来类似于 HTML 的 JavaScript 代码。它使 HTML 文件易于理解。JSX 文件使 React 应用程序健壮并提高其性能。JSX 允许在编写 JavaScript 代码的同一文件中编写类似 XML 的语法,然后预处理器(即,像 Babel 这样的转译器)将这些表达式转换为实际的 JavaScript 代码。就像 XML/HTML 一样,JSX 标签也有标签名称、属性和子标签。
例子
class App extends React.Component {
render() {
return(
<div>
<h1>Hello YiiBai</h1>
</div>
)
}
}
在上面的示例中,<h1>
标记内的文本作为 JavaScript 函数返回到渲染函数。编译后,JSX 表达式就变成了一个普通的 JavaScript 函数,如下示例:
React.createElement("h1", null, "Hello YiiBai");