React 是一个用于构建用户界面的 JavaScript 库，具有优秀的性能，并且它的声明式、组件化特性让编写代码变得简单。这条学习路径将带你熟悉前端开发的基础知识，然后深入学习 React、React Router 及 Redux 等关键组件，熟悉 ESLint、Webpack 等常用工具，最后还会涉及小程序开发、跨平台移动端开发、服务器端渲染等热门话题，最终成为一名优秀的 React 前端工程师。
我们平时使用手机或者电脑浏览的网页，如你经常使用的百度主页，它是一个网页，你通过百度的输入框输入内容，然后点击搜索，出现的搜索内容又是另外一个网页。
- MDN 上的 Web 入门部分 -- Web 的概述
- MDN 上的 Web 入门部分 -- 您的网站会是什么样的？
- MDN 上的 Web 入门部分 -- 万维网是如何运作的？
- MDN 上的 Web 入门部分 -- 安装基本软件
HTML（超文本标记语言——HyperText Markup Language）是构成 Web 世界的一砖一瓦。它定义了网页内容的含义和结构。除 HTML 以外的其它技术则通常用来描述一个网页的表现与展示效果（如 CSS），或功能与行为（如 JavaScript）。
- 学习 HTML 的基础知识
- HTML 语法
- 将页面划分为多个部分并正确构建 DOM
层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种 样式表 语言，用来描述 HTML 或 XML（包括如 SVG、MathML、XHTML 之类的 XML 分支语言）文档的呈现。CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。
- 学习 CSS 的基础知识
- Grid 布局和 Flexbox 布局
- 响应式 Web 设计和媒体查询
JavaScript (简称 JS) 是当今最受欢迎的编程语言。从一开始用来在网页中添加简单的动画和表单检验，到现在用来构建复杂的跨平台客户端应用，以及用 Node.js 搭建后端应用，JavaScript 已经在互联网世界刮起了一股强烈的风暴。掌握好 JavaScript 语言基础，可以说是半只脚踏进了 Web 的世界。
- 语法和基本的操作
- DOM 操作
- 变量提升，事件冒泡，原型
- AJAX（XHR）
- ECMAScript 6+，学习新的特性
HTTP是一种能够获取如 HTML 这样的网络资源的 protocol(通讯协议)。它是在 Web 上进行数据交换的基础，是一种 client-server 协议，也就是说，请求通常是由像浏览器这样的接受方发起的。一个完整的Web文档通常是由不同的子文档拼接而成的，像是文本、布局描述、图片、视频、脚本等等。
- HTTP 的基本性质
- HTTP 能控制什么？
- HTTP 流
- HTTP 报文
- 基于 HTTP 的 APIs
简单的说 Node.js 就是运行在服务端的 JavaScript。Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。
- 不同平台（Linux、macOS、Windows）的安装
- 编辑器环境搭建，主要是 VSCode，包括如何与 ESLint、Prettier 等插件集成
- nvm 工具的使用
- 配置 npm 源，加速依赖安装
- ✍️《Node.js 开发环境搭建》 🗝知识点 1, 2, 3, 4
- ✅《Node.js 快速入门教程》 🗝知识点 3, 4, 5
- 一起学 Node.js - 1.1 节
- Node.js 包教不包会 - Lesson 0
- 菜鸟教程 - Node.js 安装配置
- VSCode JavaScript 语言开发官方文档
- MDN - Express 教程之架设 Node(Express) 开发环境
React 是一个用于构建用户界面的 JAVASCRIPT 库。React 主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。
- JSX，ReactDOM.render，Component 和 Props，State，处理事件，条件渲染，循环和 key，表单
- 深入理解 JSX，React 中使用样式和静态资源，React LifeCycle Hooks，可控组件，Lifting State Up，高阶组件，Refs，静态属性检查
- 请求 API，Context，React Hooks
- 高级概念
- 错误处理
- Profiler
- 性能优化
- Portals
- Fragments
- 可访问性
- 代码拆分
- Web 组件
- 可访问性
- 严格模式
- 测试
- ✅《一杯茶的时间，上手 React》 🗝知识点 1
- ✅《用 React 做一个井字棋小游戏（一）》 🗝 知识点 1，以及 2 中的 React 中使用样式和静态资源, Lifting State Up
- ✅《用 React 做一个井字棋小游戏（二）》 🗝 知识点 1，以及 2 中的可控组件，Lifting State Up
- ✍️《React 进阶教程（一）》 🗝知识点 2
- ✍️《React 进阶教程（二）》 🗝知识点 4.1, 4.2, 4.5, 4.5
- ✍️《React 进阶教程（三）》 🗝知识点 4.6, 4.8, 4.9, 4.10
- ✍️《React 性能优化教程》 🗝知识点 4.3, 4.7
- ✍️《React 测试教程》 🗝知识点 4.11
- ✍️《React Hooks 教程》 🗝知识点 3
组件是 React 的核心功能，其拥有非常强大的声明式编程模型。React Router 是导航组件的集合，可与你的应用程序进行声明式的组合。无论你是想为你的 Web 应用程序添加书签，还是在 React Native 中进行组件化导航，React Router 都可以在 React 的任何位置渲染使用。
- 路由基础（静态路由和动态路由说明），URL 参数，嵌套路由，重定向，自定义链接，404，路由的查询参数，路由配置，静态路由上下文等
- 服务端渲染
- 测试
- 与 Redux 整合
- 高阶内容或例子
- 路由过渡动画
- 递归路由
- 侧边栏路由
- 滚动恢复
- 代码拆分
- ✍️《React Router 快速入门教程》 🗝知识点 1
- ✍️《React Router 服务端渲染教程》 🗝知识点 2
- ✍️《React Router 测试教程》 🗝知识点 3
- ✍️《React Router 与 Redux 整合》 🗝知识点 4
- ✍️《React Router 高阶内容或例子（一）》 🗝知识点 5.1，5.2，5.3
- ✍️《React Router 高阶内容或例子（二）》 🗝知识点 5.4，5.5
- React Router 官方文档 🇺🇸
- React Router 官方文档 🇨🇳
- 阮一峰的 React Router 教程 🇨🇳
- 知乎上的 React Router 入门教程 🇨🇳
- 关于 React Router v4 的一切 🇨🇳
- 简明 React Router v4 教程 🇨🇳
Redux 是 JavaScript 状态容器，提供可预测化的状态管理。可以让你构建一致化的应用，运行于不同的环境（客户端、服务器、原生应用），并且易于测试。不仅于此，它还提供 超爽的开发体验，比如有一个时间旅行调试器可以编辑后实时预览。Redux 除了和 React 一起用外，还支持其它界面库。 它体小精悍（只有2kB，包括依赖）。
- Redux 的介绍及与 React 的关系
- 三大核心概念：Store，Reducers，Action
- combineRedcuers，connect
- 容器组件，展示组件
- 异步 Action，异步 Flow
- 搭配 React Router
- 高阶概念：
- 中间件
- Enhancers
- 服务端渲染
- 测试
- ✅《Redux 快速入门教程（一）》 🗝知识点 1
- ✅《Redux 快速入门教程（二）》 🗝知识点 2
- ✅《Redux 快速入门教程（三）》 🗝知识点 3
- ✍️《Redux 进阶教程（一）》 🗝知识点 5
- ✍️《Redux 进阶教程（二）》 🗝知识点 6
- ✍️《Redux 进阶教程（三）》 🗝知识点 7.1, 7.2
- ✍️《Redux 服务端渲染教程》 🗝知识点 7.3
- ✍️《Redux 测试教程》 🗝知识点 7.4
- Redux 官方文档
- Redux 中文文档
- Redux Tutorial 中文翻译
- 阮一峰的 Redux 入门教程（一）：基本用法
- 阮一峰的 Redux 入门教程（二）：中间件与异步操作
- 阮一峰的 Redux 入门教程（三）：React Redux 的用法
小程序，英文名Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。 这里专门介绍使用 Taro 小程序多端统一开发框架来进行小程序开发。 Taro 是一套遵循 React 语法规范的 多端开发 解决方案。 现如今市面上端的形态多种多样，Web、React-Native、微信小程序等各种端大行其道，当业务要求同时在不同的端都要求有所表现的时候，针对不同的端去编写多套代码的成本显然非常高，这时候只编写一套代码就能够适配到多端的能力就显得极为需要。 使用 Taro，我们可以只书写一套代码，再通过 Taro 的编译工具，将源代码分别编译出可以在不同端（微信/百度/支付宝/字节跳动/QQ小程序、快应用、H5、React-Native 等）运行的代码。
- Taro 简介，多端编译原理
- 使用 React 来进行 Taro 开发
- Taro 中如何使用 React Hooks
- 小程序路由的使用
- Taro UI 组件库的使用
- 多端登录，实现普通登录、支付宝登录、微信登录
- 使用 Hooks 版本的 Redux 进行小程序状态管理
- 学习和使用小程序云 Serverless 服务来加速开发
- 学习和使用 LeanCloud 来统一多端数据环境
- 部署上线
- ✅《Taro 小程序开发大型实战（一）：熟悉的 React，熟悉的 Hooks》 🗝知识点 1,2,3
- ✅《Taro 小程序开发大型实战（二）：多页面跳转和 Taro UI 组件库》 🗝知识点 4, 5
- ✅《Taro 小程序开发大型实战（三）：实现微信和支付宝多端登录》 🗝知识点 6
- ✅《Taro 小程序开发大型实战（四）：使用 Hooks 版的 Redux 实现应用状态管理》 🗝知识点 7
- ✅《Taro 小程序开发大型实战（五）：尝鲜微信小程序云》 🗝知识点 8
- ✅《Taro 小程序开发大型实战（七）：使用 LeanCloud 实现多端数据共享及小程序上线发布》 🗝知识点 9,10
移动应用程序开发是为移动设备开发移动应用程序的行为或过程，例如个人数字助理，企业数字助理或移动电话。这些应用程序可以在制造平台期间预先安装在手机上，或者使用服务器端或客户端处理作为Web应用程序提供，以在Web浏览器中提供“类似应用程序”的体验。
Electron是GitHub开发的一个开源框架。它允许使用Node.js和Chromium完成桌面GUI应用程序的开发。Electron现已被多个开源Web应用程序用于前端与后端的开发，著名项目包括GitHub的Atom和微软的Visual Studio Code。
虚拟现实（英语：virtual reality，缩写VR），简称虚拟技术，也称虚拟环境，是利用电脑模拟产生一个三维空间的虚拟世界，提供用户关于视觉等感官的模拟，让用户感觉仿佛身历其境，可以即时、没有限制地观察三维空间内的事物。用户进行位置移动时，电脑可以立即进行复杂的运算，将精确的三维世界影像传回产生临场感。该技术集成了电脑图形、电脑仿真、人工智能、感应、显示及网络并行处理等技术的最新发展成果，是一种由电脑技术辅助生成的高技术模拟系统。
ESLint（有时发音为Easy Lint）是一种静态代码分析工具，用于识别JavaScript代码中发现的有问题的模式。 它由Nicholas C. Zakas在2013年创建。ESLint中的规则是可配置的，并且可以定义和加载自定义规则。 ESLint涵盖了代码质量和编码样式问题。 ESLint支持ECMAScript的当前标准，以及草案中用于将来标准的实验语法。 使用插件或编译器时，也可以使用JSX或TypeScript进行代码处理。
- ESLint 的来源、应用、如何运作、寻找合适的规则
- ESLint 高级配置
- 命令行选项
- 将 ESLint 集成到其它工具中，比如编辑器，构建工具等。
- 创建自定义规则
什么是 Prettier：漂亮的代码格式化器；支持很多语言；被整合进绝大多数编辑器；极少的配置。 为什么要使用 Prettier：一保存代码就会自动格式化；使得整个团队的代码风格统一，减少不必要的代码 Review，节省时间和能量。
- 基本原理
- 与编辑器整合
- 与 Git Hooks 整合
- 命令行使用
- 与持续集成（CI）整合
Babel ，又名 Babel.js。 是一个用于 web 开发，且自由开源的 JavaScript 编译器、转译器。 Babel 使软件开发者能够以偏好的编程语言或风格来写作源代码，并将其利用 Babel 翻译成 JavaScript（现今在浏览器最常用的编程语言）。 Babel 是一个常用来使用最新的 JavaScript 语言特性的工具。身为一个转译器、或编译器，开发者可以使用 ECMAScript 6 以上的功能，并将其转换成旧版本等效的 JavaScript 让浏览器能够去解读。
- 基本原理
- 与编辑器整合
- 命令行使用
- 与 Webpack 整合
Webpack 是一个开源的前端打包工具。Webpack 提供了前端开发缺乏的模块化开发方式，将各种静态资源视为模块，并从它生成优化过的代码。
强大的现代化检查器，可帮助您避免错误并在样式中强制执行约定。
流行的React UI组件库/框架的集合，可帮助您为任何Web项目或应用程序构建出色的界面。
TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个严格超集，并添加了可选的静态类型和使用看起来像基于类的面向对象编程语法操作 Prototype。C#的首席架构师以及Delphi和Turbo Pascal的创始人安德斯·海尔斯伯格参与了TypeScript的开发。
SSR服务端渲染（英语：server side render）通常来说web页面的数据渲染都是由客户端或者浏览器端来完成的，先从服务器请求，然后到页面，再通过ajax请求到页面数据，之后把相应的数据填充到template模板形成完整的页面来呈现给用户。服务端渲染把数据的ajax请求放在了服务端，然后服务端把数据填充到template模板形成完整的页面，由服务端把渲染的完整的页面吐给客户端。这样减少了一次客户端到服务端的http请求，加快了相应速度，一般用于首屏的性能优化。
与多个团队一起使用不同的JavaScript框架构建现代Web应用程序的技术，策略和方法。
在软件测试中，自动化测试指的是使用独立于待测软件的其他软件来自动执行测试、比较实际结果与预期并生成测试报告这一过程。在测试流程已经确定后，测试自动化可以自动执行的一些重复但必要测试工作。也可以完成手动测试几乎不可能完成的测试。对于持续交付和持续集成的开发方式而言，测试自动化是至关重要的。
将网站部署到云端，可以供互联网上的其他用户访问。