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对象

最新文章

  1. 快速了解微信小程序的使用,一个根据小程序的框架开发的todos app
  2. iOS关于XML解析请求数据
  3. SQL Server代理(11/12):维护计划作业
  4. Compiling Inkscape on Windows
  5. I.MX6 linux Qt 同时支持Touch、mouse
  6. SVN - 主干/分支
  7. 红帽系列linux自行配置本地yum源
  8. 分布式文件系统GlusterFS
  9. C++判断一个数字是否为质数
  10. Cordova Upload Images using File Transfer Plugin and .Net core WebAPI
  11. 高可用Redis(十二):Redis Cluster
  12. Django+Xadmin打造在线教育系统(六)
  13. CentOS6.5 添加开机自启动脚本
  14. 【十六】php 面向对象
  15. 分形之C折线
  16. H5页面调用手机打电话功能
  17. oracle12c创建用户和表空间出现的问题
  18. JAVA判断字符串相等
  19. Java敲地鼠代码
  20. 数据段描述符和代码段描述符(一)——《x86汇编语言:从实模式到保护模式》读书笔记10

热门文章

  1. HDU 1689 Just a Hook (线段树区间更新+求和)
  2. YII框架的使用
  3. SpringBoot 全局统一记录日志
  4. Elasticsearch--&gt;Get Started--&gt; Exploring Your Data
  5. Bytom交易说明(账户管理模式)
  6. to do list_hadoop
  7. CSS基本内容
  8. git界面里面复制粘贴
  9. gensim使用方法以及例子
  10. python 汉字编码问题