React 知识学习图谱

2016-12-14

react

Getty, we're not programmed. We're people, understand?

#React 知识学习图谱

背景

由于目前的项目还是使用传统的架构和前端技术。在从特点，应用场景和实战应用几个方面考虑，决定采用React技术栈

：前端技术选型。

React 知识图谱

从项目的实际角度出发，列出了如下React的知识学习图谱：

根据以上图谱顺序，列出React项目学习路线如下:

01 React 基础知识
02 Babel 转码: 项目必须。可以直接在js代码中引入，也可以通过命令行将代码转码。
03 路由：非项目必须。主要应用于单页面程序中，管理地址栏。实现页面的路由的映射，参数的解析和传递。
04 React 工程化
- 03-1 ES6新特性：非项目必需。作为Javascript的最新发布的标准，ES6的新特性和新接口可以让代码更加简洁和优美。ES6新增模块部分跟React的设计能更好的契合。
- 03-2 服务端
  - Node：非项目必须。但是如果要用JS来写服务端程序，则需要Node。
  - NPM：非项目必须。NPM是包管理工具，可以通过NPM来安装项目的一些依赖和管理依赖的版本。
- 03-3 打包编译：非项目必须。webpack是模块打包和编译工具，主要功能是产品化和模块打包以及将代码编译成浏览器或者Node可识别的代码。
Flux 架构:非项目必须。React只是DOM的抽象层，所以它只能作为应用架构的视图层。而Flux是一种项目应用架构，最大的特点是数据单向流动，如下图：

架构的主要作用是管理 Store 和 View 之间的关系。
06 React组件库的使用方法：React 有很多第三方插件库，如：Bootstrap，D3。第三方插件库的引入和使用，使项目必须。
07 React测试和性能工具:非项目必需。当项目运行到慢慢变得比较大的时候，对于前端性能的分析和代码的测试就变得有必要了

背景

React 知识图谱

参考