黑馬程序員——2023新版React從核心基礎(chǔ)到項(xiàng)目實(shí)戰(zhàn)教程

課程目錄

Day1

01.React簡單介紹

02.React開發(fā)環(huán)境創(chuàng)建

03.JSX基礎(chǔ)-概念和本質(zhì)

04.JSX基礎(chǔ)-識(shí)別js表達(dá)式

05.JSX基礎(chǔ)-實(shí)現(xiàn)列表渲染

06.JSX基礎(chǔ)-實(shí)現(xiàn)基礎(chǔ)條件渲染

07.JSX基礎(chǔ)-實(shí)現(xiàn)復(fù)雜條件渲染

08.React中的事件綁定

09.React組件基礎(chǔ)使用

10.useState基礎(chǔ)使用

11.useState修改狀態(tài)的規(guī)則

12.基礎(chǔ)樣式控制

13.評(píng)論案例-列表渲染

14.評(píng)論案例-刪除功能實(shí)現(xiàn)

15.評(píng)論案例-tab切換功能實(shí)現(xiàn)

16.評(píng)論案例-排序?qū)崿F(xiàn)

17.classnames工具優(yōu)化類名控制

Day2

01.表單受控綁定

02.React中獲取DOM

03.發(fā)表評(píng)論-核心功能實(shí)現(xiàn)

04.發(fā)表評(píng)論-id和時(shí)間處理

05.發(fā)表評(píng)論-清空內(nèi)容和聚焦實(shí)現(xiàn)

06.組件通信-父傳子-基礎(chǔ)實(shí)現(xiàn)

07.組件通信-父傳子-props說明

08.組件通信-父傳子-chilren說明

09.父子組件通信-子傳父實(shí)現(xiàn)

10.使用狀態(tài)提升實(shí)現(xiàn)兄弟組件通信

11.使用context機(jī)制跨層傳遞數(shù)據(jù)

12.useEffect-概念理解和基礎(chǔ)使用

13.useEffect-不同依賴項(xiàng)說明

14.useEffect-清除副作用

15.自定義Hook實(shí)現(xiàn)

16.ReactHooks使用規(guī)則說明

17.案例優(yōu)化-使用useEffect獲取數(shù)據(jù)

18.案例優(yōu)化-自定義hook封裝請(qǐng)求邏輯

19.案例優(yōu)化-評(píng)論Item組件封裝

Day3

01.Redux快速上手

02.Redux與React-環(huán)境準(zhǔn)備

03.Redux與React-實(shí)現(xiàn)counter

04.Redux與React-提交action傳參

05.Redux與React-異步狀態(tài)操作

06.Redux調(diào)試-devtools

07.美團(tuán)案例-案例演示和環(huán)境準(zhǔn)備

08.美團(tuán)案例-分類和商品列表渲染

09.美團(tuán)案例-點(diǎn)擊分類激活交互實(shí)現(xiàn)

10.美團(tuán)案例-商品列表切換顯示

11.美團(tuán)案例-添加購物車實(shí)現(xiàn)

12.美團(tuán)案例-統(tǒng)計(jì)區(qū)域功能實(shí)現(xiàn)

13.美團(tuán)案例-購物車列表功能實(shí)現(xiàn)

14.美團(tuán)案例-控制購物車顯示和隱藏

Day4

01.ReactRouter-快速開始

02.ReactRouter-抽象路由模塊

03.ReactRouter-路由導(dǎo)航跳轉(zhuǎn)

04.ReactRouter-導(dǎo)航跳轉(zhuǎn)傳參

05.ReactRouter-嵌套路由配置

06.ReactRouter-默認(rèn)二級(jí)路由配置

07.ReactRouter-404路由配置

08.ReactRouter-倆種路由模式

09.記賬本-功能演示和環(huán)境創(chuàng)建

10.記賬本-配置別名路徑@

11.記賬本-數(shù)據(jù)Mock實(shí)現(xiàn)

12.記賬本-整體路由設(shè)計(jì)

13.記賬本-antD主題色定制

14.記賬本-Redux管理賬目列表

15.記賬本-TabBar功能實(shí)現(xiàn)

Day5

01.月度賬單-統(tǒng)計(jì)區(qū)域-功能演示和結(jié)構(gòu)搭建

02.月度賬單-統(tǒng)計(jì)區(qū)域-點(diǎn)擊切換時(shí)間選擇框

03.月度賬單-統(tǒng)計(jì)區(qū)域-點(diǎn)擊確定切換時(shí)間顯示

