在项目中使用react

React中一切都以JS对象来表示

1、运行cnpm i react react-dom -S安装包

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

2、导入两个包
import React from 'react'创建组件、虚拟DOM元素、生命周期
import ReactDOM from 'react-dom'把创建好的组件和虚拟DOM放到页面上展示

3、创建虚拟DOM元素
const myh1 = React.createElement('h1', {id: 'myh1', title: 'this is a h1'}, '这是一个大大的h1')
const mydiv = React.createElement('div', null, '这是一个div元素', myh1)
h1是div的一个子节点

• 参数1：创建元素的类型，字符串形式，表示元素的名称
• 参数2：是一个对象或null，表示当前这个DOM元素的属性
• 参数3：子节点（包括其他虚拟DOM获取文本子节点）
• 参数n：其他子节点

4、使用ReactDOM把虚拟DOM渲染到页面上
ReactDOM.render(mydiv, document.getElementById('app'))

• 参数1：要渲染的那个虚拟DOM元素
• 参数2：指定页面上一个DOM元素，当做容器

结果：