本篇文章在html-webpack-plugin插件使用的基础上
第一步安装包
cnpm i react react-dom -s
react：专门用于创建组件和虚拟Dom的，同时组件的生命周期都在这个包中
react-dom：专门进行Dom操作的，最主要的应用场景，就是ReactDom.render()
第二步编写html与js
index.html
<html>
<head>
<title>learn</title>
</head>
<body>
<div id = 'app'></div>
</body>
</html>
index.js
//这两个导入的时候，接收的成员名称，必须这么写
import React from 'react'//创建组件、虚拟dom元素，生命周期
import ReactDOM from 'react-dom'//把创建好的组件和虚拟dom放到页面上展示
//创建元素React.createElement()
/*
参数1:创建元素的类型，字符串，表示元素的名称
参数2:是一个对象或者null，表示当前dom元素的属性
参数3:子节点（包括 其他 虚拟dom获取文本子节点
参数n：其他子节点
*/
/*
<div><h1 id = "myh1" title="this is title">hello pawn</h1></div>
*/
const myh1=React.createElement('h1',{id:'myh1',title:'this is title'},'hello pawn')
const mydiv = React.createElement('div',null,myh1)
//使用ReactDOM把虚拟Dom渲染到页面上
/*
参数1:要渲染的那个虚拟dom元素
参数2:指定页面上一个容器
*/
ReactDOM.render(mydiv,document.getElementById('app'))
结果
image.png
网友评论