使用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'))