React最少必要知识

字数 1927阅读 3465
题图

版权申明:
此文章首发于公众号程序员在深圳,搜索 studycode 即可关注
本文无需授权即可转载,转载时请务必注明作者

去年8月左右,看到了ThoughtWorks发布的2016年技术雷达,里面重点推荐了react.js技术,加上前端技术栈三足鼎立中,react也占据一席,其他两个分别是vue.js及angular.js,而react和其他两个的区别在于,它颠覆了整个技术栈,自成一派,抛弃了HTML和DOM,引入了JSX语法,让程序员可以更专注于逻辑代码。这一切让我对react.js充满了好奇,决定花时间学习一下,一探究竟。

本次学习我更采用了刚学到的元学习法,抛弃了曾经一贯的从基础开始的学习套路,毕竟后者周期较长,在只能用碎片时间学习的情况下,如果不能快速看到效果,学习目标很可能会夭折。在学习之前,我列了以下几点

  1. 写下为什么要学,学它是不是会让我非常激动

我终于学会前端开发了
我可以了解前端开发的思路,对我以后的程序设计有帮助(vue和react都是号称可以解决复杂问题的技术,而jQuery已经心有余而力不足)
我还想玩玩ReactNative

  1. 如果要学,计划是什么,第一个小目标要到什么程度

工作日下班后花1个小时,周末花半天
学到可以看懂代码,自己可以写出简单的应用,为深入学习铺路

  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下载下来,对着源码练习,你可以采用以下练习方法

  • 第一遍:复制粘贴代码,注意每粘一段代码,就要对应看一下相应的输出,主要让自己脑海里有一个大致的框架:需要什么依赖,用了什么工具
  • 第二遍:尝试理解代码的含义,不懂的话马上查找我上面说的"权威教程",注意查找时只需要查找必要知识,千万不要不知不觉就把整个文档都看完才回来理解——时间伤不起啊。
  • 第三遍:在理解的基础上尝试自己写代码,不会写了可以偷看一眼源码,这个过程会加深你对知识的理解,重复第三遍,直到你可以熟练写出为止。

此方法适合有一定编程基础的同学,因为在第二遍的时候就开始理解,学习曲线陡然提升,如果你是一个零基础小白,你可能需要首先了解一点htmljs基础,同样可以在github上找几个最简单demo加以练习的方式,相信补这些知识也会很快。

这个demo是一个单页面的html文件,总共才60多行,mac下直接执行open index.html即可在浏览器查看效果,我在文档中加入了必要的注释,代码可以在这里下载,同时,你可以查看这篇教程对照学习。

2. 学会使用Create React App工具

在学习Redux框架之前,你需要先学会使用Create React App这个工具,这个工具会自动帮你创建app环境,如果你之前没了解过它,可能会和我一样,在拿到React-Redux时直接懵逼,毕竟我们无法理解未知加未知的东西,所以在继续之前你需要先学会如何使用Create React App:

  1. 安装:npm install -g create-react-app
  2. 在指定目录创建一个app:create-react-app my-app
  3. 把我的demo2下载到本地,替换掉src目录中的文件和package.json文件
  4. 执行: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,或者做一些更完整的项目,如果你感兴趣,现在就开始吧,在编程领域,唯有不断练习才是最好的学习方法。

推荐阅读更多精彩内容