在项目中使用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对象

 

posted @ 2019-03-27 16:21  Embrace_LY  阅读(385)  评论(0编辑  收藏  举报