React与Redux 学习步骤

熟悉Javascript的ES6语法

• 暂时先只需要熟悉一下这些内容: 箭头函数， 类， 模板字符串， let， 和 const 声明

ES6语法翻译文档可以参考这里

根据React文档快速了解React

主要是以下几个知识点:

• JSX 简介
• 元素渲染
• 组件 & Props
• State & 生命周期
• 事件处理
• 条件渲染
• 列表 & Keys
• 表单
• 状态提升
• 组合 vs 继承
• React 理念

完整文档可以参考这里

当你感觉自己掌握了以上知识点并觉得书写业务逻辑基本没问题的时候, 可以开始尝试深入研究一下React高级特性https://doc.react-china.org/docs/jsx-in-depth.html

学习Redux

• 可以从Redux中文参考文档开始
  浏览完基础部分, 参考这个官方Demo可以做一个 TodoList的小demo

• 之后可以了解一下React-redux库, 知道怎样使用connect, mapStateToProps和mapDispatchToProps方法

学习React-Router

关于React单页面应用,不同视图间的跳转
可以参考React-Router v4.0的中文文档

用到的一些库

• antd - 阿里的组件库
• Moment.js - 与时间日期处理相关的库
• axios.js - AJAX访问库
• draft.js - 富文本编辑器组件
• lodash-es - lodash工具库, 使用lodash-es可以减小引入的体积. 像这样使用: import remove from 'lodash-es/remove'
• rc-trigger - react弹出框组件
• react-router-redux - 把Router信息交给Redux来管理的库
• react-sortable-pane - 拖拽排序组件(这个组件不好用, 可以换用react-sortable-hoc)
• react-sortable-hoc - 更好的拖拽排序组件
• redux-form - 把表单交给redux处理的库
• redux-actions - 一个帮助 redux 应用快速创建 actions 、reducers 的辅助类函数库
• redux-thunk - 可以用dispatch分发函数, 让action做异步操作的中间件
• rodal - 一个弹窗Modal组件
• velocity - febric出品的强大动画库
• react-color - 颜色选择器
• react-cropper - 图片裁剪
• classnames - 可以通过布尔值控制类名有无