10x程序員工作法 / 掌握主動權,忙到點子上
10x程序員工作法 / 掌握主動權,忙到點子上
React18+Next.js13+TS,B端+C端完整業務+技術雙閉環 2023年
最新網課、影視劇電影資源:趣資料m.candycoatedcreation.com
- 視頻資源大?。?.77 GB 更新時間:2023-07-01
- 類型:視頻 觀看方式:百度網盤
- 類別:>電腦教程 > 語言匯編Tags:
- 提醒:開通VIP會員全站免費學 推薦星級:
React18+Next.js13+TS,B端+C端完整業務+技術雙閉環 2023年資源簡介:
最新 React 技術棧,實戰復雜低代碼項目-仿問卷星
接觸過幾千名前端學員,發現大部分學員只用過 Vue,但 React 在大廠的使用率非常高,不會 React 降低學員在工作、面試中的競爭力。本課由雙越慕課明星講師,運用擅長的通俗易懂的講課方式,從入門、進階到實戰,幫助你系統構建完整的 最新React 生態技術體系,手把手帶領下完成一個超2W行的高質量復雜低代碼項目-高仿問卷星,從架構到拆解,從B 端到C端,完整業務+技術雙閉環實戰,助你在激烈的競爭中脫影而出。
適合人群
想從 0 學習 React 完整技術棧的同學
學過 Vue 還想進階 React 的同學
想學習 React 做復雜項目的同學
技術儲備
熟悉 HTML CSS 和 JS 語法
了解 HTTP 協議,用過 Ajax
了解 webpack 或 vite 的基本配置
React18+Next.js13+TS,B端+C端完整業務+技術雙閉環百度網盤課程目錄
第1章 開期準備
1-1-導學.mp4
1-2-功能介紹.mp4
1-3-課程安排-即學即用,漸進式開發項目.mp4
第2章 【入門】什么是 React React 引領了現代前端開發的變革
2-1-章介紹.mp4
2-2-React是全球最火爆的前端框架.mp4
2-3-React其實非常簡單-但需要你熟悉JS語法.mp4
2-4-看幾個示例來體會React的代碼邏輯.mp4
2-5-React核心價值-組件化.mp4
2-6-React核心價值-數據驅動視圖.mp4
2-7-課程安排-即學即用,漸進式開發項目.mp4
2-8-章總結.mp4
第3章 【基礎】創建 React 項目開發環境 – 代碼未動,環境先行[缺3-5]
3-1-章介紹.mp4
3-10-【加餐】vite和webpack的區別-vite使用E.mp4
3-11-章總結.mp4
3-2-準備工作-安裝必備軟件.mp4
3-3-使用Create-React-App創建項目-React.mp4
3-4-使用Vite創建React項目-Vite是前端熱門工具.mp4
3-6-使用prettier規范代碼風格-統一風格,多人開發也不.mp4
3-7-提交代碼到git倉庫-選擇國內平臺.mp4
3-8-使用husky執行pre-commit檢查-把非規范代碼.mp4
3-9-使用commit-lint規范commit提交格式-讓g.mp4
第4章 【基礎】JSX 語法和組件基礎 – 學完即可開發一個靜態頁面[缺4-12]
4-1-章介紹.mp4
4-10-實戰-開發項目列表頁-即學即用效果好.mp4
4-11-React組件基礎-拆分UI結構,便于開發維護和復用.mp4
4-13-React開發者工具-讓React調試更簡單.mp4
4-14-加餐-JSX和Vue模板的區別-體現兩者設計理念的差異.mp4
4-15-章總結.mp4
4-2-JSX語法和HTML相似-很容易學習.mp4
4-3-JSX的標簽-和HTML標簽有幾點不同.mp4
4-4-JSX的屬性-style改動非常大.mp4
4-5-JSX中監聽DOM事件-遇到了Typescript類型問.mp4
4-6-補充Typescript類型基礎知識-解答上一節的困惑.mp4
4-7-JSX中插入JS變量和表達式-讓JSX真正融入JS代碼中.mp4
4-8-JSX中使用條件判斷-讓JSX具備if-else能力.mp4
4-9-JSX中使用循環-讓JSX真正動起來.mp4
第5章 【基礎】React Hooks – 處理邏輯監聽狀態,讓頁面動起來
5-1-章介紹.mp4
5-10useEffect在開發環境下執行兩次-模擬全流程,及早.mp4
5-11用useRef操作DOM元素-React的ref和Vue.mp4
5-12使用useMemo緩存數據-React中常見的性能優化手.mp4
5-13使用useCallback緩存函數.mp4
5-14自定義Hooks-ReactHooks的正確打開方式.mp4
5-15使用自定義Hook獲取鼠標位置-組件公共邏輯抽離和復用.mp4
5-16使用自定義Hook異步加載數據-模擬異步場景.mp4
5-17使用第三方Hooks-ahooks和react-use.mp4
5-18Hooks的三條使用規則.mp4
5-19Hooks閉包陷阱-React??济嬖囶}.mp4
5-2-useState讓頁面;動&起來.mp4
5-20章總結.mp4
5-3-state一個組件的;獨家記憶&.mp4
5-4-state特點-異步更新,合并后更新.mp4
5-5state特點-不可變數據-非常重要的概念.mp4
5-6實戰-重構列表頁-用useState實現增、刪、改.mp4
5-7使用immer修改state-幫你擺脫;不可變.mp4
5-8實戰-重構列表頁-使用immer讓開發更簡單.mp4
5-9useEffect監聽組件生命周期-創建、更新、銷毀.mp4
第6章 【基礎】在 React 中使用 CSS 樣式 – 為頁面“美顏”,頁面變漂亮[缺6-1]
6-10實戰-為QuestionCard組件增加CSS樣式.mp4
6-11章總結.mp4
6-2普通方式使用CSS-盡量不要用內聯style.mp4
6-3CSS-Module解決className可能會重復的問題.mp4
6-4使用Sass語法-提高CSS編碼效率.mp4
6-5CSS-in-JS常用工具之Styled-componen.mp4
6-6JS函數后加字符串的調用形式-解決Style-compon.mp4
6-7CSS-in-JS常用工具之Styled-jsx和Emot.mp4
6-8實戰-增加CSS樣式-創建正式項目環境.mp4
6-9實戰-為列表頁增加CSS樣式.mp4
第7章 【中級】React-router 路由 – 配置多頁面,由單頁變成一個系統
7-1章介紹.mp4
7-2路由設計-確定網址和頁面的關系.mp4
7-3設計Layout模板-抽離公共部分,代碼復用.mp4
7-4路由開發-創建所有頁面.mp4
7-5路由開發-創建3個Layout和使用Outlet.mp4
7-6使用React-Router配置路由-實現了多頁面.mp4
7-7使用路由API-跳轉頁面和獲取參數.mp4
7-8章總結.mp4
7-9自定義網頁標題和favicon.mp4
第8章 【基礎】使用 AntDesign UI 組件庫 – 常用組件拿來即用
8-10使用AntD重構QuestionCard組件-得到了最終.mp4
8-11使用AntD的confirm功能-展示AntD的交互能力.mp4
8-12使用AntD開發星標問卷列表頁.mp4
8-13使用AntD開發回收站頁面-使用Table組件.mp4
8-14開發回收站的恢復和刪除-為表格增加了選擇功能.mp4
8-15加餐-介紹TailWind-CSS.mp4
8-16章總結.mp4
8-1章介紹.mp4
8-2介紹React世界中常用的幾個UI組件庫.mp4
8-3安裝和使用Ant-Design.mp4
8-4使用AntD重構MainLayout-體現AntD布局能力.mp4
8-5使用AntD重構ManageLayout-靈活使用Butt.mp4
8-6使用AntD開發Logo組件.mp4
8-7開發UserInfo組件.mp4
8-8使用AntD開發首頁.mp4
8-9使用AntD快速制作漂亮的404頁面.mp4
第9章 【中級】React 表單組件 – 接收用戶輸入,讓用戶和頁面互動起來[缺9-13]
9-10使用AntD的Form組件開發注冊頁.mp4
9-11使用AntD的Form組件開發登錄頁,并實現.mp4
9-12使用AntD表單組件的校驗功能,校驗用戶名和密碼的格式.mp4
9-14使用第三方表單校驗工具Formik.mp4
9-15章總結.mp4
9-1章介紹.mp4
9-2什么是受控組件-React表單組件的重要概念.mp4
9-3使用textarea組件-通過dangerouslySet.mp4
9-4使用radio單選按鈕-受控組件的設計思路.mp4
9-5使用checkbox復選按鈕-模擬真實的業務場景.mp4
9-6使用select下拉框組件.mp4
9-7使用form組件和submit方法.mp4
9-8使用AntD開發ListSearch搜索組件.mp4
9-9ListSearch搜索修改URL參數-體現組件設計的解耦.mp4
第10章 【中級】Ajax 網絡請求 part1 – 搭建 Mock 服務,完成前后端通訊
10-1 章介紹.mp4
10-10 配置axios的response攔截器-統一處理錯誤.mp4
10-11 開發新建問卷功能-設置loading狀態以優化體驗.mp4
10-12 開發獲取問卷信息功能-使用自定義Hook抽離公共邏輯.mp4
10-13 使用useRequest重構Ajax請求-統一處理l.mp4
10-14 使用useRequest獲取問卷列表.mp4
10-15 給列表增加搜索功能-使用第三方Hook抽離組件公共邏.mp4
10-16 使用useRequest開發星標和回收站頁面.mp4
10-2 關于Ajax的基礎知識、API和工具.mp4
10-3 使用mockjs模擬Ajax請求.mp4
10-4 在nodejs中使用mockjs-使用Random輕松.mp4
10-5 使用nodejs啟動服務,模擬get請求.mp4
10-6 模擬post請求,并使用postman測試.mp4
10-7 使用craco.js擴展webpack配置-使用dev.mp4
10-8 介紹幾個在線mock平臺-謹慎使用.mp4
10-9 API設計-使用Restful API規范.mp4
第11章 【中級】Ajax 網絡請求 part2 – 一次學習多種形式的列表和分頁功能
11-1 開發分頁功能-定義URL參數page和pageSize.mp4
11-10 開發刪除問卷功能-修改信息;假刪除&rd.mp4
11-11 開發恢復問卷功能-使用for-awiat-of處理多.mp4
11-12 開發徹底刪除功能.mp4
11-13 介紹JWT-用戶登錄校驗的技術方案.mp4
11-14 開發用戶的mock和services.mp4
11-15 開發注冊和登錄功能.mp4
11-16 存儲token,并使用axios攔截器附加token.mp4
11-17 開發獲取用戶信息,以及退出登錄.mp4
11-18 -章總結.mp4
11-2 實現列表分頁功能-使用Antd的Pagination組.mp4
11-3 LoadMore上劃加載更多-設計組件的state.mp4
11-4 LoadMore上劃加載更多-使用防抖監聽scroll.mp4
11-5 LoadMore上劃加載更多-根據DOM位置判斷加載時.mp4
11-6 LoadMore上劃加載更多-真正加載數據.mp4
11-7 LoadMore上劃加載更多-優化功能體驗.mp4
11-8 開發問卷標星功能.mp4
11-9 開發問卷復制功能.mp4
第12章 【中級】Redux 狀態管理 – 復雜項目的數據管理形式
12-1 章介紹.mp4
12-10 使用Redux實現數字加減法-使用useSelect.mp4
12-11 使用Redux實現TodoList-展示復雜數據結構.mp4
12-12 使用Redux實現TodoList-傳入Action.mp4
12-13 Redux單項數據流-動圖體驗數據流轉過程.mp4
12-14 Redux開發者工具-方便跟蹤和調試.mp4
12-15 介紹MobX-可以像Vue一樣聲明式的修改數據.mp4
12-16 使用MobX開發TodoList-創建數據模型.mp4
12-17 使用MobX開發TodoList-數據的顯示和操作.mp4
12-18 使用Redux管理用戶信息-定義store和redu.mp4
12-19 使用Redux管理用戶信息-使用useSelecto.mp4
12-2 什么是狀態管理,為何要用狀態管理.mp4
12-20 使用自定義Hook統一加載用戶信息,并存儲到redu.mp4
12-21 根據用戶登錄狀態動態跳轉頁面-使用自定義Hook統一.mp4
12-22 章總結.mp4
12-3 使用Context實現跨組件跨層級傳遞數據.mp4
12-4 學習使用useReducer-提前了解redux的概念.mp4
12-5 使用useReducer開發TodoList-定義in.mp4
12-6 使用useReducer開發TodoList-使用di.mp4
12-7 使用Context和useReducer實現跨組件通訊.mp4
12-8 介紹Redux-React世界最流行的狀態管理工具.mp4
12-9 使用Redux實現數字加減法-認識Reducer和Ac.mp4
第13章 【實戰】開發問卷編輯器 part1 – 尋找突破口,用兩個組件打通全部流程
13-1 -章介紹.mp4
13-10 -定義組件配置-可根據type找到組件.mp4
13-11 -在畫布上動態顯示組件列表-梳理完整的流程.mp4
13-12 -點擊畫布選中組件-通過selectedId全局共享.mp4
13-13 -組件庫-組件按類型分組.mp4
13-14 -把組件分組顯示在組件庫中.mp4
13-15 -點擊組件庫中的組件,添加到畫布中.mp4
13-16 -解釋為何要使用fe_id.mp4
13-17 -定義屬性表單,用于修改組件的屬性.mp4
13-18 -根據選中的組件,動態顯示屬性表單.mp4
13-19 -修改組件屬性,并同步到畫布中.mp4
13-2 -需求分析-詳細演示各個功能.mp4
13-20 -定義EditHeader組件,實現返回功能.mp4
13-3 -分析UI界面,如何拆分組件.mp4
13-4 -開發UI組件拆分-實現畫布Y軸滾動.mp4
13-5 -定義畫布中的兩個組件-Title和Input.mp4
13-6 -把Title和Input組件顯示到畫布上.mp4
13-7 -定義問卷組件的數據結構-這是動態渲染畫布的前提.mp4
13-8 -把組件列表存儲到Redux store-統一各個組件.mp4
13-9 -把組件列表存儲到Redux store-重構useL.mp4
第14章 【實戰】開發問卷編輯器 part2 – 增加其他組件,展現設計的擴展性
14-1 -工具欄-刪除組件,并重新計算selectedId-p.mp4
14-10 -根據QuestionInput改造出Questio.mp4
14-11 -學習Antd的Radio組件,并定義屬性類型.mp4
14-12 -創建QuestionRadio的Component.mp4
14-13 -開發QuestionRadio屬性表單-可動態添加.mp4
14-14 -QuestionRadio屬性表單變化,同步到畫布.mp4
14-15 -創建QuestionCheckbox組件,并顯示在.mp4
14-16 -開發QuestionCheckbox屬性表單-可動.mp4
14-2 -工具欄-隱藏組件,并重新計算selectedId-p.mp4
14-3 -工具欄-鎖定和解鎖組件,動態禁用屬性表單.mp4
14-4 -工具欄-復制和粘貼組件-結合addComponent.mp4
14-5 -在畫布增加快捷鍵-需提前判斷ActiveElemen.mp4
14-6 -快捷鍵-選中上一個,選中下一個.mp4
14-7 -增加Paragraph組件-體現編輯器組件機制的擴展.mp4
14-8 -為Paragraph組件增加換行功能-充分考慮安全性.mp4
14-9 -增加QuestoinInfo組件-整合標題和段落.mp4
第15章 【實戰】開發問卷編輯器 part3 – 聚焦高級功能:拖拽排序和撤銷重做[缺15-1]
15-1 -在圖層中修改組件標題-動態切換input和文本.mp4
15-10 -組件列表拖拽排序-選擇第三方庫dnd-kit.mp4
15-11 -演示dnd-kit拖拽排序.mov.mp4
15-12 -在dnd-kit示例中模擬組件列表的數據結構.mp4
15-13 -組件列表拖拽排序-抽離公共組件SortableCo.mp4
15-14 -組件列表拖拽排序-應用與畫布和圖層.mp4
15-15 -工具欄補充上移下移功能-和拖拽排序類似.mp4
15-16 -撤銷重做的基本原理.mp4
15-17 -實現Redux的撤銷重做功能-使用TodoList.mp4
15-18 -問卷編輯器增加撤銷重做-定義Redux數據類型.mp4
15-19 -問卷編輯器增加撤銷重做-工具欄按鈕和快捷鍵.mp4
15-2 -圖層-切換組件的hidden和locked.mp4
15-20 -章總結.mp4
15-3 -動態切換右側tabs-根據選中組件動態切換屬性和頁面.mp4
15-4 -設置頁面信息-定義Redux數據結構.mp4
15-5 -設置頁面信息-修改表單同步到Redux中.mp4
15-6 -修改網頁標題-和右側網頁信息表單數據聯通.mp4
15-7 -保存問卷信息-判斷loading防止連續觸發.mp4
15-8 -監聽內容變化,自動保存-不是定期保存.mp4
15-9 -發布問卷-更新isPublished屬性.mp4
第16章 【實戰】問卷數據統計 – 有統計數據才能體現完整項目的業務閉環
16-1 -章開始.mp4
16-10 -答卷的數據結構設計-把結果寫到Mock服務.mp4
16-11 -顯示答卷列表-使用useRequest獲取數據-p.mp4
16-12 -顯示統計表格-需根據componentList自定.mp4
16-13 -顯示統計列表-實現分頁功能.mp4
16-14 -選擇第三方圖表庫-最終選擇Recharts.mp4
16-15 -使用Recharts演示餅圖PieChart.mp4
16-16 -使用Recharts演示柱狀圖BarChart.mp4
16-17 -設計圖表統計的數據結構,并寫到Mock服務中.mp4
16-18 -為QuestionRadio擴展統計組件.mp4
16-19 -為QuestionCheckbox擴展統計組件.mp4
16-2 -問卷和答卷的區別-一個是題目一個是答案.mp4
16-20 -章總結.mp4
16-3 -需求分析-詳細分析每個功能點.mp4
16-4 -獲取問卷信息-判斷isPublished給出提示.mp4
16-5 -頁面UI布局-增加oading效果-part1.mp4
16-6 -頭部組件的UI布局.mp4
16-7 -頭部組件-拷貝URL,生成二維碼.mp4
16-8 -左側顯示組件列表-通過狀態提升存儲selectedI.mp4
16-9 -答卷的數據結構設計-開發答卷列表的前提.mp4
第17章 【實戰】Next.js開發C端 – 學習React技術棧的 SSR 服務端渲染
17-1 -章介紹.mp4
17-10 -創建QuestionRadio組件,并引入到頁面中.mp4
17-11 -創建form表單-使用隱藏域存儲questionI.mp4
17-12 -新建API,并提交form表單.mp4
17-13 -創建Mock接口,跑通前后端完整流程.mp4
17-14 -抽離PageWrapper組件,統一定義Head.mp4
17-15 -獲取問卷數據,并校驗是否正常.mp4
17-16 -根據問卷組件列表,動態渲染表單.mp4
17-17 -擴展表單組件Title,Paragraph和Inf.mp4
17-18 -擴展表單組件TextArea和Checkbox.mp4
17-19 -單獨解決Checkbox組件的特殊性-合并多個va.mp4
17-2 -介紹SSR,它的優缺點,和CSR的區別,以及應用場景.mp4
17-20 -章總結.mp4
17-3 -使用Next.js創建項目并啟動.mp4
17-4 -初試Next.js功能-擴展頁面,使用API.mp4
17-5 -介紹StaticGeneration-構建時生成ht.mp4
17-6 -介紹Server-side-rendering-每次.mp4
17-7 -定義動態路由,獲取url參數.mp4
17-8 -選擇form提交數據-和B端統計頁做數據匹配.mp4
17-9 -創建QuestionInput組件,并引入到頁面中.mp4
第18章 【實戰】React性能優化 – 將 main.js代碼從1.6M優化到 33KB
18-10 -章總結.mp4
18-2 -useState傳入函數,只在組件渲染時執行一次.mp4
18-3 -使用useMemo緩存B端統計頁的鏈接和二維碼Ele.mp4
18-4 -使用useCallback緩存添加組件的函數.mp4
18-5 -使用React.memo優化子組件更新.mp4
18-6 -分析B端構建出的bundle文件,體積太大,需要拆分.mp4
18-7 -配置路由懶加載,拆分編輯頁和統計頁,優化代碼體積.mp4
18-8 -抽離公共代碼antd和react,合理使用HTTP緩.mp4
18-9 -CRA根據路由懶加載自動拆分CSS文件.mp4
第19章 【實戰】React 測試 – 項目有測試,睡覺才踏實(不會半夜被叫醒改bug)
19-1 -章介紹.mp4
19-10 -使用StoryBook寫QuestionInfo組.mp4
19-11 -講解TS中typeof語法,和JS的typeof不.mp4
19-12 -使用StoryBook寫其他組件的可視化測試.mp4
19-13 -章總結.mp4
19-2 -單元測試入門,使用jest寫測試用例.mp4
19-3 -寫QuestionInfo組件的單元測試,學習新的斷.mp4
19-4 -寫QuestionTitle和QuestionPar.mp4
19-5 -寫QuestionInput和QuestionTex.mp4
19-6 -寫QuestionRadio組件的單元測試-通過va.mp4
19-7 -寫QuestionCheckbox組件的單元測試-獲.mp4
19-8 -使用pre-commit做自動化測試,有問題的代碼不.mp4
19-9 -可視化測試-安裝Storybook并演示例子.mp4
第20章 課程總結
20-1 -關于項目的服務端.mp4
20-2 -課程總結.mp4
課件.zip
React18+Next.js13+TS,B端+C端完整業務+技術雙閉環百度網盤
PR+AU+AE全能剪輯師入門班2022年
PR+AU+AE全能剪輯師入門班2022年
React18+Next.js13+TS,B端+C端完整業務+技術雙閉環 2023年