react快速上手一(使用js语法,创建虚拟DOM元素)

1.装包,引包

首先需要安装两个包 react ,react-dom

cnpm  i  react  react-dom

介绍下这两个包:

react:专门用来创建React组件,组件生命周期等这些东西。

react-dom:里面主要封装了和Dom操作相关的包(例如:要把组件渲染到页面上)

装了之后就引包使用了

import  React  from  ‘react’
import ReactDom from ‘react-dom’

2.创建dom对象

在react中,如果要创建DOM元素了,只能使用React提供的JS API来创建(vue是直接创建.vue文件手写HTML元素来创建的)

var myDiv = React.createElement('div' , { title : 'wo shi div' , id = 'myDiv'} ,  '这是一个div' )
React.createElement()方法:用于创建虚拟DOM对象,他接收3个及以上的参数。
参数1:表示要创建的元素类型,参数是个字符串类型(在此我理解为标签名字如:‘div’ ,‘p’) 参数2:表示创建的元素含有哪些属性,参数是个对象(例如有id,class,title属性)
参数3:表示当前创建元素的子节点,可以是文本内容,也可以是子标签,从第三个参数的位置开始,后面可以放好多的虚拟DOM对象(嵌套元素)
创建后的效果:
<div title="wo shi div" id="myDiv">这是一个div</div>
3.渲染到页面
ReactDom.render(myDiv , document.getElementById('app'))
ReactDom.render()用法:
ReactDom.render(‘要渲染的虚拟DOM元素’  ,  '要渲染到页面上的那个位置中')

注意:

ReactDom.render()方法的第二个参数,和vue不一样,React中不接受字符串“#app”,需要传递一个原生的DOM对象“document.getElementById('app')”。
上一篇:pytest自动化3:fixture之conftest.py实现setup


下一篇:【ionic】Mac IOS下真机调试