版权申明：
此文章首发于公众号程序员在深圳，搜索 studycode 即可关注
本文无需授权即可转载，转载时请务必注明作者
去年8月左右，看到了ThoughtWorks发布的2016年技术雷达，里面重点推荐了react.js技术，加上前端技术栈三足鼎立中，react也占据一席，其他两个分别是vue.js及angular.js，而react和其他两个的区别在于，它颠覆了整个技术栈，自成一派，抛弃了HTML和DOM，引入了JSX语法，让程序员可以更专注于逻辑代码。这一切让我对react.js充满了好奇，决定花时间学习一下，一探究竟。
本次学习我更采用了刚学到的元学习法，抛弃了曾经一贯的从基础开始的学习套路，毕竟后者周期较长，在只能用碎片时间学习的情况下，如果不能快速看到效果，学习目标很可能会夭折。在学习之前，我列了以下几点
- 写下为什么要学，学它是不是会让我非常激动
我终于学会前端开发了
我可以了解前端开发的思路，对我以后的程序设计有帮助（vue和react都是号称可以解决复杂问题的技术，而jQuery已经心有余而力不足）
我还想玩玩ReactNative
- 如果要学，计划是什么，第一个小目标要到什么程度
工作日下班后花1个小时，周末花半天
学到可以看懂代码，自己可以写出简单的应用，为深入学习铺路
- 选材，遇到问题如何解决
在github上搜索React Demo，直接找最简单的Demo练习
找最权威的教程方便检索，最后找到了官网和阮一峰的博客，ES6入门
定下了目标和计划后，就开始行动，今天为止，已经完成了目标，这个目标尽管很小，但足以让我搞懂React及Redux框架的重要知识点，以及能够帮助我继续深入学习。下面就分别来说一下整个学习过程，方便同样想学习的同学参考，毕竟网上有很多资料都是滥竽充数，不知不觉就会让你多走很多弯路。以下是我总结出来的最短学习路径：
0.搭建开发环境
1.练习最简单的Redux Demo
2.学会使用Create React App工具
3.练习React-Redux框架
0. 搭建开发环境
好的开发环境可以极大地提高你的开发和学习效率，曾经在公司用yum安装软件时掉进了一个大坑——没有使用yum国内镜像导致下载极慢，直到更换了下载源之后才追悔莫及，所以学习React之前的准备工作是
- 安装国内的npm镜像
- 配置编辑器，让其可以高亮、缩进、自动排版、补全等，这里就不具体说明，请大家自行google，因为每个人的编辑器可能不一样
1. 练习最简单的redux demo
在练习demo之前，你需要先学习下React基本知识，这个教程写的非常好。
React并不会帮你组织代码，所以你需要选择一个框架，Redux是目前主流的React框架，它是Flux架构的一种实现。官网上有最简单的计数器demo，直接把这个demo下载下来，对着源码练习，你可以采用以下练习方法
- 第一遍：复制粘贴代码，注意每粘一段代码，就要对应看一下相应的输出，主要让自己脑海里有一个大致的框架：需要什么依赖，用了什么工具
- 第二遍：尝试理解代码的含义，不懂的话马上查找我上面说的"权威教程"，注意查找时只需要查找必要知识，千万不要不知不觉就把整个文档都看完才回来理解——时间伤不起啊。
- 第三遍：在理解的基础上尝试自己写代码，不会写了可以偷看一眼源码，这个过程会加深你对知识的理解，重复第三遍，直到你可以熟练写出为止。
此方法适合有一定编程基础的同学，因为在第二遍的时候就开始理解，学习曲线陡然提升，如果你是一个零基础小白，你可能需要首先了解一点html、js基础，同样可以在github上找几个最简单demo加以练习的方式，相信补这些知识也会很快。
这个demo是一个单页面的html文件，总共才60多行，mac下直接执行open index.html即可在浏览器查看效果，我在文档中加入了必要的注释，代码可以在这里下载，同时，你可以查看这篇教程对照学习。
2. 学会使用Create React App工具
在学习Redux框架之前，你需要先学会使用Create React App这个工具，这个工具会自动帮你创建app环境，如果你之前没了解过它，可能会和我一样，在拿到React-Redux时直接懵逼，毕竟我们无法理解未知加未知的东西，所以在继续之前你需要先学会如何使用Create React App：
- 安装：
npm install -g create-react-app - 在指定目录创建一个app：
create-react-app my-app - 把我的demo2下载到本地，替换掉
src目录中的文件和package.json文件 - 执行：
cd my-app && npm install && npm start
这个工具其实很简单，以上步骤是告诉你，哪些是工具生成的，哪些地方是我们可以修改的，其中src目录一般存放我们的代码，而package.json是项目配置。
3. 练习React-Redux框架
刚才你下载的demo2即是需要练习的demo，功能和demo1一样，只是组织方式有所不同，它更像一个"真实"的项目，练习方法和第1步里描述的一样，相信你很快就可以熟练
之后你可能会练习官网里的todos demo，但你很快会发现todos demo的代码复杂了很多：
- 一是因为它使用了我们还不怎么熟悉的React-Redux框架
- 二是它将组件分在了不同的文件中，转来转去很容易转晕
所以建议先读一下更简单的代码，demo3是个单文件的js代码，依然包括了React-Redux框架的必要的知识，通过执行npm install && npm start来运行，练完这个demo之后你便会非常有信心去阅读todos demo的代码了。
以上是我实践出的React中的最少必要知识，接着你可以继续练习其他demos，或者做一些更完整的项目，如果你感兴趣，现在就开始吧，在编程领域，唯有不断练习才是最好的学习方法。
