03《黑马程序员——react》在项目中使用react

使用react

一、安装环境npm i react react-dom -S

• react ：专门用于创建组件和虚拟DOM，同时组件的声明周期也在这个包中
• react-dom：专门进行DOM操作，最主要的应用场景，就是渲染DOM ReactDOM.render()

二、在index.html页面中创建容器

    <!-- 4.创建容器，将来渲染的虚拟DOM，会放到该容器内 -->
    <div id="app"></div>

三、导入包：

//1.这两个导入的时候，接受的成员名称，必须这样写
import React from 'react'   //创建组件，虚拟DOM元素，生命周期
import ReactDOM from 'react-dom'    //创建好的组件和虚拟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',{id: 'myh1',title: 'this is a h1' },'这是一个H1')

五、渲染：

//3.使用 ReactDOM 把虚拟DOM渲染到页面上
//参数1：要渲染的虚拟DOM
//参数2：页面上的容器,是一个元素对象，而不是选择器#app
ReactDOM.render(myh1, document.getElementById('app'))