易百教程

5、JSX是什么?

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");