如何學習React--[轉]

標籤：

如果你是一個 React (或者前端) 新手, 出於以下的原因, 你可能會對這個生態圈感到困惑:

• React 的目標群體曆來是喜歡嘗試新事物的開發人員和前端專家.
• Facebook 只開源了他們在實際使用的, 因此他們沒有關注那些比 Facebook 小的工程需求.
• 現有的 React 指引水平層次不齊.

在本文中, 我會假設你已有使用 HTML, CSS 和 JavaScript 開發網頁的基礎.

為什麼要聽我的?

關於 React, 現在已經有大量的相互衝突的建議了, 為什麼要聽我的?

因為我是在 Facebook 構建並開源 React 的最初成員之一. 現在我離開了 Facebook 並加入了一家初創公司, 所以我也不會站在 Facebook 的立場上來表態.

如何踏入 React 生態圈

所有的軟體都是建立在某個技術棧之上的, 你需要對整個技術棧有足夠深入的理解, 才能建造你的應用. 為什麼 React 生態圈的工具似乎總讓人感覺壓力山大呢, 因為它總是以錯誤的順序被解釋:

你應該按照以下的順序進行學習, 而不是跳著學或者同時學習:

• React
• npm
• JavaScript “打包工具”
• ES6
• Routing
• Flux

你不需要把這些都學完才去使用 React. 只需要在你遇到問題需要解決的時候, 才進入下一步的學習.

另外, 在 React 社區中, 有一些前沿主題是經常被提及到的, 以下的這些主題很有意思, 但也很難弄懂, 所以它們遠沒有上面的主題流行, 大多數應用也不需要用到這些.

• 內聯樣式
• 伺服器端渲染
• Immutable.js
• Relay, Falcor 等

學習 React 本身

有一種常見的誤解是: 你需要花費大量時間在組態工具上, 然後才開始學習 React. 在官方文檔裡, 你可以找到 copy-paste HTML template. 只需要儲存為 .html 檔案, 你就可以馬上開始學習了. 這個步驟不需要任何工具, 你也無需額外學習工具使用, 直到你能熟練掌握 React 基礎.

我依然覺得, 學習 React 最簡單的方法是通過官方教程 the official tutorial.

學習  npm

npm 是 Node.js 包管理工具, 也是前端工程師和設計師分享 JavaScript 代碼最流行的方式. 它包含了名為 CommonJS 的模組系統, 讓你可以安裝 JavaScript 寫的命令列工具. 作為背景知識, 可以閱讀 這篇文章 瞭解 CommonJS 對於瀏覽器的重要性, 閱讀CommonJS Spec Wiki 瞭解關於 CommonJS API 的更多內容

在 React 生態圈中, 大部分可重用的組件、庫和工具遵循 CommonJS 模組規範, 可通過 npm 來安裝.

學習 JavaScript 打包工具

出於若干技術原因, CommonJS 模組 (也就是 npm 裡的所有內容) 不能直接用到瀏覽器. 你需要一個 JavaScript “打包工具(bundler)” 來把這些模組打包成 .js 檔案, 使你可以在網頁中通過 <script> 標籤引入它們.

JavaScript 打包工具包括有 webpack 和 browserify. 它們都是好的選擇, 但我個人更喜歡 webpack , 因為它有許多功能簡化大型應用開發. 鑒於 webpack 文檔可能令人感到困惑, 我也寫了兩篇文章: plug-and-play template for getting started 和針對更複雜用例的 how-to guide for webpack.

要記住的一點: CommonJS 使用了 require() 函數來引入模組, 因此許多人對此感到疑惑, 並認為需要匯入 require.js 到工程裡. 出於若干技術原因, 我建議你避免使用 require.js. 它在 React 生態圈並不流行.

學習 ES6

在 JSX (你會在 React tutorial 中學習到) 以外, 你可能會注意到 React 例子中一些有趣的文法. 這被稱為 ECMAScript6, 是 JavaScript 的最新版本. 由於 ES6 很新, 你可能還沒學習到, 瀏覽器也可能尚未相容, 但別擔心, 通過合適的配置, 你的打包工具會為你自動轉換成相容代碼.

如果你只想要使用 React 來把事情做完, 你可以跳過 ES6 的學習, 或者留到以後再學習.

學習路由 (routing)

