在项目中首次引入 react

爱被打了一巴掌 2023-07-17 15:58 3阅读 0赞

1.  运行 `cnpm i react react-dom -S` 安装包
    
     *  react： 专门用于创建组件和虚拟DOM的，同时组件的生命周期都在这个包中
     *  react-dom： 专门进行DOM操作的，最主要的应用场景，就是`ReactDOM.render()`
2.  在`index.html`页面中，创建容器：
    
        
        <div id="app"></div>
3.  导入 包：
    
        import React from 'react'
        import ReactDOM from 'react-dom'
4.  创建虚拟DOM元素：
    
        // 这是 创建虚拟DOM元素的 API    <h1 title="啊，五环" id="myh1">你比四环多一环</h1>
        //  第一个参数： 字符串类型的参数，表示要创建的标签的名称
        //  第二个参数：对象类型的参数， 表示 创建的元素的属性节点
        //  第三个参数： 子节点
        const myh1 = React.createElement('h1', { title: '啊，五环', id: 'myh1' }, '你比四环多一环')
5.  渲染：
    
        // 3. 渲染虚拟DOM元素
        // 参数1： 表示要渲染的虚拟DOM对象
        // 参数2： 指定容器,注意：这里不能直接放 容器元素的Id字符串，需要放一个容器的DOM对象
        ReactDOM.render(myh1, document.getElementById('app'))

js代码如下

// 假设，main.js 还是我们的入口文件
    // console.log('ok')
    // webpack-dev-server 打包好的 main.js 是托管到了内存中；所以在项目根目录中看不到；
    // 但是，我们可以认为，在项目根目录中，有一个看不见的 main.js
    
    
    // 1. 这两个导入时候，接收的成员名称，必须这么写
    import React from 'react' // 创建组件、虚拟DOM元素，生命周期
    import ReactDOM from 'react-dom' // 把创建好的 组件 和 虚拟DOM 放到页面上展示的
    
    
    // 2. 创建虚拟DOM元素
    // 参数1： 创建的元素的类型，字符串，表示元素的名称
    // 参数2： 是一个对象或 null, 表示 当前这个 DOM 元素的属性
    // 参数3： 子节点（包括 其它 虚拟DOM 获取 文本子节点）
    // 参数n: 其它子节点
    //  <h1 id="myh1" title="this is a h1">这是一个大大的H1</h1>
    // const myh1 = React.createElement('h1', null, '这是一个大大的H1')
    const myh1 = React.createElement('h1', { id: 'myh1', title: 'this is a h1' }, '这是一个大大的H1')
    
    const mydiv = React.createElement('div', null, '这是一个div元素', myh1)
    
    // 渲染 页面上的 DOM 结构，最好的方式，就是写 HTML 代码
    
    // const mytest = <div>aaa</div>
    
    
    // 3. 使用 ReactDOM 把虚拟DOM 渲染到页面上
    // 参数1： 要渲染的那个虚拟DOM元素
    // 参数2： 指定页面上的DOM元素，当作容器 
    ReactDOM.render(mytest, document.getElementById('app'))
    // Target container is not a DOM element.  经过分析，猜测：第二个参数接收的应该是一个  DOM 元素而不是 选择器

index.js

// 1. 导入包
    import React from 'react'
    import ReactDOM from 'react-dom'
    
    import '@/08.梳理class的静态和实例成员'
    
    // 3. 调用 render 函数渲染   jsx  XML 比 HTML 严格多了
    ReactDOM.render(<div>
      123
    </div>, document.getElementById('app'))

index.html

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Index 首页</title>
      
      
    </head>
    
    <body>
      
      <div id="app"></div>
    </body>
    
    </html>