React

前端工程師的最佳選擇

台灣正體中文化進行中, 歡迎大家到以下Repo協助翻譯工作!

Github Repo

宣告式編程

React 的技術特點讓您能無痛的創建互動式介面。您只需描述應用程式內的畫面在各個狀態的呈現, React 便會高效的根據資料變動來更新畫面。

宣告式的介面撰寫讓您能更好地掌握程式邏輯及除錯。

基於原件

在 React 中,我們撰寫高聚合低耦合的元件,並藉由組合他們來構建複雜的畫面。

此外,因為藉由 JavaScript 而非樣板描述元件邏輯,您可以很輕易的在應用程式內調動大量資料並不影響實際的 DOM 佈局。

一次學習,處處可寫

React 對應用程式不做任何多餘的假設,是以您可以很容易的重新撰寫既存的程式碼。

除了在瀏覽器執行之外,React 同時可在伺服器端 (藉由 Node) 及手機應用內 (藉由 React Native) 執行。


最簡單的元件

React 元件提供了 render() 函式,藉由輸入資料來輸出希望顯示的畫面。下面這個範例使用了被稱為 JSX 的類 XML 語法。render 所需的資料從 this.props 裡取得。

使用 React 並不一定得使用 JSX。 請到 Babel REPL 看看如何只使用 JavaScript 渲染畫面。

有狀態的元件

有別於來自外部的資料 this.props,一個元件也可以擁有其自身的內部狀態 - this.state。當元件的內部狀態改變時,render() 也會被觸發。

應用程式範例

藉由 propsstate,我們可以建立一個簡單的待辦事項應用程式。下面這個案例我們使用 state 紀錄目前的使用者輸入的清單。所有的事件響應函式是以 event delegation 的方式實作。

使用外部套件的元件

React 十分有彈性,它讓您很容易掛載其他第三方的函式庫及框架。下方的範例掛載了一個 Markdown 函式庫 remarkable,讓 <textarea> 的內容值能即時顯示。