EngsShi/ReactLearningPlan

初级内容

开发工具

css

多种居中方法 (注意兼容性问题)

flex布局 (注意：仅支持高级浏览器)

display (重点： block,inline-block)

js基本语法

this绑定的意义

import 和 require 的异同点

es5 es6

阮一峰的es6入门文章 (需要看的章节：2-9、11、14-20、24)

es5版本Array新增方法

重点： let const 解构 Promise await yield 处理异步方法使用co库

Node基础操作

命令行执行： node [js文件名]

package.json配置文件常用参数

安装依赖： npm init

添加依赖： npm install xxx

执行脚本： npm run xxx

安装依赖： yarn

添加依赖： yarn add xxx

执行脚本： yarn run xxx

React(界面层框架)

jsx语法

备注：

页面、组件在jsx中必须首字母大写。只有浏览器自带组件（如：div、a、img）才使用首字母小写。
xxx

Flux 设计**

Redux(Controller框架)

Redux是Flux设计**的具体实现，需要先了解Flux

Redux封装了Flux各个模块之间对接的方法，只需要分别编写相关模块并绑定Redux。

connect: 绑定Store和View，并且支持对View需要的数据进行筛选

dispatch: 提交Action给Dispatcher

注册reducer: 接收Action，并修改Store

配合 react-addons-update 插件更新数据，保证变更state时是创建而不是修改，并且优化创建效率

尝试跑通dva的example sorrycc/blog#18

ant.design

蚂蚁金服基于React的界面组件库

注意： 2.x版本仅支持IE10以上，1.x版本兼容IE8

react-router

第三方页面跳转类库，antd库已内置该类库2.x版本

根据 ant 的使用方法新建demo工程，需要完成以下功能：

参考上个example创建新工程

新建页面1，实现点击按钮计数器加1、减1、清空功能，需要使用redux实现

新建页面2，实现获取测试工程首页源码字符串，并在当前页面中显示源码

以上页面的点击按钮和相关界面，使用ant类库提供的样式

git基本操作

安装并会使用 GitHub Desktop

理解branch、remote、add、commit、push、pull、pull request(提交分支合并请求)

解决代码冲突问题

js代码调试方法

常用调试方法 (debugger、浏览器调试模式打断点等)

未被捕获的异常自动断点（高级用法：无论是否被捕获都自动断点调试）

TypeScript

jest

js单元测试工具

对之前创建的工程编写测试脚本，要求：

为redux方法编写测试用例，覆盖：加1、减1、清空、获取测试工程首页源码。(注：只需要对models中的相关方法进行测试，不需要执行dispatch)

用快照接口(toMatchSnapshot)，分别为增减界面和显示源码页面编写测试用例

注：让测试用例支持“imoprt”方法，需要将.babelrc下载到到项目根目录