五倍紅寶石 ・專業程式教育機構

如果你是：

🧑‍💻 目前已經熟練 jQuery / JavaScript 的前端工程師，但遇到越來越大型的專案時，發現這樣的方式越來越難維護？

💭 想進入大型開發團隊的人，卻發現有很多公司 React 已經是基本配備了！

💻 好奇 React 為什麼會這麼深受許多公司歡迎呢？

😩 自學 React 卻發現 JSX / ES6 越學越搞混，到底什麼時候才能好好應用他呢？

不管你是在觀望 React 還是正在摸索 React 的新手，這門課絕對適合你！

想知道，為什麼相較於 Vue.js 的文件比較不是那麼直觀、門檻也相對較高一點，除了要基本 JavaScript ，你還需要了解 JSX / ES6 還有經常與 React 一同出現的好朋友 Webpack ，需要這麼多基礎的前端框架，卻是現行的國內外大公司如 Facebook / Netflix / Airbnb / Instagram 都愛用的前端框架？

就連台灣的前端職缺 (104 / Indeed / Yourator) 對於 React 的需求也仍是佔大多數。

🔹 Virtual DOM

像上述的公司都是對於使用者體驗相當注重，且需要處理極大的資料量；而 React 的強大特性就是使用 Virtual DOM 的方式，他可以同時處理大量資料，減少直接與瀏覽器的 DOM 溝通，讓 React 處理資料觸法，並將結果渲染再畫面上，這樣能大幅提升瀏覽器載入速度！

🔹 模組化開發

使用 React 的開發，前端的資料、UI、Function，都可以建立成 Component ，並透過資料觸發狀態、渲染畫面；這樣拆分的 Components 開發方式，讓維護上變得相對單純，不管是修改 UI 或 Function 都可以獨立做修改，而不互相影響。

🔹 強大的技術生態圈

React 是由 Facebook 團隊所開發維護的開源 JavaScript 網頁框架，擁有很好的延展性、豐富的開發輔助工具和周邊函式庫。

除此之外網路上也有針對 React 製作的 Design System 像是 Ant Design / Material-UI / Carbon 讓開發者可以快速建立畫面。

🔹 創新技術

除了上述 Virtual DOM 的技術外，React 還使用到 JSX / ES6 等語法，讓你掌握到最新的技術。

🔹 Learn Once, Write Anywhere

你只需要學習一次，就可以應用在任何地方，不管是現行的專案或甚至同時開發手機 ios / Android App 、桌面應用程式開發，都可以使用 React 來進行開發。

Webpack 是一個打包工具，他可以將 .pug / .sass / .js / .png / .jpg 等各式檔案，編譯並且打包，使得瀏覽器可以閱讀、同時開發者能夠運用框架來進行開發，算是現代前端不得不了解的工具！

📣 現在報名 React 全攻略入門班

加碼送 👉👉 Webpack 5 入門 線上課程

📘 Day 1

• React JSX 語法

• React Component

• 組件屬性 Props 與 State

• 事件處理 Event handling

• 自訂函式 Custom method

• 更新狀態 setState

• 列表算繪 List rendering

📘 Day 2

• React Hook 基礎⽤法與實戰

• 生命週期 Life-cycle

• this 是什麼 Function context

• 函式的自動綁定 Auto-binding

• 元素的 key 與 ref

📘 Day 3

• Webpack + React 整合

• TodoList 實戰

• React Router

• 以 React Router 實作 SPA 網頁

📘 Day 4

• 狀態管理：React Redux

• Context 與客製化組件

• React 與 typescript 整合

• 全域狀態管理的實作練習

• 樣式組件：Styled Components

• React Hook vs Component vs PureComponent 分析