React.js--4.使用react渲染虚拟DOM到页面上

1.在命令行输入:cnpm i react react-dom -S
React.js--4.使用react渲染虚拟DOM到页面上

2.在index.html中创建一个容器,将来渲染的虚拟DOM会存放在这个容器中
React.js--4.使用react渲染虚拟DOM到页面上
3.导入包:在index.js中导入

import React from 'react'       //创建组件,虚拟dom元素,生命周期
import ReactDOM from 'react-dom'  //把创建好的组件和虚拟dom放到页面上展示

React.js--4.使用react渲染虚拟DOM到页面上4.创建虚拟DOM元素

//参数1:创建元素的类型,字符串,表示元素的名称
//参数2:是一个对象或者null,表示当前这个DOM元素的属性
//参数3:子节点(包括其虚拟DOM或获取文本子节点)
//参数n:其他子节点
//例如:

<h1 id="myh1" title="this is h1">这是一个h1</h1>

const myh1 = React.createElement('h1',{id:'myh1',title:'this is a h1'})

5.渲染:使用ReactDom把虚拟dom渲染到页面上

使用ReactDOM把虚拟dom渲染到页面上
//参数1:要渲染的哪个虚拟DOM元素
//参数2:指定页面上一个容器

ReactDOM.render(myh1,document.getElementById('app'));

6.运行:输入命令:

npm run dev

7.结果为:
React.js--4.使用react渲染虚拟DOM到页面上