React学习（二）JSX语法

最新推荐文章于 2024-10-29 19:30:00 发布

ZhangSingle

最新推荐文章于 2024-10-29 19:30:00 发布

阅读量430

点赞数 1

CC 4.0 BY-SA版权

分类专栏： React

本文链接：https://blog.csdn.net/ZhangSingle/article/details/75305210

React 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了React中使用JSX的基本概念及其优势，并通过一个简单的示例展示了如何利用JSX和React来渲染动态内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>

显示结果