“單頁面應用” 是時下的技術熱點. 當網頁載入完成, 使用者點選連結或者按鈕的時候, JavaScript 會更新頁面和改變地址欄, 但網頁不會重新整理. 地址欄的管理就是通過 路由(router) 來完成的.

目前 React 生態圈最受歡迎的路由解決方案是 react-router. 如果你正在建立一個單頁面應用, 有什麼理由不去使用它呢?

如果你建立的並非單頁面應用, 請不要使用路由. 無論如何, 大部分項目都是從大型應用中的小工具開始的.

學習內聯樣式

在 React 出現之前, 很多人通過像 SASS 這樣的前置處理器來重用複雜的 CSS 樣式表. 鑒於 React 使開發可重用組件變得容易, 你的樣式表可以變得沒那麼複雜了. 社區中許多人 (包括我) 正嘗試完全拋棄樣式表.

由於一些原因, 其實這是個相當瘋狂的主意. 這讓媒體查詢 (media quries) 更加困難了, 而且這種技術可能有效能上的局限性. 當你開始用 React 的時候, 只要用你平常使用的方法去寫就好了.

一旦你找到了用 React 開發的感覺, 你就可以關注那些可作為替代的技術了. 其中一種流行技術是 BEM. 我建議你逐漸停用 CSS 前置處理器, 因為 React 給了你一種更強大的方式去重用樣式 (通過重用組件), 並且 JavaScript 打包工具可以為你產生更高效的樣式表 (我曾經在 OSCON 上發表過關於這個的演講). 說了這麼多, 總之 React 就像其他 JavaScript 庫一樣, 可以和 CSS 前置處理器很好地配合工作.

學習伺服器端渲染

伺服器端渲染經常被稱為 "universal" 或 "isomorphic" JS. 這意味著你可以用 React 組件在伺服器端渲染出靜態 HTML. 這樣做可以提高初始化載入的效能, 因為使用者不用等到 JS 下載完才看得見初始介面, 並且 React 可以重用伺服器端渲染出的 HTML, 無需用戶端重建.

如果你發現首屏渲染速度過慢, 或者想提高網站在搜尋引擎的排行, 你就需要伺服器端渲染了. 儘管 Google 現在也會索引用戶端渲染的內容, 但截至 2016 年 1 月, 這樣做被證實會對排行有負面影響, 這可能是由於用戶端渲染的效能問題所造成的.

伺服器端渲染還需要許多工具的輔助, 因為顯然 React 組件不是在考慮伺服器端渲染的情況下寫出來的, 你應該先構建你的應用, 之後再關心伺服器端渲染的問題. 你不用擔心重寫所有組件才能支援它.

學習 Flux

你可能聽過 Flux, 不過關於 Flux 有大量的錯誤資訊.

許多人一坐下來剛開始構建應用, 就認為需要用 Flux 來定義他們的資料模型. 這樣採用 Flux 是不對的, Flux 應該在大量組件被建立完成以後才被引入.

React 組件之間存在層級關係. 在很多時候, 你的資料模型也跟隨這種層級. 這種情況下, Flux 不會給你很大協助. 但有些時候, 你的資料模型沒有層次, 當你的 React 組件開始接受沒有關聯的 props 的時候, 或者當小部分組件開始變得複雜的時候, 你才可能需要看看 Flux.

你會知道什麼時候需要用 Flux. 如果你不確定是否需要用它, 你就不需要它.

如果你決定使用 Flux, 現在最流行的、文檔最全的 Flux 庫是 Redux. 當然也有許多其他選擇, 你或者會有興趣嘗試使用它們, 但我的建議是只需要用最流行的那一個就足夠了.

學習 Immutable.js

Immutable.js 提供了一系列的資料結構, 以協助解決構造 React 應用時的某些效能問題. 這是一個很棒的庫, 你可能會在應用發展的過程裡大量用到它, 但直到你在意識到效能問題以前, 它是完全不必要的.

學習 Relay, Falcor 等

這些技術可以幫你減少 AJAX 請求數, 它們仍然是非常前沿的, 所以如果你沒有遇到過多 AJAX 請求的問題, 就不需要用到 Relay 或者 Falcor.

(英文原文：https://github.com/petehunt/react-howto；轉載自：https://github.com/petehunt/react-howto/blob/master/README-zh.md)

如何學習React--[轉]