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')”。