04.月度賬單-統(tǒng)計(jì)區(qū)域-數(shù)據(jù)按月分組實(shí)現(xiàn)

05.月度賬單-統(tǒng)計(jì)區(qū)域-計(jì)算選擇月份之后的統(tǒng)計(jì)數(shù)據(jù)

06.月度賬單-統(tǒng)計(jì)區(qū)域-初始化渲染統(tǒng)計(jì)數(shù)據(jù)

07.月度賬單-列表區(qū)域-單日統(tǒng)計(jì)列表實(shí)現(xiàn)

08.月度賬單-列表區(qū)域-單日賬單列表渲染顯示

09.月度賬單-列表區(qū)域-點(diǎn)擊切換賬單展開和收起

10.月度賬單-賬單類型圖標(biāo)組件封裝

11.新增賬單-功能熟悉和結(jié)構(gòu)搭建

12.新增賬單-支出和收入功能實(shí)現(xiàn)

13.新增賬單-新增表單實(shí)現(xiàn)

14.新增賬單-收尾優(yōu)化

Day6

01.使用CRA初始化項(xiàng)目環(huán)境

02.安裝scss包

03.安裝antDesign

04.配置基礎(chǔ)路由Router

05.配置別名路徑

06.使用gitee管理項(xiàng)目

07.登錄-準(zhǔn)備靜態(tài)結(jié)構(gòu)

08.登錄-表單校驗(yàn)實(shí)現(xiàn)

09.登錄-獲取表單數(shù)據(jù)

10.登錄-封裝request請(qǐng)求模塊

11.登錄-redux管理token-編寫樣板代碼

12.登錄-redux管理token-實(shí)現(xiàn)Token異步獲取

13.登錄-redux管理token-實(shí)現(xiàn)登錄后續(xù)邏輯

14.登錄-Token持久化

15.登錄-封裝Token的存取刪方法

Day7

01.Axios請(qǐng)求頭注入Token

02.根據(jù)Token控制路由跳轉(zhuǎn)

03.Layout-結(jié)構(gòu)創(chuàng)建和樣式reset

04.Layout-二級(jí)路由配置

05.Layout-點(diǎn)擊菜單跳轉(zhuǎn)路由

06.Layout-根據(jù)當(dāng)前路由路徑高亮菜單

07.Layout-展示個(gè)人信息

08.Layout-退出登錄實(shí)現(xiàn)

09.Layout-處理token失效

10.Home-Echarts基礎(chǔ)圖表渲染

11.Home-Echarts組件封裝實(shí)現(xiàn)

12.拓展-API模塊封裝

Day8

01.文章發(fā)布-功能演示說明

02.基礎(chǔ)文章發(fā)布-準(zhǔn)備基礎(chǔ)結(jié)構(gòu)

03.基礎(chǔ)文章發(fā)布-準(zhǔn)備富文本編輯器

04.基礎(chǔ)文章發(fā)布-頻道列表獲取渲染

05.基礎(chǔ)文章發(fā)布-收集表單數(shù)據(jù)提交表單

06.文章封面-上傳文章封面基礎(chǔ)實(shí)現(xiàn)

07.文章封面-實(shí)現(xiàn)切換封面類型

08.文章封面-控制上傳圖片的數(shù)量

09.文章封面-發(fā)布帶封面的文章

10.文章列表-功能描述和結(jié)構(gòu)創(chuàng)建

11.文章列表-通過自定義hook獲取頻道列表

12.文章列表-渲染table表格

13.文章列表-適配文章狀態(tài)

Day9

01.文章列表-篩選功能實(shí)現(xiàn)

02.文章列表-分頁功能實(shí)現(xiàn)

03.文章列表-刪除功能實(shí)現(xiàn)

04.文章列表-攜帶id跳轉(zhuǎn)到編輯頁

05.編輯文章-回填基礎(chǔ)數(shù)據(jù)

06.編輯文章-回填封面信息

07.編輯文章-根據(jù)id適配編輯和新增狀態(tài)

08.編輯文章-更新文章

09.項(xiàng)目打包-基礎(chǔ)打包和本地預(yù)覽

10.打包優(yōu)化-配置路由懶加載

11.打包優(yōu)化-包體積可視化分析

12.打包優(yōu)化-CDN配置

溫馨提示：

以上內(nèi)容大家先學(xué)為敬，還有【提高篇】和【項(xiàng)目實(shí)戰(zhàn)前臺(tái)篇】暫未上線，老師正在快馬加鞭錄制中，敬請(qǐng)期待!