[译]怎样学习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