第1章 課程導學
對課程整體進行介紹,讓您切實感受到前端工程師學習的必要性。
第2章 項目搭建
講解 Nextjs 項目的搭建,其中會搭建自己的服務集成 Koa,集成 Antd 作為組件庫。本章中還講解了 Redis 在 Windows 和 Mac 系統上的安裝和啟動,講解了 Redis 的基礎使用,以及如何在 Nodejs 中連接 Redis 數據庫。
第3章 Next.js基礎
從目錄結構開始逐步解析 Nextjs 的使用方法,在這章里,你能學到 Nextjs 的路由技巧,服務端渲染數據獲取的方式,以及如何同步客戶端渲染和服務端渲染的方式。同時我們還會深入 Nextjs 講解如何自定義 App 和 Document 組件,以及集成第三方 css-in-js 的方法。...
第4章 React新特性Hooks講解
本章講解 React 的最新爆點功能:Hooks。我們會介紹什么是 Hooks,基礎 Hooks 的使用,包括 State Hooks,Effect Hooks、Context Hooks 和優化相關的 Hooks。然后我們會結合經典實例講解在 Hooks 的使用中會遇到的問題,以及我們如何解決他。
第5章 引入Redux
我們會介紹 Redux 的使用。Redux 是現在非常火熱的數據狀態管理工具,也是 Flux 數據流最好的實現,現在的 React 開發中非常常用。同時我們會着重介紹 Redux 如何集成到 Nextjs 當中,這其中需要考慮服務端渲染數據同步的問題,我們會在課程中深度介紹。...
第6章 OAuth 介紹和接入
我們圍繞着 OAuth 第三方授權協議進行講解。我們會介紹什么是 OAuth、他存在的意義、他的安全性、以及接入 OAuth 的流程。然后配合 Github OAuth 進行實戰演練,在這個過程中我們還會實現 session 功能,並將 session 數據存入 Redis。
第7章 項目整體設計
講解項目內容整體的設計,包括頁面整體布局,項目數據 API 代理,功能性組件的開發等。在項目正式開始頁面開發之前,做好基礎設施是提高開發效率的最好方法。
第8章 首頁開發
本章我們進行首頁開發,主要包括獲取用戶自己創建的倉庫,star 的倉庫列表,並進行 Tab 切換展示。在這個過程中我們會開發一個通用的倉庫展示組件,還會設計一個數據緩存方案,使用 LRU 方案進行 cache。
第9章 搜索頁面開發
本章我們進行搜索頁面的開發,搜索頁面會擁有很多的刪選條件,我們要把這些條件反應到 URL 上,並且保存搜索記錄,以帶來更好的用戶體驗。同時我們會對搜索進行分頁展示。
第10章 倉庫詳情頁開發
本章我們進行倉庫詳情頁的開發。不管是在個人頁面還是搜索頁面,點擊倉庫都可以進入倉庫詳情頁面,在這里我們可以查看倉庫的介紹信息,以及倉庫現存的 Issue 列表,我們還以點擊查看 Issue 詳情。
第11章 項目優化
最后一章我們講解 Nextjs 項目的一些優化方式。包括如何將項目靜態化,如何在編譯的過程中優化配置,讓編譯之后的文件更符合上線要求等。