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





免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM