1、在项目中使用react
1）运行cnpm i react react-dom -S安装包
react: 专门用于创建组件和虚拟DOM的，生命周期
react-dom: 专门进行DOM操作的，最主要的应用场景就是ReactDOM.render()
2）在index.html页面创建容器：
<div id="app"></div>
3）导入包，创建虚拟DOM，将虚拟DOM渲染到页面
index.js
import React from ‘react‘ import ReactDOM from ‘react-dom‘ // 创建虚拟DOM元素 // 参数1: 元素名称; 参数2: 属性; 参数3-n: 子节点 // const myh1 = React.createElement(‘h1‘, null, ‘h1标签的文本‘) const myh1 = React.createElement(‘h1‘, {id: ‘myh1‘}, ‘h1标签的文本‘) // 将虚拟DOM渲染到页面 // 参数1: 虚拟DOM元素; 参数2: 容器 ReactDOM.render(myh1, document.getElementById(‘app‘))
2、使用React.createElement实现虚拟DOM嵌套
index.js
import React from ‘react‘ import ReactDOM from ‘react-dom‘ // 创建虚拟DOM元素 // 参数1: 元素名称; 参数2: 属性; 参数3-n: 子节点 const myh1 = React.createElement(‘h1‘, {id: ‘myh1‘}, ‘h1标签的文本‘) const mydiv = React.createElement(‘div‘, null, ‘div文本‘, myh1) // div中包含了h1 // 将虚拟DOM渲染到页面 // 参数1: 虚拟DOM元素; 参数2: 容器 ReactDOM.render(mydiv, document.getElementById(‘app‘))
原文：https://www.cnblogs.com/xy-ouyang/p/11986682.html