1. 程式人生 > >Redux+React Router+Node.js全棧開發招聘app實戰

Redux+React Router+Node.js全棧開發招聘app實戰

https://pan.baidu.com/s/1p4cPuo_t70Eh0D_dzfJq2Q
Redux+React Router+Node.js全棧開發招聘app實戰
Redux+React Router+Node.js全棧開發
在別人剛理解React的時候,你已經找到Redux+React Router最佳實踐學習路線,學到了最新React 16+Redux+React Router 4技術開發複雜的單頁面應用,並使用node.js+express+socket.io管理實時應用的後端,註定你的實力非凡!

第1章 介紹課程目標和學習內容
包括課程概述、課程安排、學習前提、講授方式等方面的介紹,最後演示了整個招聘App的功能,讓同學們對課程專案有一個直觀的瞭解。

1-1 課程導學
第2章 知識儲備
為了學習好React,需要一系列的基礎知識作為後盾,React官方也推薦全部ES6的寫法,所以分別接受了Nodejs基礎,使用create-react-app搭建React開發環境,版本控制git的使用,ES6常用的語法以及express+mongodb的基礎,為後面的實戰打下基礎…

2-1 介紹React開發環境
2-2 ES6常用語法
2-3 express+mongodb基礎
2-4 express+mongodb基礎
第3章 React基礎知識回顧
這一章節對 React基礎知識進行了複習,為後面的專案實戰做準備。

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狀態管理與React-router
這一章節詳細的對 講解了 Redux、react-redux、react-rouer4 以及螞蟻金服antd-mobile元件庫的環境配置和使用。

4-1 Redux狀態管理1-結合小例子看 Redux 是什麼?
4-2 Redux狀態管理2-Redux 如何和 React 一起用
4-3 Redux狀態管理3-優化-元件解耦
4-4 Redux狀態管理4-更進一步,讓 Redux 可以處理非同步
4-5 Redux狀態管理5-Chrome 中 Redux 調式工具
4-6 Redux狀態管理6-使用 React-redux
4-7 Redux狀態管理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章 需求分析
在之前配置全家桶的基礎之上,配置前後端聯調的轉發以及axios攔截器

5-1 需求分析
5-2 前後端聯調1
5-3 前後端聯調2
第6章 登入註冊
這一章節包括登入註冊的頁面實現,express+mongodb後端實現,cookie使用者狀態儲存,完整的實現登入註冊的互動。

6-1 登入註冊-課程內容介紹
6-2 登入註冊-登入註冊頁面實現
6-3 登入註冊-判斷路由
6-4 登入註冊-使用者資訊校驗,跳轉登入
6-5 登入註冊-註冊互動實現
6-6 登入註冊-註冊請求傳送
6-7 登入註冊-資料庫模型建立
6-8 登入註冊-express註冊功能實現
6-9 登入註冊-註冊前後端聯調
6-10 登入註冊-註冊跳轉+密碼加密實現
6-11 登入註冊-登入註冊實現
6-12 登入註冊-cookie儲存登入狀態
第7章 完善資訊
包括兩種身份使用者註冊完成後的資訊完善,包括選擇頭像,輸入詳情,使用antd-mobile的NavBar和Grid元件實現。

7-1 完善資訊-boss資訊完善頁面
7-2 完善資訊-boss 資訊完善頁面後端
7-3 完善資訊-牛人資訊完善和元件屬性型別檢測
第8章 牛人列表和BOSS列表
資訊完善後,牛人進入系統,就會看到BOSS的列表,BOSS進入系統,看到找工作的牛人列表,使用antd-mobile的Card元件展示列表,並且點選列表,可以和對應的使用者發起聊天。

8-1 牛人列表-應用骨架
8-2 牛人列表-導航和跳轉
8-3 牛人列表-牛人列表
8-4 牛人列表-使用 redux 管理牛人列表
第9章 個人中心
登入完成後,導航欄的個人中心頁的實現,BOSS和牛人展示不同的資訊,並且有登出登入的功能。

9-1 boss列表和元件優化
9-2 個人中心資訊展示1
9-3 個人中心資訊展示2
9-4 清除cookie登入狀態
9-5 登出時清空redux資料
9-6 使用高階元件完善登入流程–概念理解-函數語言程式設計
9-7 簡單的高階元件demo
9-8 使用imoocFrom高階元件優化程式碼
第10章 聊天詳情
聊天詳情頁的功能開發,包括聊天資料結構在mongodb裡的儲存,使用者發起聊天,實時顯示聊天資料,並且支援使用者傳送emoji表情,使用sockit.io+express+mongodb實現聊天的後端,使用redux管理聊天資料。

10-1 socket.io簡介
10-2 socket.io前後端聯通
10-3 前後端實時顯示訊息
10-4 聊天頁面redux連結
10-5 聊天功能實現-上
10-6 聊天功能實現-下
10-7 聊天未讀訊息數實時展示
10-8 聊天頭像顯示
10-9 修正未讀訊息數量
10-10 傳送emoji表情
第11章 聊天列表
聊天列表頁的開發,包括聊天使用者的展示,每個使用者未讀訊息數量的實時顯示,導航欄未讀訊息數量總數實時展示,包括介紹redux中介軟體機制的介紹,自己實現socket.io+redux的中介軟體。

11-1 聊天資訊根據使用者分組
11-2 聊天列表展示
11-3 顯示未讀訊息數
11-4 最新訊息排序
第12章 構建自己的 redux
學習 React 和 Redux 常見優化手段,包括定製 shouldComponentUpdate,使用 PureComponent,immutablejs 介紹,reselect 和服務端渲染 SSR 介紹

12-1 訊息未讀數量更新1
12-2 訊息維度數量更新2
12-3 React進階
12-4 迷你redux實現
12-5 context簡介1
12-6 react-redux實現1
12-7 react-redux實現2
12-8 迷你react-redux實現
12-9 中介軟體機制的實現
12-10 多箇中間件合併
12-11 定製中介軟體arrThunk
12-12 總結redux+react-redux程式碼
第13章 程式碼優化和進階
react常見程式碼優化手段,包括pureComponent,自己定製元件渲染生命週期

13-1 單元件
13-2 定製shouldComponentUpdae
13-3 immutablejs存在的意義和使用
13-4 reselect優化redux選擇器
13-5 遍歷陣列的key
13-6 服務端渲染ssr介紹
第14章 專案總結,回顧和展望
回顧整個專案的流程,用到的技術以及專案的擴充套件點,包括 專案打包編譯,eslint 程式碼規範,async+awiat 優化非同步,ant motion 動畫,實現 React 服務端渲染 SSR,React16新版本特性

14-1 eslint程式碼規範
14-2 async+await優化非同步程式碼
14-3 使用Ant motion做React動畫解決方案
14-4 打包編譯
14-5 使用babel-node在後端支援jsx環境
14-6 服務端渲染renderToString用法
14-7 客戶端程式碼改造
14-8 服務端SSR程式碼改造
14-9 小問題修復
14-10 React16新特性及錯誤處理1
14-11 React16錯誤處理2
14-12 React16服務端渲染新Api
14-13 課程總結