React - 渲染最基本的虚拟DOM到页面上
2019-07-26 本文已影响0人
辻子路
安装React相关包
npm install react react-dom
- react: 专门用于创建组件和虚拟DOM的，同时组件的生命周期在这个包中
- react-dom: 专门进行DOM操作的，最主要的应用场景就是ReactDOM.render()
渲染最基本的虚拟DOM到页面上
- 引用react和react-dom包
import React from 'react'; // 创建组件，虚拟DOM，生命周期
import ReactDOM from 'react-dom'; // 创建好的组件和 虚拟DOM放到页面上展示
- 创建虚拟DOM元素
// 创建虚拟DOM元素
// 参数1: 创建的原色的类型，字符串，表示元素的名称
// 参数2: 是一个对象或者null, 表示 当前这个DOM元素的属性
// 参数3: 子节点(包括其它 虚拟DOM 获取文本子节点)
// 参数n: 其它子节点
// <h1 id="myh1" title = "this is a h1"> 这是一个大大的H1</h1>
// const myh1 = React.createElement('h1', null, '这是一个大大的H1')
const myh1 = React.createElement('h1', { id: 'myh1', title: 'this is a h1' }, '这是一个大大的H1')
- 创建一个虚拟div DOM元素来包含上面定义的虚拟DOM
const mydiv = React.createElement('div', null, '这是一个div', myh1)
- 使用ReactDOM把虚拟DOM渲染到页面上
// 使用ReactDOM把虚拟DOM渲染到页面上
// 参数1: 要渲染的那个虚拟DOM元素
// 参数2: 指定页面上一个DOM元素，当作容器
ReactDOM.render(mydiv, document.getElementById('app'))
- index.html创建个容器
<body>
<!--创建一个容器，将来 渲染的虚拟DOM会放到这个容器中-->
<div id="app"></div>
</body>
