6周学习计划，攻克JavaScript难关(React/Redux/ES6 etc.)

做者：余博伦
连接：https://zhuanlan.zhihu.com/p/23412169
来源：知乎
著做权归做者全部。商业转载请联系做者得到受权，非商业转载请注明出处。

原文连接：A Study Plan To Cure JavaScript Fatigue

做者：Sacha Greif

和你们同样，最近我也看了Jose Aguinaga写的How it feels to learn JavaScript in 2016.

显然这篇文章击中了人们的痛处。它在Hacker News上排了不止一次第一。一样也是/r/javascript上最火的一篇，在Medium上也有超过10k的推荐。

这并不能算是哗众取宠：我很早之前就了解到，JS的生态圈确实很使人困惑。事实上，我开展State Of JavaScript调查正是为了了解真正受欢迎的JS库，去其糟粕，取其精华。

今天，我不仅是简单地陈述JS的发展示状，我将会向你展示一个十分具体，一步一步掌握JS知识体系的学习计划。

目标人群

这份学习计划写给：

• 你熟悉例如变量方法一类的基本的编程概念；
• 你以前有了解过PHP/Python一类的后端语言，也使用过jQuery一类的库；
• 你想要更深刻的了解前端开发，却迷失在无数的框架和类库当中不知道何去何从。

涵盖内容

• 当前JS应用的构成
• 为何仅使用jQuery是不够的
• 为何React是最合适的选择
• 为何你不必一开始就“全面掌握JavaScript”
• 如何学习ES6语法
• 为何以及如何学习Redux
• GraphQL是个什么玩意儿
• 在这以后该学些什么

学习资料说明

免责声明：文章会提到一些来自Wes Bos的教程连接，仅做推荐，并非推广广告。

若是你想要找到别的相关资料，Mark Erikson在Github上有一个收集列表React, ES6, and Redux

此JavaScript非彼JavaScript

首先明确一下这份学习计划主要目的。随便你一搜“学习JavaScript”或者“JavaScript学习计划”，就可以找到无数有关学习JavaScript语言的教程资源。

但这其实属于比较简单的部分。对一门语言的学习理解能够挖的很深，但是事实上大部分Web应用的代码是很简单的。换句话讲，编写Web应用所需的80%的知识在你看的JavaScript教程书籍的前几章就都涵盖了。

真正的困难在于掌握包含了数不胜数的框架和库的JavaScript的生态体系。这篇学习计划主要关注的就是这部份内容。

JavaScript应用的框架结构

为了理解当前JavaScript应用的复杂性，咱们首先须要了解他们是如何运做的。

首先咱们看一下2008年标准的Web应用的构成：

1. 数据库为后端提供数据（后端能够是PHP或Rails等）；
2. 后端解析数据并输出HTML；
3. HTML被发送到浏览器，以网页的形式展现。

如今这类应用也有一些客户端的JS代码，用来增长交互（例如标签、模态窗口等），但本质上，浏览器还是从服务器获取HTML的内容。

如今拿当前2016年的Web应用（也称做：单页面应用）与之比较：

发现其中的区别了么？并非从服务器发送HTML内容，而是只返回数据，数据到HTML的渲染步骤都发生在客户端（一样也返回客户端如何根据会话进行反馈的代码）。

这么作有好有坏，首先好处是：

• 对于相同的某块内容，只发送数据要比发送HTML页面快。
• 客户端不须要刷新页面就能够进行交互改变内容（这也是为何称其为单页面应用的缘由）

缺陷是：

• 初次加载须要更久，由于 “数据转换成HTML”的代码量会很大。
• 为了方便缓存和查询，你在客户端也须要有一块地方管理和存储数据。

比较脏的是：

• 恭喜你，如今客户端的技术栈和服务器端同样复杂啦。

客户端与服务器的范畴

既然有这么多缺陷咱们为何还要遭这份儿罪呢？就像之前那样使用PHP后端很差么？

那么，试想一下你开发一个计算器应用。若是用户想知道2+2的结果，在服务器端计算再返回是很是傻的，由于浏览器彻底有能力实现这种需求。

但另一方面，若是你只是搭建博客一类的静态站点的话，在服务器端直接生成HTML内容就挺合适的。

而事实上，大部分的Web应用都介于这二者之间，问题就是咱们到底采用何种架构。

关键是两种架构是没法过渡的：你不能开始写一个纯服务器端应用而后慢慢迁移到纯客户端。有些状况下，你将不得不停下来把全部的部分都重构，或者遗留下一堆没法维护的杂乱代码。

这也解释了你为何不能在全部项目中“只用jQuery”。你能够把jQuery想象成万金油。房间里须要修修补补的时候它有奇效，而你若是滥用的话只会让一切看起来很糟糕。另一方面，当前的JavaScript框架就好像3D打印技术革新同样：耗时更久，但结果更简洁可靠。

