在別人剛理解React的時候,你已經找到Redux+React Router最佳實踐學習路線,學到了最新React 16+Redux+React Router 4技術開發(fā)復雜的單頁面應用,并使用node.js+express+socket.io管理實時應用的后端,注定你的實力非凡!
包括課程概述、課程安排、學習前提、講授方式等方面的介紹,最后演示了整個招聘App的功能,讓同學們對課程項目有一個直觀的了解。
1-1 課程導學
第2章 知識儲備
為了學習好React,需要一系列的基礎知識作為后盾,React官方也推薦全部ES6的寫法,所以分別接受了Nodejs基礎,使用create-react-app搭建React開發(fā)環(huán)境,版本控制git的使用,ES6常用的語法以及express+mongodb的基礎,為后面的實戰(zhàn)打下基礎...
2-1 介紹React開發(fā)環(huán)境
2-2 ES6常用語法
2-3 express+mongodb基礎
2-4 express+mongodb基礎
第3章 React基礎知識回顧
這一章節(jié)對 React基礎知識進行了復習,為后面的項目實戰(zhàn)做準備。
3-1 React基礎知識回顧1-入門例子
3-2 React基礎知識回顧2-組件之間傳遞數據
3-3 React基礎知識回顧3-組件內部 state
3-4 React基礎知識回顧4-事件
3-5 React基礎知識回顧5-React生命周期
3-6 React基礎知識回顧6-安裝 CHROME 擴展
3-7 antd-mobile 組件使用
第4章 Redux狀態(tài)管理與React-router
這一章節(jié)詳細的對 講解了 Redux、react-redux、react-rouer4 以及螞蟻金服antd-mobile組件庫的環(huán)境配置和使用。
4-1 Redux狀態(tài)管理1-結合小例子看 Redux 是什么?
4-2 Redux狀態(tài)管理2-Redux 如何和 React 一起用
4-3 Redux狀態(tài)管理3-優(yōu)化-組件解耦
4-4 Redux狀態(tài)管理4-更進一步,讓 Redux 可以處理異步
4-5 Redux狀態(tài)管理5-Chrome 中 Redux 調式工具
4-6 Redux狀態(tài)管理6-使用 React-redux
4-7 Redux狀態(tài)管理7-使用 React-redux(Connect 可以用裝飾器的方法來書寫)
4-8 react-router4 路由 01-初識 React-router4
4-9 react-router4 路由 02-React-router4 其他組件
4-10 react-router4 路由 03-和 Redux 配合-復雜 Redux 應用1
4-11 react-router4 路由 04-和 Redux 配合-復雜 Redux 應用2
4-12 react-router4 路由 05-和 Redux 配合-補充
第5章 需求分析
在之前配置全家桶的基礎之上,配置前后端聯(lián)調的轉發(fā)以及axios攔截器
5-1 需求分析
5-2 前后端聯(lián)調1
5-3 前后端聯(lián)調2
第6章 登錄注冊
這一章節(jié)包括登錄注冊的頁面實現(xiàn),express+mongodb后端實現(xiàn),cookie用戶狀態(tài)保存,完整的實現(xiàn)登錄注冊的交互。
6-1 登錄注冊-課程內容介紹
6-2 登錄注冊-登錄注冊頁面實現(xiàn)
6-3 登錄注冊-判斷路由
6-4 登錄注冊-用戶信息校驗,跳轉登錄
6-5 登錄注冊-注冊交互實現(xiàn)
6-6 登錄注冊-注冊請求發(fā)送
6-7 登錄注冊-數據庫模型建立
6-8 登錄注冊-express注冊功能實現(xiàn)
6-9 登錄注冊-注冊前后端聯(lián)調
6-10 登錄注冊-注冊跳轉+密碼加密實現(xiàn)
6-11 登錄注冊-登錄注冊實現(xiàn)
6-12 登錄注冊-cookie保存登錄狀態(tài)
第7章 完善信息
包括兩種身份用戶注冊完成后的信息完善,包括選擇頭像,輸入詳情,使用antd-mobile的NavBar和Grid組件實現(xiàn)。
7-1 完善信息-boss信息完善頁面
7-2 完善信息-boss 信息完善頁面后端
7-3 完善信息-牛人信息完善和組件屬性類型檢測
第8章 牛人列表和BOSS列表
信息完善后,牛人進入系統(tǒng),就會看到BOSS的列表,BOSS進入系統(tǒng),看到找工作的牛人列表,使用antd-mobile的Card組件展示列表,并且點擊列表,可以和對應的用戶發(fā)起聊天。
8-1 牛人列表-應用骨架
8-2 牛人列表-導航和跳轉
8-3 牛人列表-牛人列表
8-4 牛人列表-使用 redux 管理牛人列表
第9章 個人中心
登錄完成后,導航欄的個人中心頁的實現(xiàn),BOSS和牛人展示不同的信息,并且有注銷登錄的功能。
9-1 boss列表和組件優(yōu)化
9-2 個人中心信息展示1
9-3 個人中心信息展示2
9-4 清除cookie登錄狀態(tài)
9-5 注銷時清空redux數據
9-6 使用高級組件完善登錄流程--概念理解-函數式編程
9-7 簡單的高階組件demo
9-8 使用imoocFrom高階組件優(yōu)化代碼
第10章 聊天詳情
聊天詳情頁的功能開發(fā),包括聊天數據結構在mongodb里的存儲,用戶發(fā)起聊天,實時顯示聊天數據,并且支持用戶發(fā)送emoji表情,使用sockit.io+express+mongodb實現(xiàn)聊天的后端,使用redux管理聊天數據。
10-1 socket.io簡介
10-2 socket.io前后端聯(lián)通
10-3 前后端實時顯示消息
10-4 聊天頁面redux鏈接
10-5 聊天功能實現(xiàn)-上
10-6 聊天功能實現(xiàn)-下
10-7 聊天未讀消息數實時展示
10-8 聊天頭像顯示
10-9 修正未讀消息數量
10-10 發(fā)送emoji表情
第11章 聊天列表
聊天列表頁的開發(fā),包括聊天用戶的展示,每個用戶未讀消息數量的實時顯示,導航欄未讀消息數量總數實時展示,包括介紹redux中間件機制的介紹,自己實現(xiàn)socket.io+redux的中間件。
11-1 聊天信息根據用戶分組
11-2 聊天列表展示
11-3 顯示未讀消息數
11-4 最新消息排序
第12章 構建自己的 redux
學習 React 和 Redux 常見優(yōu)化手段,包括定制 shouldComponentUpdate,使用 PureComponent,immutablejs 介紹,reselect 和服務端渲染 SSR 介紹
12-1 消息未讀數量更新1
12-2 消息維度數量更新2
12-3 React進階
12-4 迷你redux實現(xiàn)
12-5 context簡介1
12-6 react-redux實現(xiàn)1
12-7 react-redux實現(xiàn)2
12-8 迷你react-redux實現(xiàn)
12-9 中間件機制的實現(xiàn)
12-10 多個中間件合并
12-11 定制中間件arrThunk
12-12 總結redux+react-redux代碼
第13章 代碼優(yōu)化和進階
react常見代碼優(yōu)化手段,包括pureComponent,自己定制組件渲染生命周期
13-1 單組件
13-2 定制shouldComponentUpdae
13-3 immutablejs存在的意義和使用
13-4 reselect優(yōu)化redux選擇器
13-5 遍歷數組的key
13-6 服務端渲染ssr介紹
第14章 項目總結,回顧和展望
回顧整個項目的流程,用到的技術以及項目的擴展點,包括 項目打包編譯,eslint 代碼規(guī)范,async+awiat 優(yōu)化異步,ant motion 動畫,實現(xiàn) React 服務端渲染 SSR,React16新版本特性
14-1 eslint代碼規(guī)范
14-2 async+await優(yōu)化異步代碼
14-3 使用Ant motion做React動畫解決方案
14-4 打包編譯
14-5 使用babel-node在后端支持jsx環(huán)境
14-6 服務端渲染renderToString用法
14-7 客戶端代碼改造
14-8 服務端SSR代碼改造
14-9 小問題修復
14-10 React16新特性及錯誤處理1
14-11 React16錯誤處理2
14-12 React16服務端渲染新Api
14-13 課程總結