在專案中使用react

2022-08-12 05:06:15 字數 1186 閱讀 6361

1.執行 cnpm install react react-dom -s

react安裝包:專門用於建立元件和虛擬dom的,同時元件的生命週期都在這個包中

react-dom安裝包:專門進行dom操作的,最主要的應用場景就是reactdom.render()

2.在index.html頁面中建立容器:

<

div

id>

div>

3.匯入包:

//

1.匯入react包

import react from 'react' //

建立元件、虛擬dom元素、生命週期

import reactdom from 'react-dom' //

把建立好的元件和虛擬dom放到頁面上展示的

4.建立虛擬dom元素:

//

2.建立虛擬dom元素

//引數1:建立的元素的型別,字串,表示元素的名稱

//引數2:是乙個物件或null,表示當前這個dom元素的屬性,null表示沒有屬性

//引數3:子節點(包括其他虛擬dom或文字子節點)

//引數n:其他子節點(從第三個引數往後都屬於子節點)

//const myh1 = react.createelement('h1', , '這是乙個h1標籤')

5.將元素渲染到頁面上:

//

3.使用reactdom把虛擬dom渲染到頁面上

//引數1:要渲染的那個虛擬dom元素

//引數2:指定頁面上的乙個容器,第二個引數接收的應該是乙個dom元素,而不是乙個選擇器

以上是手動一步一步安裝react中需要的包,也可以使用以下方法快速建立react專案:

2.建立react專案

在 React 專案中使用 ECharts

重要檔案版本 在 react 專案中使用 echarts 生成圖表,與使用其他第三方庫沒有太大的區別,只要在 react 的元件componentdidmount宣告週期中初始化 echarts 圖表,然後在每次更新元件時呼叫 echarts 例項的setoption 方法更新配置即可,以下記錄了使...

03 React 在專案中使用react

一 安裝環境npm i react react dom s 二 在index.html頁面中建立容器 三 匯入包 1.這兩個匯入的時候,接受的成員名稱,必須這樣寫 import react from react 建立元件,虛擬dom元素,生命週期 import reactdom from react...

在react專案中使用freactal做狀態管理

3.在專案中的應用 4.舉個專案中的操作栗子 結語單頁應用還是需要乙個狀態管理器,之前嘗試過redux,後來覺得它的寫法太繁瑣了,還需要裝各種依賴,棄之,使用乙個較為簡單的freactal。providerstate 複製 不同於redux,freactal可以設定多個store,所以provide...