• 原文地址：So you want to learn React.js?
• 原文作者：Samer Buna
• 譯文出自：掘金翻譯計劃
• 本文永久連結：github.com/xitu/gold-m…
• 譯者：tv_哇
• 校對者：kangkai124 jonjia

聽說你想學 React.js ？

首先，你需要接受一個事實，就是為了使用 React 你需要學習除了 React 之外更多的知識。這是件好事，React 這個庫在某些場景下使用是非常棒的，但它並不能解決所有問題。

而且，請先確認你現在是否在學習 React，這主要是為了不讓你對學習 React 本身感到困惑。一個熟悉 HTML 和其他一種程式語言的程式設計師，他應該能夠在一天或更短時間內 100% 的掌握 React。一個新手程式設計師應該在一個星期就能掌握 React。當然，這不包括用來完善 React 的工具及其他庫，例如 Redux 和 Relay。

有序地學習是一件重要的事情，這個順序會根據你掌握的技能而有所不同。不言而喻，首先你需要對 JavaScript 本身有清晰的理解，當然， HTML 也是。我想在這詳細說明下，如果你不知道如何使用陣列的 map 或 reduce 方法，或者你不理解閉包，回撥的概念，又或者如果在 JavaScript 程式碼中看到“this”使你感到困惑。那麼你還沒有準備好學習 React ，而且在 JavaScript 的領域你還有很多東西需要學習。

首先更新 JavaScript 的知識並不是一件壞事，主要是你需要學習 ES2015，並不是因為 React 依賴它（事實也並不依賴 ES2015）。但因為它是一個更好的語言，因此大多數示例，課程和教程都會使用現代的 JavaScript 語法。具體來說，你需要以下內容：

• 物件字面量和模板字串的新特性
• 塊級作用域 和 let/const 和 var 的區別
• 箭頭函式
• 解構和預設值／剩餘引數／擴充套件運算子
• 類和繼承（用於定義元件，但是避免其他方式使用）
• 使用類欄位語法和箭頭函式定義方法
• Promise 物件以及如何配合 async/await 使用
• 引入和匯出模組（最重要的）

你不需要從 ES2015 開始學習，但最終你還是需要學習它（並不是因為你正在學習 React）

所以除了 ES2015 以外的東西，要成為一個高效的 React 開發者你還需要學習以下內容：

• React，ReactDOM，ReactDOMServer 的 API：這些 API 並不是那麼常用，我們平時用到的（談論到的）大概只有 25 個左右，你很少會全部使用到。React 的官方文件 實際上它是一個很好的起點（它最近變得更好了），但是如果你還是很困惑，可以觀看線上課程，閱讀一本書，或者參加一個專門的研討會。你的選擇無窮無盡，但要小心你挑選的內容，確保它關注的內容是 React 本身，而不是它的工具和生態系統。

• node 和 npm：你需要學習這些（為了 React）的原因，是因為在 npmjs.org 上有很多的工具包，可以讓你的程式設計生活更輕鬆。而且，自從 Node 允許在伺服器端執行 JavaScript 程式碼後，你可以在伺服器端複用前端的 React 程式碼（同構／跨平臺應用）。大多數情況下，你會發現配合像 webpack 這樣的模組打包工具時，就更能彰顯 node 和 npm 的價值。更重要的是，當你編寫大型應用程式時，你至少需要一個工具來處理 JSX （忽略 JSX 是可選的建議）。學習並使用 JSX，推薦的工具是 Babel.js。
• React 生態系統庫：因為 React 只是一個構建頁面 UI 的語言，你需要結合其他工具庫來完成頁面的展示和 MVC 實現。不要等到你對 React 很熟悉後才開始這一步。一旦你完成 React 的學習，我建議你關注 react-router 和 redux 這兩個工具庫，忘掉你之前學習的東西，先學習這兩個庫。
• 在熟悉 React 本身的原始概念之後，馬上構建一個 React Native 的應用程式。你一旦這麼做，你將會只體會到 React 的美。相信我。

在你學習的過程中，你能做到最好的事就是靠自己雙手構建東西。不要複製貼上例子，也不要盲目地遵循說明，而是參照說明構建其他東西（理想情況下，你更在乎的東西）。無論你做什麼，不要只做一個 TODOs 應用程式。

我發現構建簡單的遊戲比用資料驅動的嚴肅的 web 應用程式能更好地展示 React 的思想。這就是為什麼在我的 React.js 入門課程中，我專注於構建簡單的遊戲。我還在我的《簡潔的 React.js》中構建了另一個不同的遊戲，你可以免費閱讀。嘗試在 JavaScript 線上開發平臺 中實現其他類似的遊戲，這是一個好的開始，你不需要伺服器，也不需要管理那些煩人的 state。

JavaScript REPL 和 React.js 開發平臺 通過jsComplete互動式實驗學習 JavaScript 和 React.js jscomplete.com

最近，我為 jsComplate 建立了一個互動式的音訊學習工具。我測試這工具的第一個實驗是一個 React.js 的例子。如果你有做實驗，請務必留下你的反饋意見。

祝你好運並玩得開心！如果你提問得很好，我會很樂意的看看你第一個 React 應用程式並給你一些指導。

感謝您的閱讀，如果你發現這篇文章對你有幫助，請點選下面的 ?，跟隨我發現更多關於 React.js 和 JavaScript 的文章吧。

---

掘金翻譯計劃 是一個翻譯優質網際網路技術文章的社群，文章來源為 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智慧等領域，想要檢視更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。