[譯]怎樣學習React—從初級到高級路線圖

原文戳這裏

嘿，夥伴們！

這個指南是爲初學React的朋友寫的，在每一個部分，我用心收集了最好的視頻和文章，讓咱們學習起來更加容易。

注意：我跟下面提到的網站沒有任何關係，純粹是我我的的想法

預備知識

1. 基本瞭解HTML，CSS和JavaScript
2. 基本瞭解ES6特性，這裏有篇文章介紹ES6特性，從一開始，你至少應該知道如下特性：1.Let; 2.Const; 3.Arrow Functions; 4.Import and Exports; 5.Classes
3. npm的基本使用

準備開始

你可使用在線的代碼編輯器去練習，或者你可使用Create React App

我分別在JSFiddle和Codepen上構建了一個開發環境

爲了掌握全部React的基礎內容，你能夠從下面的教程開始學習：

React的React official documentation

Kent C. Dodds的Beginners guide to React

Samer Buna的Fundamentals of React

如今你應該瞭解了React的基本內容，這足夠咱們使用React開發一個簡單的Web應用

那麼如今能夠看一下React的官方教程：React Official tutorial，這是一篇很好的文章，它覆蓋了React的基礎內容，而且很是清楚的講解了特定的一些主題

最後並同等重要的是，學習怎樣讓React應用鏈接API接口：

Ethan Jarrell的Fetching API with React.js

開始寫一些項目

1. 簡單的To-Do應用
2. 簡單的計算器應用
3. 構建一個購物車
4. 使用Github的API展現Github的用戶統計數據

React Router

React Router幫助你的單頁面應用建立路由，它很是強大而且容易使用。

立刻開始：

Paul Sherman的React Router tutorial

Learn Code Academy的React Router and intro to SPA

Scotch.io的Routing React apps

這些文章足夠你開始使用React路由

項目

1. 一個簡單的CRUD應用
2. 克隆Hacker News

若是你確實對學習Router很是感興趣，能夠看看下面的教程：

React Training的React Router徹底教程

Webpack

Webpack是一個著名的JavaScript的模塊打包器，它幫助你的項目以靜態文件維護依賴關係，讓開發者沒必要作這件事

和Webpack一塊兒的還有加載器，加載器能夠幫助項目運行特定的任務

想要更多的學習Webpack，跟隨下面的教程：

Andrew Ray的When and why to use Webpack

Learn Code Academy的Webpack tutorial

要使用Webpack創建本地React環境，你能夠看一下下面的Github庫：

Hanif Roshan的React SPA template

上面的教程足夠讓你開始使用Webpack，而後想要更加深刻的瞭解，能夠看下下面的指南：

SurviveJS的Webpack introduction

Webpack official docs

服務器渲染

服務器渲染是React的最酷的特性之一，它能夠被任何後端技術使用

React的服務器渲染（SSR）幫助你在服務器建立組件，而且在瀏覽器裏渲染成HTML，當全部的JavaScript模塊在瀏覽器裏下載完成以後，React開始登場。簡單！

首先，看下React-DOM API:

React的React-DOM API

想要更深刻了解，能夠學習如下教程：

Tyler McGinnis的React server rendering

Roilan Salinas的React router server rendering

Dennis Brotzky的React Server side rendering guide

Redux

Redux是爲維護應用程序狀態而開發的JavaScript庫。在構建複雜的應用程序時，會將增長管理組件間狀態的開銷。 Redux可幫助您將全部狀態存儲在一個源中。固然，React與Redux配合得很好！

開始：

Learn Code Academy的Redux tutorial

Valentino Gagliardi的Redux tutorial for beginners

CSS Tricks的React Redux

這些教程足以開始使用Redux。可是，我也沒法抗拒提到下面的教程。它很值得：

Dan Abramov的Getting started with Redux

資源

Awesome React

若是您喜歡這篇文章，請不要忘記分享它