Hello大家好，我是餘博倫，在接下來的一段時間裡，由我和大家從零開始共同學習React技術棧的相關知識。教程將會以連載的形式釋出在我的個人部落格和微信公眾號上，以文字教程為主，輔以一些程式碼示例供同學們參考，在連載結束之後，我會將所有內容整理為電子書提供下載。連載時教程會在每日早晨由公眾號推送，同時為了方便一些外鏈和程式碼示例，可以在我的個人部落格檢視教程。

作者：

餘博倫

教程謝絕任何形式轉載。

React 是由 Facebook 主導開發的一個 JavaScript 框架。其實它和之前一些流行過的 MVVM 框架，例如 Angular 不同，React 主要只專注於 MVC 中的 V，也就是檢視層。React 是當前最流行的，專門用來構建前端UI介面的框架。

React 的優點是它很快、很輕。並且它元件化的思想在開發構建介面時也對我們有很大的幫助，React 風格的程式碼，在我們學過之後就會了解到，它這種很規範化的寫法，在一個需要共同開發協作的專案組或團隊中，也是非常有益處的。

就好像100個人寫 jQuery 就可能會有100種寫法，但是不管讓誰來寫 React 元件，我們都能保證他寫出來的程式碼和標準是差不多的。

所以假如你對 JavaScript 已經有了相當的掌握，想要學習框架來開發一些Web應用的話，選擇 React 準是沒錯的。

現在的 React 已經不僅僅是一個框架，它逐步發展成了一個非常龐大的生態體系。

本教程會介紹React全家桶當中最為通用流行的一些框架和庫，內容主要涉及到 React/React-router/Redux 這幾個庫，透過學習呢，在教程的結尾我們將能夠開發完成一個利用上述三個工具庫實現的 TodoList 應用。

現在你去看React官網文件，或者一些比較新的 React 教程，我們在書寫 JavaScript 的時候呢，都已經開始採用 ES6 的語法，這些語法乍看起來可能會比較陌生。不過實際上，ES6實現的語法糖和一些新的方法 是能夠極大地方便我們的編碼的。

教程使用的是目前React發行的最新版本（v15。6。1，同時 v15。5。* 之後的版本的程式碼也是適用於React@16的）新版本當中引入了非常多的 ES6 的新特性，所以程式碼看起來和我們以前習慣的 jQuery 風格程式碼會有很多的不同。

在正式學習 React 技術棧之前，推薦你最好掌握一些 ES6 的基本語法，例如箭頭函式、Class類、let、const等一些新的宣告變數的方法等等，當然如果你不瞭解也別擔心，在接下來的教程當中，每當涉及到這些新的語法時，我也會稍作簡介。

JavaScript 參考文件

教程主要內容介紹

教程主要會分為六個部分進行講解，在簡要的基礎知識準備和開發環境搭建之後，我們會分別對 React/Redux/react-router 的關鍵知識點進行學習，之後我們還會介紹到如何在 React 應用中編寫樣式，在最後一個部分，我們將一同實現一個運用上述 React 技術棧實現的 Todolist 應用。

在第一部分我們將會一同學習本教程的主角，也就是如何使用 React。在這一部分當中，我們不光會介紹如何編碼，也會講解 React 當中一些關鍵的原理，以及在開發過程中運用到的 的一些最佳實踐等內容。

接下來我們會一同學習 Redux 的使用，首先我會幫助大家理解狀態管理到底是一個什麼樣的概念，之後會依次介紹 redux 當中幾個關鍵的概念如何實現，如何編寫以及如何運用。

再然後呢，我們會介紹到前端路由的概念。react 技術棧當中，有一個非常棒的庫，react-router 來實現前端路由的功能，比較特殊的是，這個庫目前以及發行到了4。0版本，而之前的版本也都在維護，各個大版本之間有比較多的變化，一些比較細節的內容，即使是它的官方文件也沒有寫清楚。我在這裡呢，會著重教給大家最新版的使用方法，以及一些官方文件都沒有提到的配置方法和小技巧。

我們還會學習到如何在 React 應用中開發編寫樣式，在這裡部分，我會介紹幾種比較主流流行的解決方案供大家參考，你可以在日後正式的工作當中，自行選取你覺得最為合適的開發樣式的方法。

在教程的最後一個部分，我們將會學習到開發 React 應用的一般思路，以及利用之前學過的知識一同實現一個 TodoList 應用。

有的同學呢可能還會有一些疑問，比方說，現在還有一些別的很流行的框架，為什麼我非得選 React 不可呢？

首先，React 相較於其他框架，其生態圈發展最為完整成熟，有非常多現成的完整的解決方案。並且它適用於大中型應用的開發，便於團隊中多人之間協作，很多大廠就在正式的專案中使用了 React，並且學會 React 之後，你的能力將不止侷限於瀏覽器之中，React還可以拓寬到開發原生應用，以及剛剛釋出的ReactVR虛擬現實，甚至是物聯網等各個領域。

為什麼會有這個系列教程？

網際網路上什麼都有，雜亂無章。資訊太多，相當於沒有資訊，選擇太多，相當於沒有選擇。React 的中文資源比較少，大多數都已經過時，使用的是一兩年前的版本，跟不上官方的版本更迭，且有一些中文資料由於翻譯的不準確存在一些知識性的錯誤，很有可能會誤導初學者。

中文的學習資源還是太少，而且良莠不齊。國內前端學習者普遍英文水平還不夠，況且現在前端發展這麼快，等學好英語考過四六級，說不定 React 已經過氣了。

另外，網上還沒有綜合 React 技術棧所有庫的最新版本的教程和程式碼示例。一些教程雖然非常優秀，但隨著 React 及相關庫的新版本釋出，這些教程已經過期，甚至提供的示例程式碼已經不能正常運行了。

本教程相較其他React學習資源的優點在哪裡？

我在準備教程的過程中查閱大量資料，綜合了國內外所有優秀的 React 學習資源，萃取其中最精華的知識點，選擇最為流行的 React 技術棧，立足最新版本的官網文件，在幫助新手入門上手的同時，也會對一些重要的知識概念進行講解，滿足初級、中級各個學習階段和水平的同學。

全部採用當前釋出的正式版本庫進行教學，確保我用起來是這個樣子，你學完之後用起來也是這個樣子。

本教程的前置知識

想要學習本教程的同學最好對 JavaScript 基礎知識、ES6 新特性等相關內容掌握瞭解。熟悉 JavaScript 中變數、物件、函式等基本概念，ES6 中const/class/箭頭函式/解構賦值等新語法的基本使用。本教程 90% 的內容為 JavaScript 相關知識，學習者僅需熟悉基礎的 HTML/CSS 即可。

本教程使用的框架版本及軟體依賴

框架及庫

react@15。6。1

redux@3。7。2

react-router@4。2。0

軟體及工具

npm/cnpm

webpack

create-react-app

codepen/codepan

vs code

chrome

VS Code React技術棧程式碼補全外掛

程式碼示例

React on Codepen

react-router on Codepen

Redux on Codepen

React Demo Project on Github

學習資源

React官方中文文件

餘博倫個人部落格

知乎專欄·從零學習React技術棧

知乎專欄·LeanReact

知乎專欄·pure render

接下來的系列教程會在我的微信公眾號和個人部落格同步更新襖，歡迎關注訂閱。