在项目中使用react

1. 运行 ’cnpm i react react-dom -S' 安装包

　　react：专门用于创建组件和虚拟DOM，同时组件的生命周期都在这个包中

　　react-dom：专门进行DOM操作，主要应用场景，就是 'ReactDOM.render()'

2. 在 'index.html'页面中，创建容器：

　　<!-- 将来，使用 React 创建的虚拟DOM元素，都会被渲染到这个指定的容器中 -->

html
<div id='app'></div>

3. 导入包：

javascript
import React from 'react'
import ReactDOM from 'react-dom'

4. 创建虚拟DOM元素：

这是 创建虚拟DOM元素的 API <h1 title="啊，五环" id="myh1">你比四环多一环</h1>

javascript
const myh1=React.createElement('h1',{id:'myh1', title:'react study'},'so easy')

第一个参数： 字符串类型的参数，表示要创建的标签的名称
第二个参数：对象类型的参数， 表示 创建的元素的属性节点
第三个参数： 子节点

页面元素过多时，上述方法过于繁琐，可用下面语法代替：

JSX语法：符合 xml 规范的 JS 语法

注意：JS文件中，默认不能写类似HTML的标记；需要安装babel插件来转换JS中的标签；因此，JSX语法的本质，还是在运行时，被转换成React.createElement形式来执行

JSX
const myh1=<h1 id='myh1' title='react study'>so easy<h1>

5. 渲染

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

参数1： 表示要渲染的虚拟DOM对象
参数2： 指定容器,注意：这里不能直接放 容器元素的Id字符串，需要放一个容器的DOM对象

 

转载于:https://www.cnblogs.com/embrace-ly/p/10608411.html