在项目中使用react

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

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

npm install module_name -S    即    npm install module_name --save    写入dependencies
dependencies 是需要发布到生产环境的

npm install module_name -D    即    npm install module_name --save-dev 写入devDependencies
devDependencies 里面的插件只用于开发环境，不用于生产环境

npm install module_name -g 全局安装(命令行使用)

2、在index.html中创建容器

 <!-- 创建一个容器，将来渲染虚拟DOM会放到这个容器内显示 -->
 <div id="app"></div>

3、导入包

<!-- 1、 这两个导入，接收的成员名称，必须这么写 -->
import React from "react"  <!-- 创建组件，虚拟DOM元素，生命周期 -->
import ReactDom from "react-dom" <!-- 创建好的组件，虚拟DOM，放到页面上展示 -->

4、创建虚拟DOM元素：

// 参数1.创建元素的类型，字符串，表示元素的名称
// 参数2.是一个对象或null,表示当前DOM的属性
// 参数3.子节点，包括其他虚拟DOM 或 文本子节点
// 参数n.其他子节点
// <div id="mydiv" title="this is a div">这是div<h1>这是h1</h1></div>
var myH1 = React.createElement("h1", null , "这是h1")
var myDiv = React.createElement("div", {id: "mydiv", title: "this is a div"}, "这是div",myH1)

5、使用 ReactDom 将虚拟DOM渲染到页面上

// 参数1.要渲染的虚拟DOM元素
// 参数2.指定页面上一个容器
// ReactDom.render(myDiv, "#app")  第二个参数接收的是一个DOM元素而不是选择器
ReactDom.render(myDiv, document.getElementById('app'))