基本使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<body>
    <div id="test"></div>
    <!-- 核心库 -->
    <script src="../../js/react.development.js"></script>
    <!-- 提供DOM操作的扩展库 -->
    <script src="../../js/react-dom.development.js"></script>
    <!-- 解析JSX语法代码转为纯JS -->
    <script src="../../js/babel.min.js"></script>
    <script type='text/babel'> // 告诉babel.js解析里面的jsx代码
    // 1. 创建虚拟DOM元素对象
    var vDom = <h1>Hello React!</h1>
    // 2. 将虚拟DOM渲染到真实的DOM容器中
    ReactDOM.render(vDom, document.getElementById('test'))
    </script>
</body>

image-20201114082933546

JSX理解和基本使用

JSX全程为JavaScriptXML，用于创建react虚拟DOM对象。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<body>
    <div id="test1"></div>
    <div id="test2"></div>
    <!-- 核心库 -->
    <script src="../../js/react.development.js"></script>
    <!-- 提供DOM操作的扩展库 -->
    <script src="../../js/react-dom.development.js"></script>
    <!-- 解析JSX语法代码转为纯JS -->
    <script src="../../js/babel.min.js"></script>
    <script>
        var msg = 'Hello React'
        var MyId = 'MyId'
        // 1. 创建虚拟DOM元素对象
        var vDom1 = React.createElement('h2', { id: MyId.toLowerCase() }, msg.toLowerCase())
        // 2. 将虚拟DOM渲染到真实的DOM容器中
        ReactDOM.render(vDom1, document.getElementById('test1'))
    </script>
    <script type='text/babel'> // 告诉babel.js解析里面的jsx代码
        // 1. 创建虚拟DOM元素对象
        var vDom2 = <h3 id={MyId.toUpperCase()}>{msg.toUpperCase()}</h3>
        // 2. 将虚拟DOM渲染到真实的DOM容器中
        ReactDOM.render(vDom2, document.getElementById('test2'))
    </script>
</body>

image-20201114084721027

babel将jsx代码转化为纯js代码。

创建虚拟DOM有两种方式

  1. React.createElement()

    1
    React.createElement('h2', { id: MyId.toLowerCase() }, msg.toLowerCase())

    • 第一个参数

      表示需要创建的标签名

    • 第二个参数

      表示该标签的属性

    • 第三个参数

      表示该标签的值

  2. jsx语法

    1
    <h3 id={MyId.toUpperCase()}>{msg.toUpperCase()}</h3>

    遍历使用{}语法包裹即可。

遍历数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div id="test"></div>
<!-- 核心库 -->
<script src="../../js/react.development.js"></script>
<!-- 提供DOM操作的扩展库 -->
<script src="../../js/react-dom.development.js"></script>
<!-- 解析JSX语法代码转为纯JS -->
<script src="../../js/babel.min.js"></script>

<script type='text/babel'> // 告诉babel.js解析里面的jsx代码
    const names = ['JQuery', 'zeptp', 'angular', 'vue', 'react']
    // 1. 创建虚拟DOM元素对象
    var vDom = (
      <ul>
        // 将数组遍历
        {names.map((name, index) => <li key={index}>{name}</li>)}
    </ul>
    )
    // 2. 将虚拟DOM渲染到真实的DOM容器中
    ReactDOM.render(vDom, document.getElementById('test'))
</script>

image-20201114085834911