![](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAaCAYAAAD1wA/qAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAMqADAAQAAAABAAAAGgAAAACEestuAAAFL0lEQVRYCdVYa2xUVRD+5pzbJ5aGYtVaKFKEFoNgQcBYtEWFRigqUZHYHwat0ajRxAe+QjUmmrQaHyD4CGpETYGaWDX4lhC0USGACBpaaoJQKkhbW+hj2+69xzl3u/futvu4xD/bScqdM2fmMN+eeeUQmNTa3AmDPlVDCqUKKkfLEp0I9Lci7EhKpdX04PEW0iD8PrVfKZWV6M5H8o+IOoxUmmXom8AoBaGB6QsY9KFG6HCKhHQ0yTQGcdY5YaRB3rwJouiO/41VFD8CUfK0c45YXA1x+d3O2iujMdBAdY7yagAQ5E0bQVPLYH71KHDmxAhTdbQBsAZHyLVALnsDNGmBu5d8ToAf6A58U8ayrR8Y7HV0rN1vw/plnbOOxhjRNiLJxTXPgC5eDPScgrzq8XCV1EzGKeB/fSbQHxmI+e1TgJHi2MnSNUBSGmw5S2X5eqj2Jlg/vWbryKVrgeR0Rz8W4w0I/1Jy0Qug/Gth1lVA/bUz7EyathSyrAbm5/cziNNhe6ELyi6AWLDaEdG4fEBIvqkNtoyyC0HjJoHOLQis+ata9zj6sZi4QCivGHLJqwCDMb9+DKq3Dci+xDlT5C+E4Nuxtj8L1fOPu9d5JCxEtAFdVAKYA/Y5ei3LXgK6T8JseFEv+f/hm2hvhhkaSr7oP4xtNPRP3ByRFZ8CnUdBE68Ajc0NtY3J+7es4Jv7MUxHrtgMyrkM6OsMyDMuYLB9gK8rsB6THciv4P6Qtbm9Cqr5m7Czhi/i3oi5ZSXg74NR+QPM76tg7f/IOUMuf4cTvhXmdxzrIWQ8dChk5bJ2LsgkkEyBWFgFUhb89ZXcDExbSYcnOv6Eufstx8i4vT5QABxJZCYuEA3CIbPfBhVc6xuyjv0cJgvuRfxy6Ok8k8UPc24YnFP3Aqf+cFW5eqnedqCt0Q5XOv9SW0+17nV1onDxgUQxtMVjJ0DxjXghyp0LubKOHUuC+v1j/tXftPMFWVMcc6vxCy4WHGZa5uuEatnF+cTFgfl4FDdHggfo0LKd0AmtiauNyCnicnkYKhjjgR3QhXNgbr1tRI5Q7jw71+TVTwxpxv6ovg74182IrTS06/lGrH3vA2lZzqE0ucQOA4sTWs5eBXPfJk7iDntfJ7niAjGc1PFdDHI2VFsT/B+Wu9uZeZw3yVAdzY6MCm+ALOG+45G8A9mz0T0yOQPGjFth/foBrAObbSCW3g9xxFWOwOnkDnZz3pZz7+HyngHzkztdZb/P5T1wwoNOuAp3b7nkFZap2KPDmPNAMyu4echw+wgrXZK9JHQEU0d0dkB0h+eBkfKuhFnPw53uAVGIMidyw6u2x5ZwFR7tlDve0ZRFoPFTA/nENg5pnRA9Rx6F8RZaPNyJOZUQOgR0Atbe4pZNPeQxEYN03WMBO4duLgzDBkiLe4T+A/cSKiznPFgD6+BWbiX9MO7aCXQdg9W0DVbjNp7buPx6pLhAxLz7IObzDGWkQueB1fAyl03uJ0Hi8qu6WiCXv+smK4cf6Yp26LOgFo8u0yEmlwJcsnX/0eVYD4zWwTpYO57jnOmBf/0snqyvh5h+I4z5DwCnW2xA1oFau1G6h43k4pZfUbQKSM+Ctfc9pyqNOIadE4XLeFLNcLZ0BVKHv3TDj4HI657nWzoB9e8RqJO/cTg1MIAzjk0Ykz4eoqAcNK2cp+Mn4xaSuEDCDk/ghdCvEQnsnyfXNAahn1Q8aSewksYg7HchflJJYD9juqafgzQGoR+39LsQiGpHU5jZvrLP2neN4T9MzuBY76nSWQAAAABJRU5ErkJggg==)
01 | 课程介绍
![](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAaCAYAAAD1wA/qAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAMqADAAQAAAABAAAAGgAAAACEestuAAAFL0lEQVRYCdVYa2xUVRD+5pzbJ5aGYtVaKFKEFoNgQcBYtEWFRigqUZHYHwat0ajRxAe+QjUmmrQaHyD4CGpETYGaWDX4lhC0USGACBpaaoJQKkhbW+hj2+69xzl3u/futvu4xD/bScqdM2fmMN+eeeUQmNTa3AmDPlVDCqUKKkfLEp0I9Lci7EhKpdX04PEW0iD8PrVfKZWV6M5H8o+IOoxUmmXom8AoBaGB6QsY9KFG6HCKhHQ0yTQGcdY5YaRB3rwJouiO/41VFD8CUfK0c45YXA1x+d3O2iujMdBAdY7yagAQ5E0bQVPLYH71KHDmxAhTdbQBsAZHyLVALnsDNGmBu5d8ToAf6A58U8ayrR8Y7HV0rN1vw/plnbOOxhjRNiLJxTXPgC5eDPScgrzq8XCV1EzGKeB/fSbQHxmI+e1TgJHi2MnSNUBSGmw5S2X5eqj2Jlg/vWbryKVrgeR0Rz8W4w0I/1Jy0Qug/Gth1lVA/bUz7EyathSyrAbm5/cziNNhe6ELyi6AWLDaEdG4fEBIvqkNtoyyC0HjJoHOLQis+ata9zj6sZi4QCivGHLJqwCDMb9+DKq3Dci+xDlT5C+E4Nuxtj8L1fOPu9d5JCxEtAFdVAKYA/Y5ei3LXgK6T8JseFEv+f/hm2hvhhkaSr7oP4xtNPRP3ByRFZ8CnUdBE68Ajc0NtY3J+7es4Jv7MUxHrtgMyrkM6OsMyDMuYLB9gK8rsB6THciv4P6Qtbm9Cqr5m7Czhi/i3oi5ZSXg74NR+QPM76tg7f/IOUMuf4cTvhXmdxzrIWQ8dChk5bJ2LsgkkEyBWFgFUhb89ZXcDExbSYcnOv6Eufstx8i4vT5QABxJZCYuEA3CIbPfBhVc6xuyjv0cJgvuRfxy6Ok8k8UPc24YnFP3Aqf+cFW5eqnedqCt0Q5XOv9SW0+17nV1onDxgUQxtMVjJ0DxjXghyp0LubKOHUuC+v1j/tXftPMFWVMcc6vxCy4WHGZa5uuEatnF+cTFgfl4FDdHggfo0LKd0AmtiauNyCnicnkYKhjjgR3QhXNgbr1tRI5Q7jw71+TVTwxpxv6ovg74182IrTS06/lGrH3vA2lZzqE0ucQOA4sTWs5eBXPfJk7iDntfJ7niAjGc1PFdDHI2VFsT/B+Wu9uZeZw3yVAdzY6MCm+ALOG+45G8A9mz0T0yOQPGjFth/foBrAObbSCW3g9xxFWOwOnkDnZz3pZz7+HyngHzkztdZb/P5T1wwoNOuAp3b7nkFZap2KPDmPNAMyu4echw+wgrXZK9JHQEU0d0dkB0h+eBkfKuhFnPw53uAVGIMidyw6u2x5ZwFR7tlDve0ZRFoPFTA/nENg5pnRA9Rx6F8RZaPNyJOZUQOgR0Atbe4pZNPeQxEYN03WMBO4duLgzDBkiLe4T+A/cSKiznPFgD6+BWbiX9MO7aCXQdg9W0DVbjNp7buPx6pLhAxLz7IObzDGWkQueB1fAyl03uJ0Hi8qu6WiCXv+smK4cf6Yp26LOgFo8u0yEmlwJcsnX/0eVYD4zWwTpYO57jnOmBf/0snqyvh5h+I4z5DwCnW2xA1oFau1G6h43k4pZfUbQKSM+Ctfc9pyqNOIadE4XLeFLNcLZ0BVKHv3TDj4HI657nWzoB9e8RqJO/cTg1MIAzjk0Ykz4eoqAcNK2cp+Mn4xaSuEDCDk/ghdCvEQnsnyfXNAahn1Q8aSewksYg7HchflJJYD9juqafgzQGoR+39LsQiGpHU5jZvrLP2neN4T9MzuBY76nSWQAAAABJRU5ErkJggg==)
02 | React出现的历史背景及特性介绍
![](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAaCAYAAAD1wA/qAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAMqADAAQAAAABAAAAGgAAAACEestuAAAFL0lEQVRYCdVYa2xUVRD+5pzbJ5aGYtVaKFKEFoNgQcBYtEWFRigqUZHYHwat0ajRxAe+QjUmmrQaHyD4CGpETYGaWDX4lhC0USGACBpaaoJQKkhbW+hj2+69xzl3u/futvu4xD/bScqdM2fmMN+eeeUQmNTa3AmDPlVDCqUKKkfLEp0I9Lci7EhKpdX04PEW0iD8PrVfKZWV6M5H8o+IOoxUmmXom8AoBaGB6QsY9KFG6HCKhHQ0yTQGcdY5YaRB3rwJouiO/41VFD8CUfK0c45YXA1x+d3O2iujMdBAdY7yagAQ5E0bQVPLYH71KHDmxAhTdbQBsAZHyLVALnsDNGmBu5d8ToAf6A58U8ayrR8Y7HV0rN1vw/plnbOOxhjRNiLJxTXPgC5eDPScgrzq8XCV1EzGKeB/fSbQHxmI+e1TgJHi2MnSNUBSGmw5S2X5eqj2Jlg/vWbryKVrgeR0Rz8W4w0I/1Jy0Qug/Gth1lVA/bUz7EyathSyrAbm5/cziNNhe6ELyi6AWLDaEdG4fEBIvqkNtoyyC0HjJoHOLQis+ata9zj6sZi4QCivGHLJqwCDMb9+DKq3Dci+xDlT5C+E4Nuxtj8L1fOPu9d5JCxEtAFdVAKYA/Y5ei3LXgK6T8JseFEv+f/hm2hvhhkaSr7oP4xtNPRP3ByRFZ8CnUdBE68Ajc0NtY3J+7es4Jv7MUxHrtgMyrkM6OsMyDMuYLB9gK8rsB6THciv4P6Qtbm9Cqr5m7Czhi/i3oi5ZSXg74NR+QPM76tg7f/IOUMuf4cTvhXmdxzrIWQ8dChk5bJ2LsgkkEyBWFgFUhb89ZXcDExbSYcnOv6Eufstx8i4vT5QABxJZCYuEA3CIbPfBhVc6xuyjv0cJgvuRfxy6Ok8k8UPc24YnFP3Aqf+cFW5eqnedqCt0Q5XOv9SW0+17nV1onDxgUQxtMVjJ0DxjXghyp0LubKOHUuC+v1j/tXftPMFWVMcc6vxCy4WHGZa5uuEatnF+cTFgfl4FDdHggfo0LKd0AmtiauNyCnicnkYKhjjgR3QhXNgbr1tRI5Q7jw71+TVTwxpxv6ovg74182IrTS06/lGrH3vA2lZzqE0ucQOA4sTWs5eBXPfJk7iDntfJ7niAjGc1PFdDHI2VFsT/B+Wu9uZeZw3yVAdzY6MCm+ALOG+45G8A9mz0T0yOQPGjFth/foBrAObbSCW3g9xxFWOwOnkDnZz3pZz7+HyngHzkztdZb/P5T1wwoNOuAp3b7nkFZap2KPDmPNAMyu4echw+wgrXZK9JHQEU0d0dkB0h+eBkfKuhFnPw53uAVGIMidyw6u2x5ZwFR7tlDve0ZRFoPFTA/nENg5pnRA9Rx6F8RZaPNyJOZUQOgR0Atbe4pZNPeQxEYN03WMBO4duLgzDBkiLe4T+A/cSKiznPFgD6+BWbiX9MO7aCXQdg9W0DVbjNp7buPx6pLhAxLz7IObzDGWkQueB1fAyl03uJ0Hi8qu6WiCXv+smK4cf6Yp26LOgFo8u0yEmlwJcsnX/0eVYD4zWwTpYO57jnOmBf/0snqyvh5h+I4z5DwCnW2xA1oFau1G6h43k4pZfUbQKSM+Ctfc9pyqNOIadE4XLeFLNcLZ0BVKHv3TDj4HI657nWzoB9e8RqJO/cTg1MIAzjk0Ykz4eoqAcNK2cp+Mn4xaSuEDCDk/ghdCvEQnsnyfXNAahn1Q8aSewksYg7HchflJJYD9juqafgzQGoR+39LsQiGpHU5jZvrLP2neN4T9MzuBY76nSWQAAAABJRU5ErkJggg==)
03 | 以组件方式考虑UI的构建
![](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAaCAYAAAD1wA/qAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAMqADAAQAAAABAAAAGgAAAACEestuAAAFL0lEQVRYCdVYa2xUVRD+5pzbJ5aGYtVaKFKEFoNgQcBYtEWFRigqUZHYHwat0ajRxAe+QjUmmrQaHyD4CGpETYGaWDX4lhC0USGACBpaaoJQKkhbW+hj2+69xzl3u/futvu4xD/bScqdM2fmMN+eeeUQmNTa3AmDPlVDCqUKKkfLEp0I9Lci7EhKpdX04PEW0iD8PrVfKZWV6M5H8o+IOoxUmmXom8AoBaGB6QsY9KFG6HCKhHQ0yTQGcdY5YaRB3rwJouiO/41VFD8CUfK0c45YXA1x+d3O2iujMdBAdY7yagAQ5E0bQVPLYH71KHDmxAhTdbQBsAZHyLVALnsDNGmBu5d8ToAf6A58U8ayrR8Y7HV0rN1vw/plnbOOxhjRNiLJxTXPgC5eDPScgrzq8XCV1EzGKeB/fSbQHxmI+e1TgJHi2MnSNUBSGmw5S2X5eqj2Jlg/vWbryKVrgeR0Rz8W4w0I/1Jy0Qug/Gth1lVA/bUz7EyathSyrAbm5/cziNNhe6ELyi6AWLDaEdG4fEBIvqkNtoyyC0HjJoHOLQis+ata9zj6sZi4QCivGHLJqwCDMb9+DKq3Dci+xDlT5C+E4Nuxtj8L1fOPu9d5JCxEtAFdVAKYA/Y5ei3LXgK6T8JseFEv+f/hm2hvhhkaSr7oP4xtNPRP3ByRFZ8CnUdBE68Ajc0NtY3J+7es4Jv7MUxHrtgMyrkM6OsMyDMuYLB9gK8rsB6THciv4P6Qtbm9Cqr5m7Czhi/i3oi5ZSXg74NR+QPM76tg7f/IOUMuf4cTvhXmdxzrIWQ8dChk5bJ2LsgkkEyBWFgFUhb89ZXcDExbSYcnOv6Eufstx8i4vT5QABxJZCYuEA3CIbPfBhVc6xuyjv0cJgvuRfxy6Ok8k8UPc24YnFP3Aqf+cFW5eqnedqCt0Q5XOv9SW0+17nV1onDxgUQxtMVjJ0DxjXghyp0LubKOHUuC+v1j/tXftPMFWVMcc6vxCy4WHGZa5uuEatnF+cTFgfl4FDdHggfo0LKd0AmtiauNyCnicnkYKhjjgR3QhXNgbr1tRI5Q7jw71+TVTwxpxv6ovg74182IrTS06/lGrH3vA2lZzqE0ucQOA4sTWs5eBXPfJk7iDntfJ7niAjGc1PFdDHI2VFsT/B+Wu9uZeZw3yVAdzY6MCm+ALOG+45G8A9mz0T0yOQPGjFth/foBrAObbSCW3g9xxFWOwOnkDnZz3pZz7+HyngHzkztdZb/P5T1wwoNOuAp3b7nkFZap2KPDmPNAMyu4echw+wgrXZK9JHQEU0d0dkB0h+eBkfKuhFnPw53uAVGIMidyw6u2x5ZwFR7tlDve0ZRFoPFTA/nENg5pnRA9Rx6F8RZaPNyJOZUQOgR0Atbe4pZNPeQxEYN03WMBO4duLgzDBkiLe4T+A/cSKiznPFgD6+BWbiX9MO7aCXQdg9W0DVbjNp7buPx6pLhAxLz7IObzDGWkQueB1fAyl03uJ0Hi8qu6WiCXv+smK4cf6Yp26LOgFo8u0yEmlwJcsnX/0eVYD4zWwTpYO57jnOmBf/0snqyvh5h+I4z5DwCnW2xA1oFau1G6h43k4pZfUbQKSM+Ctfc9pyqNOIadE4XLeFLNcLZ0BVKHv3TDj4HI657nWzoB9e8RqJO/cTg1MIAzjk0Ykz4eoqAcNK2cp+Mn4xaSuEDCDk/ghdCvEQnsnyfXNAahn1Q8aSewksYg7HchflJJYD9juqafgzQGoR+39LsQiGpHU5jZvrLP2neN4T9MzuBY76nSWQAAAABJRU5ErkJggg==)
04 | JSX的本质 : 不是模板引擎,而是语法糖
06 | 理解Virtual DOM及key属性的作用
07 | 组件设计模式 : 高阶组件和函数作为子组件
08 | 理解新的Context API及其使用场景
11 | Redux(1) : 前端为何需要状态管理库
12 | Redux(2) : 深入理解Store、Action、Reducer
13 | Redux(3) : 在React中使用Redux
14 | Redux(4) : 理解异步Action、Redux中间件
15 | Redux(5) : 如何组织Action和Reducer
16 | Redux(6) : 理解不可变数据(Immutability)
17 | React Router(1):路由不只是页面切换,更是代码组织方式
18 | React Router(2):参数定义,嵌套路由的使用场景
19 | UI组件库对比和介绍:Ant.Design、Material UI、Semantic UI
20 | 使用Next.js创建React同构应用
21 | 使用Jest、Enzyme等工具进行单元测试
22 | 常用开发调试工具:ESLint、Prettier、React DevTool、Redux DevTool
23 | 前端项目的理想架构:可维护、可扩展、可测试、易开发、易建构
24 | 拆分复杂度(1):按领域模型(feature)组织代码,降低耦合度
25 | 拆分复杂度(2):如何组织component、action和reducer
26 | 拆分复杂度(3):如何组织React Router的路由配置
27 | 使用Rekit(1):创建项目,代码生成和重构
28 | 使用Rekit(2):遵循最佳实践,保持代码一致性
29 | 使用React Router管理登录和授权
31 | 实现表单(2):错误处理,动态表单元素,内容动态加载
33 | 列表页(2):缓存更新,加载状态,错误处理
36 | 基于React Router实现分步操作
38 | 使用React Portals实现对话框,使用antd对话框
46 | 使用Chrome DevTool进行性能调优&结课测试