react入门实例教程-阮一峰01

最新推荐文章于 2023-02-13 16:48:14 发布

Vivianluolita

最新推荐文章于 2023-02-13 16:48:14 发布

阅读量1.1k

点赞数

分类专栏： react 文章标签：阮一峰

react 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了HTML与JavaScript混写的JSX语法，并通过实例展示了如何使用React进行页面渲染，包括基本的元素渲染及列表渲染。

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

一、HTML模板

<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      // ** Our code goes here! **
    </script>
  </body>
</html>

(1)上面代码有两个地方需要注意。首先，最后一个

  <div id="example"></div>
  <script type="text/babel">
    ReactDOM.render(
      <h1>hello,world</h1>,<!-- 注意此处逗号 -->
      document.getElementById("example");
    );
  </script>

三、JSX语法
上一节代码，HTML语言直接写在Javascript中，不加任何引号，这就是JSX语法，它允许HTML和javascript混写。

<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>

上面代码体现了 JSX 的基本语法规则：遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析。上面代码的运行结果如下。

这里写图片描述

JSX允许直接在模板插入Javascript变量。如果这个变量是一个数组，则会展开这个数组的所有成员。

<div id="example"></div>
    <script type="text/babel">
      var arr=[
        <h1 key="1">hello world</h1>,
        <h2 key="2">hello world</h2>,
      ];
      ReactDOM.render(
        <div>{arr}</div>,
        document.getElementById('example')
      );
    </script>