布魯斯的 TypeScript + React 全攻略｜快速上手仿 Instagram UI
結合應用２大前端業界超夯框架，並學會效能優化，再升級前端技術！
框架基礎知識｜函數組件、類別組件、渲染機制等
React Hook 實戰｜透過實作簡易 APP 學習 useState、useRef
Redux 狀態管理神器｜在Class、Funtion 組件裡使用 react-redux 等，維護管理更輕鬆
好用工具包 redux-toolkit｜包含 store配置與非同步處理等，讓編寫 Redux 應用程式變得更加容易
實作仿 Instagram app 前端頁面｜熟悉 TypeScript 與 React 的結合應用
按一下 進入設定
系列課程一次學會 TypeScript + React，前端技術力再升級！
# 從底層思想到技能提升，深度掌握 TypeScript
課後獨立做出仿 Instagram UI
什麼是 React？滿意度高達 88 %，使用程度排名第一的 JavaScript 框架！
React 是 Facebook 推出的一個用來建構用戶介面的 JavaScript 庫，其高性能的特性吸引了許多開發者關注與使用。不管是 Stack Overflow 開發者調查，還是 State of JS 調查，在前端 JavaScript 框架榜單中，React 始終名列前茅，一直是最受歡迎的前端 JavaScript 框架，Airbnb、Facebook、Instagram、Netflix、Twitter、WhatsApp 等全球最大的公司和品牌都使用 React 構建。
而 React 有著以下特點：
- 虛擬 DOM ：React 定義了一套變量形式的 DOM 模型，和主流的 MVC 框架不同， React 減少了真實 DOM的操作，一切換算皆在變量中，大福提升React 的性能
- 組件系統 ：React 開發概念就是可將頁面中的任何區域或元素看成一個組件做開發，組件可同時包含 CSS、JS、image 等元素，組件的複用能夠有效的提升開發的效率。
- 單行數據流 ：React 的核心內容就是數據綁定，將服務端數據與前端頁面綁訂好，開發者只要專注開發實務應用就行了。
一課掌握 4 大 React 核心技術 + 6 大 TypeScript 知識點
# 錘鍊 2 大前端熱門技術，學完直接對接職場應用
將 TypeScript 整合進 React ，專案開發更便利 !
好用工具包 redux-toolkit，讓編寫 Redux 應用程式變得更加容易
redux-tookit 是 Redux 官方推出的 redux 整合工具，可以解決開發 Redux 所遇到的痛點，像是檔案太多太分散，無形中增加了維護成本。
而 redux-toolkit 能夠整合分散的 action、reducer 等程式碼到 Slice 裡高效開發，使專案上的 Redux 開發更有效率。
學習內容：
√ redux-toolkit 是什麼
√ createSlice、reducer 等配置
√ store配置（configureStore）與非同步處理（createAsyncThunk）
學會 Redux 狀態管理神器，維護、管理程式碼更輕鬆
Redux 是現在前端常見狀態 ( State ) 管理庫，隨著前端應用擴展，狀態變得越來越複雜，當邏輯與狀態管理混合在一起時會讓前端程式難以維護。所以，我們需要有一個維護狀態的管理庫，幫我們將邏輯與狀態拆分開來，讓程式碼提高可讀性與維護性。
學習內容：
√（基礎）什麼是Redux？為什麼需要狀態管理？Flux是什麼？
√（基礎）reducer、store、action、dispatch狀態管理實戰
√（基礎）訂閱 store 來實時更新數據
√（基礎）在 Class、Function 組件裡使用 react-redux
√（進階）中間層 middleware 是什麼？在中間層取得非同步數據
√（進階）自定義的中間層
√（進階）React Redux VS Context，該怎麼選擇？
熟悉 React Hook，打造簡潔的 React 程式架構
前端框架 React 在 v16.8 版本引入了全新的 API，叫做 React Hooks ，其接近原生的 js 寫法，對於剛開始接觸的開發者很友善，減少了解多餘的元件的週期，用相對簡單的寫法解決複雜問題。React Hooks 不會取代你對 React 概念的了解。相反的，Hook 是對已經熟悉的 React 概念：props、state、context 等語法，提供了一個更直接的 API。
React Hooks 優勢 :
- 程式碼輕鬆再利用 ：摘除原本 class component 寫法，讓程式結構更乾淨
- 更接近 JS 原生寫法 ：學習曲線較緩，每一個 Hook 都是一個函數，因此它的寫法十分簡單，而且開發者更容易理解，能有效提高開發速度
- 更高階的解構及重整 ：純函式易於大型程式的 side effect 管理
- 容易擴展 ：Hook 具有很高的可擴展性，你可以通過自定義 Hook 來擴展某個 Hook 的功能
學習內容：
√ useState、useEffect、useRef：透過實作簡易 APP，帶你熟悉 React Hook 語法。
掌握效能優化的方法！好還要更好，快還要更快！
# 提升專案體驗與可維護性 !
當我們在開發大量的專案時，通常會使用 React 來進行開展，了解掌握 React 的效能優化對專案的體驗和可維護性都有很大的好處，課程中將會介紹 React 中可運用的效能優化方式。
學習內容：
√ useMemo ：在 React 組件裡記憶物件，減少複雜的運算，或者防止其他 Hook 的依賴變動所造成的組件重新渲染。
√ useCallback ：在 React 組件裡記憶 Function，跟 useMemo 很類似，也用來防止其他 Hook 的依賴變動所造成的組件重新渲染。
√ React.memo : 防止組件因為傳進一樣的 props 參數而造成沒意義的重新渲染。
√ re-render ：重新渲染組件
專業師資多年前端開發經驗分享，帶你掌握 TypeScript 開發訣竅
# 帶你輕鬆學習，少踩開發痛點 !
章節目錄
- 1-1React + TypeScript 課堂介紹，歡迎大家來學React + TS！
- 1-2React是什麼？為什麼我們需要React
試閱影片
常見問答
如果您購買的是募資課程，請在課程的【簡介】中查看開課時間，募資課程將於開課時間所述日期開放同學上課。
若您購買的是一般課程（開放上課課程），則在購買完成後可以立即開始觀看。
所有線上課程皆不受時間限制，享無限次永久觀看！
猜你喜歡
目前線上課程最完整的教學
希望能有更進階的課程能夠學習，例如 : 大型系統、20人以上團隊如何有效率搭配開發、設計稿轉RWD詳細教學......等等，很期待布魯斯未來的課程!
少數上完的線上課程
我自己買了三堂課，當作感謝老師在 Youtube 上無私的奉獻!!
小小許願，希望老師有空可以再開直播聊聊前端工作的生態!
推薦推薦
目前hiskio最完整react 教學
推
很實用的React的課程
用戶評價
購買前問答
HIHI ~ 課程都可以在 HiSKIO上永久觀看！
銷售方案
布魯斯的 TypeScript + React 全攻略｜快速打造仿 Instagram UI、實時聊天室