如果你還在為前端的佈局和JS頭疼,你應該看看這篇連載文章

新手如此入門React,我覺得你應該從下面幾點開始入手學習,今天給大家分享的是第一期,後續還會不斷的更新和實戰的分享。

一,瞭解Reac

t

宣告式(

React 使建立互動式 UI 變得輕而易舉。為你應用的每一個狀態設計簡潔的檢視,當資料改變時 React 能有效地更新並正確地渲染元件。以宣告式編寫 UI,可以讓你的程式碼更加可靠,且方便除錯)

2.元件化

(建立擁有各自狀態的元件,再由這些元件構成更加複雜的 UI。元件邏輯使用 JavaScript 編寫而非模版,因此你可以輕鬆地在應用中傳遞資料並使得狀態與 DOM 分離。

3.高效

(React透過和DOM的模擬,最大限度的減少與DOM的互動)

4.JSX

(javascript的拓展語言,建議在React開發中使用JSX)

5.靈活

(React可以和已知的庫或者是框架完美的配合)

6.單向響應的資料流

(React 實現了單向響應的資料流,從而減少了重複程式碼,這也是它為什麼比傳統資料繫結更簡單的原因)

無論你現在正在使用什麼技術棧,你都可以隨時引入 React 來開發新特性,而不需要重寫現有程式碼。React 還可以使用 Node 進行伺服器渲染,或使用 React Native 開發原生移動應用。

如果你還在為前端的佈局和JS頭疼,你應該看看這篇連載文章

二,第一個React例項

頁面如下

<!DOCTYPE html>Hello React!

說明:

html的頁面引入三個庫,

react.min.js(

React的核心庫

)

react-dom.min.js(

提供與DOM相關的功能

babel.min.js (E

S6程式碼轉換為ES5程式碼,還支援JSX

)

三,React的元素操作

元素在React應用中最小的單位,主要作用就是為了描述螢幕上輸出的內容。

const = element =

n你好,hello world

不過我們在引入React的時候都是如下操作,

定義一個跟節點,div的所有內容都將屬於 example的 React DOM來管理,我們也把這個稱為“根”

DOM

節點。

下一步就是將React的元素, const渲染到DOM節點中,方法如下:

const element =

Hello, world!

;ReactDOM。render( element,# 元素 document。getElementById(‘example’) # 節點);

說明:採用的方法為:

ReactDOM.render(),

此方法的兩個重要點就是

元素和節點。

這個時候我們就會產生一個問題,我們需要在同一個節點顯示多個元素該怎麼辦?

其實在React的特性中,元素都是不可改變的,但是我們可以透過更新的方式來達到我們需要實現的目的,比如重新建立一個元素再渲染到同一個節點,這樣元素的內容就更新了。

const element = (

Hello, world!

我是前端工程師小A。

); ReactDOM。render( element, document。getElementById(‘example’) );}

如果你還在為前端的佈局和JS頭疼,你應該看看這篇連載文章

空口無憑,我們可以透過一個實際例子來總結React的第一章學習

<!DoCTYPE html>Hello React!

怎麼樣?是不是感覺React很簡單,當然透過一個簡單的

hello world

還真的看不出什麼東西,但是我們可以明顯的感覺到React更加的注重js的編寫,所有可以用js實現的就不用再去“麻煩”html,高效的DOM就是最好的一個例子。

下一篇我們接著給大家講解React JSX(javascript的拓展語法)

如果你還在為前端的佈局和JS頭疼,你應該看看這篇連載文章