换句话讲，掌握当前流行的JavaScript技术栈就是赌绝大多数的Web应用可能最终都将把服务器端客户端划分开来。你确实须要付出更多的学习成本。不过少壮不努力，老大只得徒伤悲。

第一周：JavaScript基础

除非你以前是个纯后端开发者，你多少都应该知道点JavaScript.即便你不懂，JavaScript的语法看起来也很像C，对于PHP或Java开发者来讲应该不会太陌生。

要是你以前一点都不了解JavaScript也不要紧。网上能够找到不少相关的免费教程让你快速入门。例如Codecademy’s JavaScript lessons就很不错。

• JavaScript 教程
• JavaScript全栈教程
• JavaScript MDN
• JavaScript 标准参考教程

第二周：开始学习React

掌握了JavaScript的基本语法以后，你多少明白些为何JavaScript应用会如此复杂了，咱们直接说点具体的，从哪里上手呢？

我想答案就该是React.

React是Facebook开源的UI工具库。换句话讲，它主要用来处理数据到页面的渲染步骤（视图层）。

不要误会我：我推荐你选用React不是由于它是全世界最好的框架（这太过主观了），而是由于它确实很是受欢迎。

• React也许不是全世界最受欢迎的框架，但真的有不少人都喜欢它。
• React也许不是最轻量的框架，但也并不臃肿。
• React也许并非最易上手的框架，但也挺友好的。
• React也许并非最优雅的框架，但也够优雅了。

换句话讲，React也许不是全部状况下的最优选择，但它是最靠谱的。而其相信我，在你刚刚开始的时候，仍是不要太特立独行的好。

学习React一样有助于你了解一些实用的概念。例如组件、应用状态、无状态方法等。这对你学习任何别的框架和库都是颇有价值的。

最后，React有着当前最大的生态体系，许多包和库都能和它很是好地协同，同时它庞大的社区也可让你比较轻松地在网上获取到帮助。

我我的推荐React for Beginners这个教程。我本身当时就学了这个教程，并且它最近刚刚更新了React的最佳实践。

• React 入门实例教程
• React 教程
• 一看就懂的ReactJs入门教程-精华版
• 十分详细的React入门实例
• React 入门与最佳实践

你须要先“全面掌握JavaScript”么？

假如你是个循序渐进的同窗，你可能但愿先踏踏实实地牢固打好JavaScript的基础。

但对于大多数人来说，这就好像为了学游泳去学人体解剖和流体力学同样。确实，这两门专业知识对游泳来讲都相当重要，不过仍是直接跳到池子里开始游爽啊！

这个问题没有对错，全在于你的学习方法。事实上，大部分的React基础教程都只须要不多一部分JavaScript知识，你只须要先掌握这部份内容就足够了。

这个道理一样适用于广义上的JavaScript知识体系。你并不须要担忧不理解Webpack或Babel的输入输出。事实上，React推出的命令行工具可让你彻底没必要担忧配置就初始化好应用。

第三周：你的第一个React应用

在你学完了React的教程以后，你可能面临和我当时相同的情况：

• 你把你刚学的内容可能已经忘了一半了。
• 你等不及要带着剩下的一半知识上手实践一下。

我坚信学习一个框架或一门语言的最好方法就是上手实践。而写一些我的项目则是实验新技术的最好选择。

一个我的开发项目能够简单到只是一个页面，也能够复杂到一个完整的Web应用。我感受用新技术从新设计你的我的网站难度刚恰好，另外，你估计也好久没有更新过你我的站的架构了。

我以前提到过，用单页应用展现静态内容确实有些大材小用了，不过React有一款很棒的工具Gatsby，一个React架构的静态站点生成器，可让你体验React的全部优势。

使用Gatsby入门React的好处有如下几条：

• 一个预先配置好的Webpack，这意味着你要省下不少麻烦（Webpack配置简直太反人类）。
• 根据你的目录结构自动生成路由。
• 全部的HTML都会在服务器端渲染，弥补了客户端渲染的不足。
• 静态站点也能够没必要担忧服务器端，而且能够轻松托管在Github Pages上。

State Of JavaScript就是我用Gatsby开发的，不须要操心路由、构建工具配置、服务器端渲染等烦人的问题，为我节约了大量的时间。

第四周：熟悉ES6

在我学习React的过程当中，我很快就发现我能够很轻松地复制粘贴代码示例，但剩下的不少仍然不懂。

尤为是不熟悉ES6的语法：

• 箭头函数Arrow functions
• 对象解构Object destructuring
• 类Classes
• 展开操做符The spread operator

若是你也有相同的感觉，那就是时候花些时间好好学学ES6了。ES6 for Everybody就是一个很不错的教程。

你想要免费的教程也有，Nicolas Bevacqua的Practical ES6就不错。

