React 全攻略 - 入門到進階
自學 React 遇到卡關？由淺入深打好你的 React 硬技能！
讓你打好 React 基礎，成為一個更扎實的 React 前端工程師。
學過 Vue.js 或 Angular 的前端好手，想要入手 React 該如何快速上手？
想透過 React 幫助你提升開發能力、精進 JavaScript 能力。
課程特色
你有 React 開發經驗或是自學 React 的經驗嗎？
是否有也遇到以下問題：
🔍 React Hooks 如何管理或是運作？
🔍 如何優化 Components 效能？
🔍 多人開發專案時，如何有效地管理 Components？
🔍 什麼是 useContext Hook？什麼情境下使用？
🔍 React 的開發團隊是如何協作？開發上有什麼細節需要留意？
🧑💻 👩💻 如果你是 ....
⚡ React 入門新手，想要學習扎實的 React 技術，不想成為雷隊友。
⚡ 花很多時間自學 React 但一直缺乏練習機會，這門課將有大量的作業練習，遇到問題立即問老師。
這門課將由淺入深，奶綠茶老師將透過包含 50+ 份示範程式檔案，從最基礎的 React Components 如何撰寫 、Props 傳遞機制等，分享 React 核心語法；還有 Typescript 、styled-components 、Tailwind CSS、Redux 等更進階的實戰應用。
除了 React 基本開發語法外，歷屆學員收穫回饋最多的是聽到老師在課堂上分享：
🤔 使用 React 的開發團隊工作中如何協作？
🤔 或是當 React 專案發展到一定程度時如何透過 TypeScript 有效管理資料型別？
🤔 React Components 哪些判斷或撰寫模式好讓團隊快速理解和維護？
等開發團隊會遇到的實際問題，這些經驗分享都是書籍、線上課程很少看到的。
除了 React 技術外，現在只要報名 React 課程就送 Webpack 5 線上課程！
讓你上課後還能學習 Webpack 5 打包工具，幫助你將常用的樣板語言、格式打包，部署到網站上！
Webpack 是一個打包工具，他可以將 .pug / .sass / .js / .png / .jpg 等各式檔案，編譯並且打包，使得瀏覽器可以閱讀、同時開發者能夠運用框架來進行開發，算是現代前端不得不了解的工具！
📣 現在報名 React 全攻略入門班
加碼送 👉👉 Webpack 5 入門 線上課程
🛎 課程提醒，這堂課不會教：
HTML/CSS 網頁架構與知識：
這門課不會解釋 HTML/CSS 等網頁架構等 。
如果你尚未有這些知識，歡迎參考：
我們的課程：網頁前端設計女性專班
線上資源：學習該如何開發 Web 入門
JavaScript 教學 & ES6 完整教學：
這堂課會簡介 React 當中常見的 JavaScript ES6 用法與需要留意的細節，但不會花大篇幅講解 JavaScript ES5 和 ES6 差異、如何撰寫等。
建議在進入本課程前需要具備 JavaScript 一些基礎知識，如 ：
想要學習 JavaScript 歡迎參考：
適合對象
👩💻 🧑💻 如果你是....
想透過 React 更精進 JavaScript 技術，更著迷使用 JavaScript 開發的前端工程師。
有過 Vue.js 或 Angular 的開發經驗，想要⚡ 點滿前端框架的朋友！
有過 React 自學經驗，想要了解核心技術，打好觀念基礎的開發者。
想了解 React 開發團隊如何合作與管理的開發者。
上過課的同學怎麼說︖
老師除了講解各式範例還有提供課後練習，實際動手寫之後再詢問老師問題更了解自己不足的地方，也因為上課才知道需要補充什麼知識是前端必備技能，十分有收穫。
2021/06 月班 學員
謝謝老師開這門課，雖然沒辦法馬上於課堂中提出問題，但是聽老師講解程式和解答同學問題時，都能聽到老師分享設計概念和考量的地方，這都是線上課程比較聽不到的，受益良多，謝謝。
2021/06 月班 學員
所學到的知識皆有嘗試應用在每週作業上，有問題也會發問，學到不少實務上的作法和觀念。
2021/06 月班 學員
謝謝老師分享許多實務上的經驗，以及耐心回答我的提問，非常感恩。
2021/06 月班 學員
老師教學很棒，除了課程內容之外，得到了很多前端要注意的眉眉角角，算是意外的收穫。
2021/06 月班學員
來到五倍上課，技能樹點滿，奶綠茶老師教的內容超多超實用，解釋非常清楚！讓我帶回很多可以運用於職場上的能力。
謝錦祥
老師授課生動有趣，讓學習變得更有效率，循序漸進的學會 React，對之後的工作開發是有很大的幫助。
Kay
乃綠茶老師非常活潑，跟著他上課的步調超 High，但老師上課也絲毫不馬虎，我也從輕鬆的課堂氛圍學到很多專業的學問！
Mandy
課程大綱
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 分析
扎實課程搶先看
📘 React 基礎觀念與 Components
JSX 語法介紹
Components 與 Props
status 與生命週期又是什麼？
如何綁定事件 Event handing
列表算繪 List rendering
styled components 示範
📘 React Hooks 基礎用法
常見的 React Hooks 用法：useState, useEffect 等
📘 React 實作
用 TodoList 示範：
Components 狀態更新：新增項目、刪除與更新
api 串接
渲染效能優化
更多內容將在課程內開箱 🗃
useRef 與 React Form
React with TailwindCSS / emotion
useReducer 實作
以 React Router 實作 SPA 網站
Webpack + React
📘 React 進階實務狀態管理
狀態管理：React Redux 使用
Context 客製化組件
Typescript 整合
Storybook 簡介
Testing 撰寫範例
React Hook vs Component vs PureComponent 分析
五倍紅寶石專業程式教育機構因應疫情發展，
🚨 實體教學課程落實社交距離注意事項：
- 每天都會要求學員量體溫、使用酒精消毒雙手
- 進入教室，建議配戴口罩；就算在用餐時，也請同學盡量不要邊吃邊聊天
- 學員下課後，會進行空間的次氯酸空氣消毒
- 每週都會安排漂白水、紫外線殺菌燈消毒
- 若有呼吸道疾病，或被政府匡列的接觸者，禁止進入教室
- 除上述之外，我們也全力配合政府防疫規定，讓每位學員都能在安心的環境學習
立即報名
React 全攻略 - 入門到進階
課程類別與程度
前端課程進階課程近期開課時間
2023 / 4 月班
課程已結束4/9 (日)、4/16 (日)、4/23 (日)、4/30 (日)
10:00~17:00
2023 / 7 月班
7/1（六）、7/8（六）、7/15（六）、7/22（六）
10:00~17:00
限時優惠價
NT$ 14,400
點擊後選擇課程時間。
組團報名享折扣
兩人同行 或 一次購買 2 堂課，享 9 折優惠
三人同行 或 一次購買 3 堂課，享 85 折優惠
更多團報或課程諮詢請洽 02-2331-5247
五倍紅寶⽯課程提供
結業證書
課程結業證書證明
課程討論群組
共同討論課程群組，
老師同學即時交流
wifi
備有插座及快速穩定
免費 wifi 連線操作
線上補課
線上補課，
不怕跟不上進度！
默默會
每週二獨家默默會
讓你問題問到飽
業界高手一同交流
吉祥物貓貓
吉祥物貓貓加持