W同學本科畢業 3 年，計算機專業，畢業之后一直做前端開發，但沒接觸過正規前端團隊的規范研發流程。她正在尋求自己職業突破的機會。同時作為女生，她也有未來職業規劃的顧慮。來看看她面試都會遇到哪些問題~
W同學本科畢業 3 年，計算機專業，畢業之后一直做前端開發，但沒接觸過正規前端團隊的規范研發流程。她正在尋求自己職業突破的機會。同時作為女生，她也有未來職業規劃的顧慮。來看看她面試都會遇到哪些問題~
本章講解了「歡樂購」項目中，引導、登陸、注冊頁面的實現鏈路，Charles 移動端請求代理轉發工具的使用、Rem 自適應布局的實現、Iconfont 等常用前端開發工具的使用，過程中幫助同學完成彈框組件、請求 Hook 等通用能力的封裝。通過本章學習，同學們可以輕松應對相對簡單的企業移動端頁面的開發。
- 6-1 使用 React-router-dom V6 版本實現登陸頁面跳轉（上）
- 6-2 Charles、rem布局、一像素邊框問題的前置工程準備（下）
- 6-3 使用 Ref 和 CSS 動畫完成引導頁面開發
- 6-4 使用 React-router-dom V6 版本實現登陸頁面跳轉（上）
- 6-5 使用 React-router-dom V6 版本實現登陸頁面跳轉（下）
- 6-6 使用 Sass 優化樣式代碼 & 使用 Axios + Charles 模擬請求開發（上）
- 6-7 使用 Sass 優化樣式代碼 & 使用 Axios + Charles 模擬請求開發（下）
- 6-8 封裝通用請求 useRequest 自定義 Hook（上）
- 6-9 封裝通用請求 useRequest 自定義 Hook（下）
- 6-10 useRequest 代碼改造及模態框提示功能實現
- 6-11 使用 useImperativeHandle 進行模態框組件的封裝實現
- 6-12 使用 CreatePortal 完善 Modal 組件，優化請求發送邏輯
- 6-13 注冊頁面的基礎開發
- 6-14 使用嵌套路由實現代碼的抽象復用
- 6-15 登陸邏輯的完整實現
W同學本科畢業 3 年，計算機專業，畢業之后一直做前端開發，但沒接觸過正規前端團隊的規范研發流程。她正在尋求自己職業突破的機會。同時作為女生，她也有未來職業規劃的顧慮。來看看她面試都會遇到哪些問題~
W同學本科畢業 3 年，計算機專業，畢業之后一直做前端開發，但沒接觸過正規前端團隊的規范研發流程。她正在尋求自己職業突破的機會。同時作為女生，她也有未來職業規劃的顧慮。來看看她面試都會遇到哪些問題~
W同學本科畢業 3 年，計算機專業，畢業之后一直做前端開發，但沒接觸過正規前端團隊的規范研發流程。她正在尋求自己職業突破的機會。同時作為女生，她也有未來職業規劃的顧慮。來看看她面試都會遇到哪些問題~
前端開發第一步就是要先把項目搭起來，初始化項目，創建目錄結構，完成通用的功能，比如接口請求、組件庫引入、圖片管理等。
- 7-1 在靈活之中找規范， React Hooks 的最佳實踐方法（上）
- 7-2 腳手架與使用 Vite 初始化前端項目（下）
- 7-3 在靈活之中找規范， React Hooks 的最佳實踐方法（上）
- 7-4 在靈活之中找規范， React Hooks 的最佳實踐方法（下）
- 7-5 編寫幾個通用的自定義 hooks（上）
- 7-6 編寫幾個通用的自定義 hooks（下）
- 7-7 配置 ESLint 并使用 Apollo 創建 GraphQL Service（上）
- 7-8 配置 ESLint 并使用 Apollo 創建 GraphQL Service（中）
- 7-9 配置 ESLint 并使用 Apollo 創建 GraphQL Service（下）
- 7-10 使用 Apollo-server 快速創建 mock 數據
- 7-11 antd-mobile 的基本用法，配置主題、國際化功能
- 7-12 圖片管理：將圖片上傳到阿里云 OSS（上）
- 7-13 圖片管理：將圖片上傳到阿里云 OSS（中）
- 7-14 圖片管理：將圖片上傳到阿里云 OSS（下）
- 7-15 面試重點：什么是 CSS Modules，如何使用？（上）
- 7-16 面試重點：什么是 CSS Modules，如何使用？（下）
- 7-17 職場技巧：如何優雅的求助別人？（上）
- 7-18 職場技巧：如何優雅的求助別人？（下）
學習ReactNative之前，必須先了解工程的基礎結構，掌握整體框架。同時，ReactNative是基于React，所以必須先學習必備的 React 知識，為后續學習打下基礎。
本章講解 Webpack 中的一些核心概念，從 Loader 與 Plugin 開始，帶你學明白 Webpack 的運行機制，然后逐步深入，擴展衍生出 SoureMap， HMR， WDS 等常見概念。本章課程學習過程中，額外增加了對 Webpack 官方文檔的查閱方式講解，幫助大家學會查閱文檔。
- 3-1 Webpack 實現對React框架代碼的打包
- 3-2 使用 Loader 打包靜態資源（圖片篇）
- 3-3 使用 Loader 打包靜態資源（樣式篇 - 上）
- 3-4 使用 Loader 打包靜態資源（樣式篇 - 下）
- 3-5 使用 plugins 讓打包更便捷
- 3-6 Entry 與 Output 的基礎配置
- 3-7 SourceMap 的配置
- 3-8 使用 WebpackDevServer 提升開發效率
- 3-9 Hot Module Replacement 熱模塊更新（1）
- 3-10 Hot Module Replacement 熱模塊更新（2）
- 3-11 使用 Babel 處理 ES6 語法（1）
- 3-12 使用 Babel 處理 ES6 語法（2）
- 3-13 Webpack 實現對React框架代碼的打包
1. 掌握VDOM，什么是VDOM、VDOM實用場景以及VDOM解決了什么的問題 2. 掌握Fiber與組件之間的關系 3. 掌握不同類型組件的Fiber
托雷特同學是在校大學生，本科，計算機專業。自學前端半年多，主要用 React 技術棧，跟著課程做過個人項目。他正在準備校招，也在尋求大廠實習機會。來看看他的面試是什么表現吧~
- 4-1 不會 Vue 就只說 React ，不要全部放棄【Vue 和 React 函數組件的區別】
- 4-2 【分析學員簡歷】對于應屆生，面試官喜歡什么項目經歷？
- 4-3 學員沒有體系、詳細的學過 CSS【HTML 默認的 inline block 元素】
- 4-4 基礎必考題學員竟然忘了【CSS 垂直水平居中】
- 4-5 深入理解的知識，是忘不了的【JS 值類型和引用類型】
- 4-6 考察學員對新語法 API 的理解和使用【ES6 和 TS 帶來了哪些價值】
- 4-7 看似簡單，但學員竟忘了很關鍵的一塊【URL 有哪些組成部分】
- 4-8 學員寫的很掙扎，多次刪改，表現的很不熟練【手寫 JSX 循環和判斷】
- 4-9 不僅問方式，還要問應用場景【React 組件通訊的方式】
- 4-10 知道 useParams 說明有實踐經驗【React-Router 如何獲取動態參數】
- 4-11 避免只用過 CRA 而沒用過 Webpack【Webpack 有哪些基本配置】
- 4-12 學員一邊寫代碼一邊講解，表現非常好【手寫二分查找，說明時間復雜度】
- 4-13 說完結果，再寫代碼表達【二叉樹的前、中、后序排列】
- 4-14 考察學員的獨立思考能力，思考框架的本質【如何理解“數據驅動視圖”】
- 4-15 不會 Vue 就只說 React ，不要全部放棄【Vue 和 React 函數組件的區別】
- 4-16 學員了解 VDOM 但卻寫出很多細節錯誤【根據一段 JSX 寫出 VNode】
- 4-17 學員感覺設計模式很難，但實際沒那么難【設計模式在前端開發中的應用場景】
- 4-18 應屆生該如何尋找項目難點和亮點【介紹你的一個項目】
- 4-19 一個問題就能看出計算機基礎不夠扎實【是否了解 WebAssembly】
- 4-20 【反問面試官1 - 想畢業進大廠，要做哪些準備？】大廠對于應屆生的簡歷要求
- 4-21 附：本科畢業就必須進大廠，進不去就感覺很失敗？— 這完全錯誤！
- 4-22 【反問面試官2 - 如何避免進入加班多的公司】是否加班需要權衡
- 4-23 【反問面試官3 - 大廠校招如何選擇心儀的部門】
- 4-24 【反問面試官4 - 為何最近一個月沒看前端】目標定太高，實現不了就很頹喪
- 4-25 【反問面試官5 - 字節的面試題為何如此難】
1. 掌握最小堆數據結構與算法實現 2. 掌握單線程調度器運行機制 3. 掌握任務調度的原理與源碼實現
W同學本科畢業 3 年，計算機專業，畢業之后一直做前端開發，但沒接觸過正規前端團隊的規范研發流程。她正在尋求自己職業突破的機會。同時作為女生，她也有未來職業規劃的顧慮。來看看她面試都會遇到哪些問題~
陳同學畢業自某 985 大學非計算機專業，工作一年后轉行自學前端，主要是跟著課程學習 React 和 Vue3 ，做過個人項目。他正在找自己人生第一份前端工程師的工作，一起看看他模擬面試有什么樣的表現~
1. 通過手寫實現，掌握React中不同組件的渲染原理 2. 理解React中不同組件的區別，學會在實際項目中根據實際場景來區分選用
托雷特同學是在校大學生，本科，計算機專業。自學前端半年多，主要用 React 技術棧，跟著課程做過個人項目。他正在準備校招，也在尋求大廠實習機會。來看看他的面試是什么表現吧~
- 38-1 不會 Vue 就只說 React ，不要全部放棄【Vue 和 React 函數組件的區別】
- 38-2 【分析學員簡歷】對于應屆生，面試官喜歡什么項目經歷？
- 38-3 學員沒有體系、詳細的學過 CSS【HTML 默認的 inline block 元素】
- 38-4 基礎必考題學員竟然忘了【CSS 垂直水平居中】
- 38-5 深入理解的知識，是忘不了的【JS 值類型和引用類型】
- 38-6 考察學員對新語法 API 的理解和使用【ES6 和 TS 帶來了哪些價值】
- 38-7 看似簡單，但學員竟忘了很關鍵的一塊【URL 有哪些組成部分】
- 38-8 學員寫的很掙扎，多次刪改，表現的很不熟練【手寫 JSX 循環和判斷】
- 38-9 不僅問方式，還要問應用場景【React 組件通訊的方式】
- 38-10 知道 useParams 說明有實踐經驗【React-Router 如何獲取動態參數】
- 38-11 避免只用過 CRA 而沒用過 Webpack【Webpack 有哪些基本配置】
- 38-12 學員一邊寫代碼一邊講解，表現非常好【手寫二分查找，說明時間復雜度】
- 38-13 說完結果，再寫代碼表達【二叉樹的前、中、后序排列】
- 38-14 考察學員的獨立思考能力，思考框架的本質【如何理解“數據驅動視圖”】
- 38-15 不會 Vue 就只說 React ，不要全部放棄【Vue 和 React 函數組件的區別】
- 38-16 學員了解 VDOM 但卻寫出很多細節錯誤【根據一段 JSX 寫出 VNode】
- 38-17 學員感覺設計模式很難，但實際沒那么難【設計模式在前端開發中的應用場景】
- 38-18 應屆生該如何尋找項目難點和亮點【介紹你的一個項目】
- 38-19 一個問題就能看出計算機基礎不夠扎實【是否了解 WebAssembly】
- 38-20 【反問面試官1 - 想畢業進大廠，要做哪些準備？】大廠對于應屆生的簡歷要求
- 38-21 附：本科畢業就必須進大廠，進不去就感覺很失??？— 這完全錯誤！
- 38-22 【反問面試官2 - 如何避免進入加班多的公司】是否加班需要權衡
- 38-23 【反問面試官3 - 大廠校招如何選擇心儀的部門】
- 38-24 【反問面試官4 - 為何最近一個月沒看前端】目標定太高，實現不了就很頹喪
- 38-25 【反問面試官5 - 字節的面試題為何如此難】
- 38-26 托雷特-面試問題總結
掌握了 Vue 和 React 的使用和原理，是否能設計出一個項目功能呢？面試會考察項目設計能力。本章講解項目設計的常見考察方式，以及解題思路和方法。
本章是課程的基礎知識鋪墊。課程使用 Typescript 做代碼演示，所以先介紹 Typescript 類型。設計模式是基于面向對象編程 OOP 的，所以先介紹面向對象的概念。UML 類圖是面向對象編程的重要設計工具。
- 2-1 Vue 和 React 組件也是對象
- 2-2 章介紹-講義
- 2-3 Typescript 介紹 - 前端最熱門的編程語言
- 2-4 TS 簡介-講義
- 2-5 Typescript 基礎類型
- 2-6 Typescript 自定義類型和 interface
- 2-7 面向對象 - 前端主流的編程思想
- 2-8 什么是面向對象?-講義
- 2-9 面向對象重要概念-類和實例
- 2-10 面向對象三要素-繼承，封裝，多態
- 2-11 Vue 和 React 組件也是對象
- 2-12 UML 類圖
- 2-13 UML 類圖-單個類
- 2-14 UML 類圖-類之間的關系
- 2-15 UML 類圖-關聯關系的細化
- 2-16 章總結
- 2-17 章總結-講義
- 2-18 課后作業
裝飾器模式是前端常用的設計模式之一。ES 規范早已引入了裝飾器語法，Typescript 也原生支持裝飾器語法，是前端工程師必備的技能。本章將詳細講解裝飾器模式，從概念背景，到代碼示例和 UML 類圖，最后到它的具體使用場景：Typescript 裝飾器語法。
測試是現代 Web 系統的重要流程，前端工程師也要參與到測試中來。本章講解 React 組件單元測試，以及通過 pre-commit 實現自動化測試流程，不怕遺漏。同時，使用 Storybook 進行組件的可視化測試，讓組件一目了然。
- 19-1 -章介紹
- 19-2 -單元測試入門，使用jest寫測試用例
- 19-3 -寫QuestionInfo組件的單元測試，學習新的斷言API
- 19-4 -寫QuestionTitle和QuestionParagraph的單元測試-通過style斷言isCenter
- 19-5 -寫QuestionInput和QuestionTextArea組件的單元測試-根據placeholder獲取元素并斷言
- 19-6 -寫QuestionRadio組件的單元測試-通過value獲取radio元素并斷言
- 19-7 -寫QuestionCheckbox組件的單元測試-獲取checked屬性斷言是否選中
- 19-8 -使用pre-commit做自動化測試，有問題的代碼不能被提交
- 19-9 -可視化測試-安裝Storybook并演示例子
- 19-10 -使用StoryBook寫QuestionInfo組件的可視化測試
- 19-11 -講解TS中typeof語法，和JS的typeof不一樣
- 19-12 -使用StoryBook寫其他組件的可視化測試
- 19-13 -章總結
陳同學畢業自某 985 大學非計算機專業，工作一年后轉行自學前端，主要是跟著課程學習 React 和 Vue3 ，做過個人項目。他正在找自己人生第一份前端工程師的工作，一起看看他模擬面試有什么樣的表現~
1. 剖析React底層調度機制 2. 分析React與合作式調度器 & 搶占式調度器 3. 分析如何避免任務餓死 4. 掌握時間切片與Aging策略 5. 掌握單線程調度器運行機制
現代 Web 系統都要使用 UI 組件庫，它封裝了常用的 UI 組件，如 Button Input 等，拿來即用。AntDesign 是國內 React 技術棧 UI 組件庫的不二選擇。本章引入 AntDesign ，并即學即用，使用 AntDesign 重構各個頁面。
- 8-1 介紹React世界中常用的幾個UI組件庫
- 8-2 介紹React世界中常用的幾個UI組件庫
- 8-3 安裝和使用Ant-Design
- 8-4 使用AntD重構MainLayout-體現AntD布局能力-part1
- 8-5 使用AntD重構ManageLayout-靈活使用Button組件
- 8-6 使用AntD開發Logo組件
- 8-7 開發UserInfo組件
- 8-8 使用AntD開發首頁
- 8-9 使用AntD快速制作漂亮的404頁面
- 8-10 使用AntD重構QuestionCard組件-得到了最終的UI效果
- 8-11 使用AntD的confirm功能-展示AntD的交互能力
- 8-12 使用AntD開發星標問卷列表頁
- 8-13 使用AntD開發回收站頁面-使用Table組件
- 8-14 開發回收站的恢復和刪除-為表格增加了選擇功能
- 8-15 加餐-介紹TailWind-CSS
- 8-16 章總結
本章的內容聚焦手機端 H5 開發的方方面面，Icon 展示、真機調試、下拉刷新、無限滾動等等，還有 H5 屏幕適配原理、四個最重要的職場能力，每一個都奧妙無窮。
- 12-1 使用 react-svg 解決 Icon 顏色定制的問題
- 12-2 手機端 Header 和 Bottom 菜單開發
- 12-3 使用 react-svg 解決 Icon 顏色定制的問題
- 12-4 添加商品分類選擇的功能（上）
- 12-5 添加商品分類選擇的功能（下）
- 12-6 新增商品上下架的操作
- 12-7 使用手機打開H5頁面
- 12-8 添加商品分類和手機端商品列表的接口
- 12-9 商品卡片列表的編寫
- 12-10 手寫下拉刷新功能（上）
- 12-11 手寫下拉刷新功能（下）
- 12-12 完善下拉刷新的功能
- 12-13 無限滾動原理講解
- 12-14 手寫無限滾動的功能（上）
- 12-15 手寫無限滾動的功能（下）
- 12-16 面試重點：H5 頁面如何做屏幕適配
- 12-17 職場技巧：在工作中最值得修煉的四個能力？
項目開發完了，就要上線了，借助阿里云提供各種服務，你可以快速上線自己的產品，云服務也是你必須了解的，不論是工作還是干私活掙外快，本章你都不能錯過。
- 17-1 針對 hooks 和react 組件的單元測試
- 17-2 針對 hooks 和react 組件的單元測試
- 17-3 后端 nestjs 單元測試
- 17-4 如何購買阿里云 ECS 服務器
- 17-5 登錄服務器并設置安全策略
- 17-6 什么是 web 服務器？
- 17-7 安裝 nginx 并本地部署 H5 項目
- 17-8 如何本地部署后端接口項目？
- 17-9 Docker 解決了哪些問題
- 17-10 Docker 的實現原理
- 17-11 Docker 重要的幾個概念
- 17-12 使用 docker 本地部署 mobile 項目
- 17-13 使用 Docker 本地部署 server 項目
- 17-14 mobile 項目和 server 端聯調配置
- 17-15 使用 Docker 本地部署 pc 項目
- 17-16 把本地鏡像上傳到阿里云鏡像倉庫
- 17-17 使用 docker 啟動 mysql 鏡像并初始化數據
- 17-18 使用 docker-compose 做容器編排
- 17-19 water-drop-deploy 專屬部署項目介紹
- 17-20 使用 docker-compose 本地啟動三個項目
- 17-21 在 ECS 服務器上部署項目
全面掌握React路由和redux狀態管理，理解最新Redux-Toolkit符合企業用人需求，也滿足項目開發需求，是React開發人員的必備技能。
- 17-1 react-redux簡化對Redux的使用
- 17-2 ReactRouterV6.4 基礎路由搭建
- 17-3 動態路由模式與編程式路由模式
- 17-4 useSearchParams與useLocation函數
- 17-5 默認路由展示與重定向路由與404處理
- 17-6 路由loader函數與redirect方法
- 17-7 自定義全局守衛與自定義元信息
- 17-8 Redux狀態管理的基本流程
- 17-9 react-redux簡化對Redux的使用
- 17-10 如何處理多個reducer函數及Redux模塊化
- 17-11 redux-thunk中間件處理異步操作
- 17-12 Redux-Toolkit(RTK)改善Redux使用體驗
- 17-13 Redux-Toolkit(RTK)如何處理異步任務
- 17-14 通過redux-persist進行數據持久化處理
- 17-15 路由加狀態管理的登錄攔截綜合案例
- 17-16 類組件中如何使用路由和狀態管理
- 17-17 章節總結
- 17-18 測試題（選擇）
- 17-19 測試題（實操）
帶學員了解課程的總體概覽以及后續課程的內容，以吸對當前AI應用爆發背景下的市場環境，同時了解GPT的發展時間線，及AI能力的探索。
掌握了 Vue 和 React 的使用和原理，是否能設計出一個項目功能呢？ 一個標準前端項目的開發流程，項目角色是什么，以及項目進行中將會遇到的問題和解決方案？本章講解項目設計和流程相關的考點。
- 21-1 React 實現 TodoList 代碼演示
- 21-2 面試為何會考察組件和狀態設計
- 21-3 狀態設計的思路和要點
- 21-4 組件設計的思路和要點
- 21-5 React 實現 TodoList 代碼演示
- 21-6 組件設計和狀態設計的總結
- 21-7 Vue 實現購物車-你將如何設計
- 21-8 Vue 實現購物車 data 如何設計
- 21-9 Vue實現購物車-組件設計和代碼演示
- 21-10 結合 vuex 實現購物車
- 21-11 狀態設計和組件設計的考點總結
- 21-12 面試為何會考察項目流程
- 21-13 和前端開發相關的項目角色有哪些
- 21-14 一個完整的項目要分哪些階段
- 21-15 評審項目需求時需要注意哪些事項
- 21-16 如何做好技術方案設計
- 21-17 如何保證代碼質量
- 21-18 項目過程中PM加需求怎么辦
- 21-19 不要對QA說：我電腦沒問題！
- 21-20 項目上線
- 21-21 項目溝通的重要性
- 21-22 項目流程總結
- 21-23 【任務】自己畫一個項目研發流程圖
大廠面試會通過各種難題來試探你的技術深度，評估你的技術發展潛力，這是入職后確定級別、薪資的重要參考。所以，技術深度將決定你的“錢途”。本章將通過多個面試題，講解前端面試?？嫉牡讓釉韱栴}，涉及 JS Vue React Nodejs 等。
- 5-1 -Vue2和Vue3和React三者的diff 算法有什么區別
- 5-2 本章學前必看： 知識深度很重要
- 5-3 -開始-學習要點和注意事項
- 5-4 -JS內存垃圾回收用什么算法
- 5-5 -【連環問】JS閉包是內存泄漏嗎
- 5-6 -如何檢測JS內存泄漏
- 5-7 -JS內存泄漏的場景有哪些
- 5-8 -JS內存泄漏的場景有哪些-擴展-WeakMap和WeakSet
- 5-9 -瀏覽器和nodejs事件循環（Event Loop）有什么區別-瀏覽器
- 5-10 -瀏覽器和nodejs事件循環（Event Loop）有什么區別-nodejs
- 5-11 -虛擬DOM（vdom）真的很快嗎
- 5-12 -遍歷一個數組用for和forEach哪個更快
- 5-13 -nodejs如何開啟多進程，進程如何通訊-進程和線程的區別
- 5-14 -nodejs如何開啟多進程，進程如何通訊-使用child_process.fork方式
- 5-15 -nodejs如何開啟多進程，進程如何通訊-使用cluster方式
- 5-16 -請描述js-bridge的實現原理
- 5-17 -requestIdleCallback和requestAnimationFrame有什么區別
- 5-18 -Vue每個生命周期都做了什么
- 5-19 -Vue2和Vue3和React三者的diff 算法有什么區別
- 5-20 -Vue-router的MemoryHistory是什么
- 5-21 重點及注意事項總結
