从零学习 React 技术栈系列教程连载

[feibilanceon]

教程主要内容介绍

教程主要会分为六个部分进行讲解，在简要的基础知识准备和开发环境搭建之后，我会分别对 React/Redux/react-router 的关键知识点进行讲解，之后还会介绍到如何在 React 应用中编写样式，在最后一个部分，我们将一同实现一个运用上述 React 技术栈实现的 Todolist 应用。

为什么会有这个系列教程？

互联网上什么都有，杂乱无章。信息太多，相当于没有信息，选择太多，相当于没有选择。React 的中文资源比较少，大多数都已经过时，使用的是一两年前的版本，跟不上官方的版本更迭，且有一些中文资料由于翻译的不准确存在一些知识性的错误，很有可能会误导初学者。

中文的学习资源还是太少，而且良莠不齐。国内前端学习者普遍英文水平还不够，况且现在前端发展这么快，等学好英语考过四六级，说不定 React 已经过气了。

另外，网上还没有综合 React 技术栈所有库的最新版本的教程和代码示例。一些教程虽然非常优秀，但随着 React 及相关库的新版本发布，这些教程已经过期，甚至提供的示例代码已经不能正常运行了。

本教程相较其他 React 学习资源的优点在哪里？

我在准备教程的过程中查阅大量资料，综合了国内外所有优秀的 React 学习资源，萃取其中最精华的知识点，选择最为流行的 React 技术栈，立足最新版本的官网文档，在帮助新手入门上手的同时，也会对一些重要的知识概念进行讲解，满足初级、中级各个学习阶段和水平的同学。

全部采用当前发布的正式版本库进行教学，确保我用起来是这个样子，你学完之后用起来也是这个样子。

本教程的前置知识

想要学习本教程的同学最好对 JavaScript 基础知识、ES6 新特性等相关内容掌握了解。熟悉 JavaScript 中变量、对象、函数等基本概念，ES6 中 const/class/箭头函数 /解构赋值等新语法的基本使用。

本教程使用的框架版本及软件依赖

框架及库

• react@15.6.1
• redux@3.7.2
• react-router@4.2.0

软件及工具

• npm/cnpm
• webpack
• create-react-app
• codepen/codepan
• vs code
• chrome
• VS Code React 技术栈代码补全插件

教程连载发布在我的博客和公众号上：

• 微信搜索公众号 余博伦 每早 7：30 准时推送连载教程
• 在 我的博客 每晚更新

已发布的教程目录

• 1-1-React 新版本及 ES6 简介
• 1-2-npm 的安装配置说明
• 1-3-React 开发环境配置
• 2-1-JSX 入门
• 2-2-组件类型
• 2-3-组件数据
• 2-4-组件生命周期

正在或准备学习 React 的同学可以参考交流一下。

[tmxklzp]

为余大打 call

[paledream]

最近在学 React，感觉 React 本身不难，难的是 Redux 后理解起来比较绕

[liruifengv]

才知道原来博客比公众号早

[fytriht]

这个目录..... 不如直接看官方文档？

[KeepPro]

我也感觉。redux 比较绕。最近尝试想用 mobx 作为替代

[feibilanceon]

@fytriht 内容以及侧重点是不一样的，而且有代码示例，另外官方文档也是我们翻译的，可以在 https://doc.react-china.org 查看。

[tyrealgray]

如果说是 react 系列的话，感觉可以把 flow 这个库也加上。

[codermagefox]

已收藏,希望楼主不要断更,萌新前端准备从你的教程入手了.

[feibilanceon]

@tyrealgray 嗯，有精力的话，mobx 之类的也会聊聊。

[feibilanceon]

@codermagefox 保证不会断更的。

[83f420984]

谢谢，正好在学，收藏了

[hamalz]

求换背景颜色，黄色有点辣眼睛😂

[TabGre]

原来是我博伦大哥啊

[zyc841584303]

redux 比较蛋疼

[yongjing]

楼主的网站 ico 跟 chrome CL1024 插件相似度好高呀

[KnightYoung]

提个建议,你的 blog 是否设置了延时滚动?个人感觉体验不是很好,感觉会有一些掉帧.是不是可以考虑去掉?

[feibilanceon]

@KnightYoung 嗯，回头我调整一下

[t1518968889]

好黄～不忍直视～