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

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

開課時間

3/20 (六)、 3/27 (六)、 4/10 (六)、 4/17 (六)

10:00~17:00

6/27 (日)、7/4 (日)、7/11 (日)、7/18 (日)

10:00 - 17:00

這堂課適合

其它相關課程

你將會學到

  • React 的基礎觀念與設計邏輯。

  • React 元件系統。

  • ReactStorybook 整合。

  • React Hooks 完整應用與優化。

  • React Redux 管理狀態。

  • React Context 組件應⽤。

  • Webpack 基礎設定。

  • WebpackReact 整合。

課前準備

  • 需自備筆電,Mac / Windows 皆可。

  • 課程將會使用 Sublime Text 3 / VS Code 編輯器,建議同學可以先行安裝。

課程大綱

  • React 是什麼?

  • JSX 介紹

  • React Component

  • Props 與 State

  • State 和生命週期

  • 事件處理 Event handing

  • this 是什麼 Function context

  • 列表算繪 List rendering

  • 函式的自動綁定 Auto-binding

  • 元素的 key 與 ref

  • React Hook 概念

  • 常見 Hook 介紹與應用

  • TodoList 實作

  • 以 React Router 實作 SPA 網頁

  • Webpack + React 整合

  • React Redux 介紹

  • React 與 typescript 整合

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

  • 樣式組件:Styled Components

  • React Hook vs Component vs PureComponent 分析

課程內容

五倍紅寶石專業程式教育機構因應疫情發展,

🚨 實體教學課程落實社交距離注意事項:

1、每天都會要求學員量體溫、使用酒精消毒雙手

2、進入教室,也規定戴口罩;就算在用餐時,也會提醒同學盡量不要邊吃邊聊天

3、每場與課程相關的活動,都會要求填寫實名制健康聲明卡

4、學員下課後,會進行空間的次氯酸空氣消毒

5、每週都會安排漂白水、紫外線殺菌燈消毒

6、若有呼吸道疾病,或被政府匡列的接觸者,禁止進入教室,並可使用補課平台觀看線上補課

7、除上述之外,我們也全力配合政府防疫規定,讓每位學員都能在安心的環境學習

React 課程內頁 - 如果你是
React 課程內頁 - 講師入門

如果你是:

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

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

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

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

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

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

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


React 課程內頁 - 標題圖 - 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 來進行開發。


React 課程內頁 - 標題圖 -Webpack 5 入門 線上課程 加碼送
React 課程內頁 - Webpack Banner

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

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

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


React 課程內頁 - 標題圖 - React 課程內容

📘 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 分析

關於講師

廖珀均

React 講師

廖珀均 (奶綠茶)

資深前端開發者與程式開發講師,授課資歷十年以上。

擅長 HTML、CSS、JavaScript、jQuery、Vue、React 開發應用與 Webpack 前端打包工具等,專修各種前端跨平台的疑難雜症。

另一個身份為花鬍子樂團吉他手,育有二貓,喜愛小酌。

講師其他課程


他們都在五倍學習程式

來到五倍上課,技能樹點滿,奶綠茶老師教的內容超多超實用,解釋非常清楚!讓我帶回很多可以運用於職場上的能力。

謝錦祥

老師授課生動有趣,讓學習變得更有效率,循序漸進的學會 React,對之後的工作開發是有很大的幫助。

Kay

乃綠茶老師非常活潑,跟著他上課的步調超 High,但老師上課也絲毫不馬虎,我也從輕鬆的課堂氛圍學到很多專業的學問!

Mandy

立即報名

React 全攻略入門班

立即報名

點擊後選擇課程時間及付款方式。

組團報名享折扣

兩人同行 或 一次購買 2 堂課,享 9 折優惠

三人同行 或 一次購買 3 堂課,享 85 折優惠

更多團報或課程諮詢請洽 02-2331-5247

相關課程

立即報名