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

若是您喜欢这篇文章，请不要忘记分享它