• ECMAScript 6入门

掌握学习ES6的一个比较好的实践方法是重构你在第三周写的代码，尽可能都转换为更简洁的ES6写法。

第五周：掌握状态管理

到如今这个阶段你应该已经能写一些静态内容的React前端了。

但真正的Web应用确定不是静态的：他们须要从数据库一类的后端获取数据。

如今你能够用React给每一个独立的组件传入数据，可应用一旦复杂了使用这种方式就会很凌乱。例如当两个组件须要展现同一组数据，或者须要相互通讯的时候。

这就是引入状态管理概念的时候了。与在你的各个组件中一小块一小块存储状态(state)不一样的是，你能够将全部的数据存储在一个全局store中，而后再分发给每一个React组件：

在React阵营里，Redux是最受欢迎的状态管理库。Redux不只能帮助你集中管理数据，一样能够将对数据的操做限制在必定规范内。

你能够将Redux想象成一个银行：你不能直接修改你帐户的存款数字（来来来，让我在后面多加几颗零吧！）。而是须要填写存款表单，让银行出纳认证后来完成这个操做。

类似的，Redux也不容许你直接修改全局state的数据。而是经过向reducers传递actions来进行，reducer其实就是一个接收旧状态和操做返回新状态的方法。

这些看似多余的工做可让你很好地维护管理你应用中的数据流。Redux Devtools这样的工具能够很好地显示数据流的变化。

一样你也能够在Wes的网站上学习Redux 教程，这个是免费的。

或者你喜欢视频教程，也能够参考Dan Abramov在egghead.io上的视频教程

• Redux 入门教程
• Redux 入门与最佳实践

最后一周：使用GraphQL构造APIs

到目前为止，咱们谈论的大部份内容都在客户端，这只是整个应用的一半而已。即使你如今不须要彻底了解Node的生态体系，你也须要了解对任何Web应用都相当重要的一点：数据是如何从服务器获取并传到客户端的。

一样也是由Fackbook开源的项目GraphQL，它能够做为传统REST APIs的替代解决方案。

不一样于REST API根据你预先定义的数据集（例如 /api/posts, /api/comments, etc.）分发出不一样的REST路径。GraphQL可让你只经过一个数据端像操做数据库同样按需查询数据。

想象成一我的分别屡次去生食店、面包店、果树店与他带着一个购物清单去的区别。

这种新的策略在你须要请求多组数据源的时候很是有意义。就像咱们上面举的购物清单例子，你只须要一次请求就能够获取全部的数据。

GraphQL在过去的一年里火了起来，不少例如Gatsby的项目都开始打算使用它。

GraphQL自己只是一项协议，它最好的实现是能和Redux很是好地协同的Apollo这个库。如今网上的相关教程确实比较少，不过Apollo 官方文档已经能让你很好地了解它了。

除了React以外呢

我推荐你从学习React生态体系开始由于选它确实很靠谱。但并不意味着只有这一种可靠的前段技术栈。我这里还有两个别的推荐：

Vue

Vue是新近火起来的一个框架，不少百度阿里一类的大公司也都开始使用了。它也一样是PHP框架Laravel的官方前端实现。

相比React，它的主要卖点是：

• 官方提供维护的路由和状态管理类库
• 专一于性能表现
• 更低的学习成本，能够直接使用HTML模板而不是JSX
• 更少的模板代码

React更强大的地方在于它庞大的生态体系，例如React Native一类的实现。不过Vue也在愈来愈壮大。

• 新手向：Vue 2.0 的建议学习顺序

Elm

若是说Vue还和React比较相似的话，Elm是更加前卫的一种实现。Elm不只是一个框架，更是一种创建在JavaScript之上的语言，相似CoffeeScript/TypeScript等。

它有不少优势，例如性能提高，语义化的版本，没有运行异常等。

在State Of JavaScript调查中，有84%使用过它的开发者都很满意。

接下来学什么？

相信在学完上述的内容以后你已经熟练掌握了React的前端技术栈了。但愿你在实际开发中也能很好地应用它。

但这并不能证实你已经精通了JavaScript！这仅仅是掌握整个JavaScript技术体系的开始而已。这里还有一些你可能感兴趣的内容（内容原本也是英文因此就不翻译啦）：

• JavaScript on the server (Node, Express…)
• JavaScript testing (Jest, Enzyme…)
• Build tools (Webpack…)
• Type systems (TypeScript, Flow…)
• Dealing with CSS in your JavaScript apps (CSS Modules, Styled Components…)
• JavaScript for mobile apps (React Native…)
• JavaScript for desktop apps (Electron…)

一篇文章远远不足以介绍全部这些内容。万事开头难，不过你要对本身有信心。等到你了解了JS的各部分实现是如何协同以后，接下来要作的也不过就是每月都学习点火起来的新技术而已。