React学习(二)JSX语法

前端之家收集整理的这篇文章主要介绍了React学习(二)JSX语法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
React JSX
React 使用 JSX 来替代常规的 JavaScript。
JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。
我们不需要一定使用 JSX,但它有以下优点:
JSX 执行更快,因为它在编译为 JavaScript 代码后进行了优化。
它是类型安全的,在编译过程中就能发现错误

使用 JSX 编写模板更加简单快速


<html>
  <head>
    <Meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="D:/ReactDom/build/react.min.js"></script>
    <script src="D:/ReactDom/build/react-dom.min.js"></script>
    <script src="D:/ReactDom/build/browser.min.js"></script>
  </head>
<body>
    <div id="example"></div>
    <script type="text/babel">
      var names = ['Alice','Emily','Kate'];

      ReactDOM.render(
        <div>
        {
          names.map(function (name,index) {
            return <div key={index}>Hello,{name}!</div>
          })
        }
        </div>,document.getElementById('example')
      );
    </script>
  </body>
</html>
显示结果

猜你在找的React相关文章