React

用來實作使用者界面的 JavaScript 函式庫

宣告式

React 讓實作互動式的使用者界面變得一點也不痛苦。你只要在你的應用程式中為每個情境設計一個簡單的 view,React 就會在資料變更時有效率的自動更新並 render 有異動的元件。

宣告式的 view 讓你更容易預測你的程式的行為,同時也較為容易除錯。

元件式開發

首先實作一個擁有 state 的獨立 component,然後組合他們建立複雜的使用者介面。

因為 component 的邏輯是用 JavaScript 寫的而不是使用其他樣板語言,你可以輕鬆的在你的程式中傳遞複雜的資料而不需將其藏在 DOM 之中。

學習一次,四處可通

我們並不強制要求你使用特定的架構,所以你可以在 React 中開發新的功能而不需要重寫原有的程式碼。

React 也可以透過 Node 在伺服器上預先執行,甚至也能透過 React Native 使用在手機應用程式中。


簡單的 Component

React component 需要實做 render() function,這個 function 接受輸入的資料並回傳需要顯示的內容。這個範例使用了 JSX,一個類似 XML 的語法。傳入給元件的輸入資料可以透過 this.propsrender() function 中存取。

使用 React 並不一定要使用 JSX。 試試看 Babel REPL 來了解由 JSX 編譯步驟產生的原始 JavaScript 程式碼。

Loading code example...

Stateful Component

除了接受輸入資料外(透過 this.props 存取),一個 Component 也可以保存自身的 state(透過 this.state 存取)。當一個 component 的 state 改變的時候,產生的標記語法將會透過自動重新呼叫 render() 更新。

Loading code example...

一個應用程式

透過靈活運用 propsstate,我們可以寫一個很簡易的待辦事項的應用程式。這個範例使用 state 保存目前所有的待辦事項以及使用者目前輸入的文字。雖然這些 event handler 像是直接寫在程式碼中,實際上 React 內部會自動收集他們並透過 event delegation 實做。

Loading code example...

使用外部程式的 Component

React component 可以靈活的運用其他的函式庫和框架。這個範例使用了 remarkable,一個外部的 Markdown 函式庫來即時處理 <textarea> 的內容。

Loading code example...