React 學習01 React 的基本使用

2021-10-08 04:15:22 字數 2220 閱讀 1818

在使用 react 之前,我們先來了解一下,react 和 vue 一樣是一款 js 庫,他們和 jquery 之類的主要區別是,他們提供了一種解決問題的思路:元件化,而 jquery 只提供了解決問題的方法。所以我們更傾向於稱 react 和 vue 為框架。

另外,react 和 vue 的區別是,vue 對於元件化,推出了自己特有的模板,即.vue檔案,在檔案中,結構、行為、樣式被分別拆分到了templatescriptstyle這三個標籤之中。react 不同於 vue ,react中的結構、行為、樣式都會被用 js 來表示,所以 react 中只有元件的概念,但是沒有元件的模板。

react 不使用模板,使用元件

react 不是 mvc 框架

響應式,當資料發生變化,利用 render 方法重新渲染

react 是乙個輕量級的 js 庫

準備react.development.js

react 的核心庫,必須作為第一位引用,development說明這個檔案時用於開發模式的。

react-dom.development.js

react 中專門用來操作 dom 的拓展庫,facebook 在開發 react 的時候,將 react 做了拆分,react-dom.js專門被用來開發 h5 應用,react 還可以開發真正的移動應用,只不過這部分功能在react-native中。

babel.js

babel.js可以用來將 es6 的**降級成 es5 方便瀏覽器理解,但是在 react 中,它還有另一種作用。正如我們剛才提到的,react 使用 js 來表示結構,所以為了方便我們書寫 html **,react 提供了一種名為 jsx 的語法,babel 的另乙個作用就是來解析 jsx 語法,將 jsx 的語法轉化為 js 。

我們可以使用兩種方法來引用這三個檔案,注意:在引入時,react-dom 必須要在 react 之後

使用 bootcdn 直接引用網路資源

在 bootcdn 搜尋 react 、react-dom、babel 和剛才一樣的順序引入即可。

使用

// 2. 建立虛擬 dom

let mydom =

hello world<

/h1>

// jsx語法

reactdom.

render

(mydom, document.

getelementbyid()

)// reactdom.render() 方法接收兩個引數,第乙個引數傳入jsx物件,第二個引數傳入根節點

script

>

html

>

01 React 語法基礎(一)之表示式和jsx

react負責邏輯控制 reactdom負責渲染 本節知識點 有 1 變數的使用,簡單使用。1 jsx中的注釋 2 簡單的渲染 ps 定義變數 使用變數 import react from react function const namet 我是表頭 定義變數 return export 我的理解...

react 01 簡單了解react

1 單向資料流 view actions state view state 驅動應用的資料來源,狀態 view 以宣告的方式將state對映到檢視 actions 響應在view上的使用者輸入導致的狀態變化 單項資料流過程 簡單的單向資料流是只使用者訪問view,view發出使用者互動的action...

react學習六 react路由

react router 安裝包yarn add react router dom匯入路由模組 import reactdom from react dom route 表示乙個路由規則,在 route 上,有兩個比較重要的屬性,path component link 表示乙個路由的鏈結 就好比 v...