ProgressBar

線上程式教學課程: ES6,ReactJS與Webpack，前端JavaScript全攻略

React JS是近年來最流行的前端框架之一，適合初學至中階前端開發者學習，本課程會「從零開始教學」，藉此了解新舊技術的關聯性而非盲目背誦，並以範例教學，讓初學者也可以成長至接手專案開發。

最後更新時間： 2023/5/29

售價 NT$: 7200

課程包含:

平台營運期間皆可觀看 詳情

10個章節，163堂影片

35 小時以上的課程時間

本課程未在其他平台上架。


信用卡、超商、ATM、Paypal皆可付款

3、6期信用卡付款零利率 查看支援銀行

(信用卡不留卡號，Paypal需非台灣)

課程敘述

React JS是近年來最流行的前端框架之一，由臉書Facebook公司所製作並且以免費商用開源的方式開放使用(MIT 授權)。

 

ReactJS主要的用途相當的多元，常見的主要用途是以模組化的方式完成整個網頁並且產生出互動性極佳的Single Page Application(單頁面應用程式 - SPA)。讓使用者在執行各種網頁功能的時候不會因為跳頁的關係而影響使用者體驗。

 

ReactJS的開發方式相當適合大型的網頁應用程式，同時也因為模組化的特性讓小功能也可以個別的使用。在更新已存在的網站頁面的時候也不需要整個網站拆掉全部重建。所以即使要跟Ruby on Rails 、Laravel 或是 WordPress...等已經存在後端架構的程式合併使用是完全沒有問題的。當然，混合使用是一種方式，現在有規模公司所流行的前後端完全分離式開發方式更是React JS的強項之一。

 

React JS中的JS指的是JavaScript，目前JavaScript廣為流通的版本為所有網頁瀏覽器所接受的ES5版本與前端開發者所使用的下一版本ES6版。學習此課程不需要任何的程式基礎，會從最基本的JavaScript ES5開始進行，先讓學生了解最基本的網頁開發邏輯與規則。接著進入JavaScript ES6的語法教學讓學生熟悉語法為React JS做準備。

 

進入React JS後會以小型範例為每章節的總結，讓學生比較容易了解自己學習的內容與真實專案之間的關係。React JS相關章節主要分成基本的語法教學，以及進階的語法與相關的熱門函式庫。除了基本語法之外，每種進階的語法與函式庫都會由前面章節碰到的問題來切入，避免學習了一堆功能卻只能換來一本筆記的窘境。

 

課程中也會有獨立章節來介紹目前最流行的模組打包工具webpack，相關的設定總是讓初學者頭痛最後只能複製貼上。此章節看完至少可以了解自己在做什麼而非只是在操作個黑盒子。

 

最後雖然不包含在課程中，但是React JS也可以配合React Native來製作跨平台手機程式或是配合Electron函式庫製作出跨平台的電腦桌面應用程式。甚至使用來做成軟體即服務(SaaS)或是WordPress Plugin也是大有人在。



【特別優惠】如果跟已經完成的HTML / CSS / JavaScript / jQuery 和 Git 課程一起購買可以享額外特價喔！ 如果是已經購買過這些課程的也可以得到特價！
前端JavaScripts初中階組合 + 版本管理

 

同時我們也有包含後端基礎的組合課程，讓你前後端同時學習到位喔！

React JavaScript ES6 Webpack + Laravel 前端進階＋後端課程

 

如果對轉職有興趣，可以參考這篇文章喔：

什麼是前端工程師(Front end Developer)？要成為前端工程師要學習什麼樣的技術呢？

課程難度

入門，此課程不需任何程式經驗。

請參閱課程需求

課程需求

1. 有一台電腦(Windows & MacOS皆可)

2. 對架設網站有興趣

3. 有一顆不畏懼艱難的心

 

 

最後範例章節【用React Hooks建立完整SPA購物網站 - 以WooCommerce為後台】中雖然使用到WordPress與WooCommerce做為 Web API 後台，但是不需要事先了解相關的使用方式，課程有用到的操作都有錄影示範。

不過如果對完整的React + WordPress商業解決方案有興趣的話(多以小型專案為主，適合接案)，也相當歡迎各位參加WordPress課程(但是跟「前端工程」沒有關係)。

 

課程目標

1. 學習使用已經普及的JavaScript ES5版本的語法

2. 學習使用即將要相容於下一代瀏覽器的ES6版本的語法

3. 學習如何與何時使用React JS

4. React JS在真實專案上的使用模式

 

課程特點

並不會一昧的追求最新的技術，業界需要的是穩定的技術。

從基本開始，從零開始詳細解說JavaScript最基礎的部分。

並且利用每階段所學的技術實作專案，並且講解優缺點以此引導帶入至下一章。

瞭解問題，以此找到工具，就不會因為都在背誦而導致真實專案有變化後什麼都不會。

 

第一章 (總長 1 小時，8 支影片)

React JS, ES6 與Webpack課程與編輯器介紹
▼
  • ▶

    01. React JS, ES6 與Webpack課程介紹

    07:45
  • ▶

    02. 我是新手 我該從HTML還是JavaScript開始學習

    08:53
  • ▶

    03. 程式編輯器介紹

    05:02
  • ▶

    04. [VSCode] 介紹Visual Studio Code

    07:55
  • 🔒

    05. [VSCode][Windows] 安裝Visual Studio Code與建立第一個檔案

    08:07
  • 🔒

    06. [VSCode][Mac]安裝Visual Studio Code與建立第一個檔案(加上Command Line設定)

    13:43
  • 🔒

    07. [VSCode] 開啟資料夾與放大縮小編輯器文字

    06:24
  • 🔒

    08. [VSCode] 安裝Extension去實現網頁Live Preview

    07:38

第二章 (總長 9 小時，35 支影片)

新手或複習，你不能不知道的JavaScript ES5的物件與範疇(this, Object, Scope 與 Closure)
▼
  • ▶

    01. 瀏覽器與網頁組成簡介，前端開發網頁是在做什麼

    14:22
  • 🔒

    02. HTML簡介與複習

    20:11
  • 🔒

    03. CSS簡介與Selector複習

    21:37
  • 🔒

    04. 引入外部CSS樣式，以Bootstrap為例

    10:13
  • 🔒

    05. JavaScript與HTML的關係, document.write 內建函數的使用

    10:12
  • 🔒

    06. JavaScript, HTML, CSS的註解與差異(comment out)

    04:55
  • ▶

    07. 初探變數與賦予值(var, assignment), 寫程式需要數學很好嗎?

    19:33
  • 🔒

    08. 變數命名法(Camel case, Snake case, Pascal case)

    06:23
  • 🔒

    09. [進階] 初探變數拉升(Hoisting)

    07:00
  • 🔒

    10. 加減乘除與先後順序, 完成BMI算式

    11:48
  • 🔒

    11. JavaScript的型態簡介, 認識型態可能造成的麻煩(typeof)

    14:01
  • ▶

    12. 字串最常見的用途，輸入即改變的網頁Input實作 (getElementById 選擇器)

    22:25
  • 🔒

    13. 字串與雙引號，跳脫字元與分行問題

    11:47
  • 🔒

    14. 條件判斷與布林值(if-else, else if, true, false)

    11:23
  • 🔒

    15. 布林值與比較運算子和邏輯運算子

    23:35
  • 🔒

    16. 函數function與變數範圍scope

    12:54
  • 🔒

    17. 完成基本的BMI頁面

    11:05
  • 🔒

    18. Array 陣列(一)

    09:00
  • 🔒

    19. While 與 For loop迴圈

    13:43
  • 🔒

    20. 遞增運算子與遞減運算子，ES5的次方函數

    06:29
  • 🔒

    21. 利用Array畫出Table表格，簡易學生成績表

    27:30
  • 🔒

    22. Object 物件(一), 利用key-value概念來儲存資料

    23:04
  • 🔒

    23. Object 物件(二), 物件的一些使用細節

    15:15
  • 🔒

    24. 建立簡易登入頁面, 及時提醒使用者格式輸入錯誤

    17:12
  • 🔒

    25. 建立簡易註冊頁面, 製作相似頁面共用函式庫碰到的問題(獨立js檔案)

    14:35
  • 🔒

    26. 初探this, 為何我們需要bind(this)

    19:29
  • 🔒

    27. 全域變數的不定性風險, 如何使用Object避免他人程式造成的影響

    23:54
  • 🔒

    28. ES5的類似Class的寫法, 關鍵字new 所表示的意思

    16:40
  • 🔒

    29. Closure閉包介紹與使用方式, 以及閉包跟Memory leak之間的關係

    17:48
  • 🔒

    30. JavaScript 原型鏈與繼承

    23:50
  • 🔒

    31. 製作有效可以繼承Class前準備, 解決物件內部相依性問題1

    27:42
  • 🔒

    32. 製作ES5類似Class, 解決物件內部相依性問題2

    14:45
  • 🔒

    33. 整理程式碼, 顯現繼承的威力

    17:39
  • 🔒

    34. 初探正規表示法Regular expressions(Regex, exec, test, match)

    28:16
  • 🔒

    35. 完成簡易註冊頁面正規表示法驗證

    18:57

第三章 (總長 5 小時，24 支影片)

開始使用JavaScript ES6吧！解決非同步問題的舊與新方法。
▼
  • ▶

    01. EcmaScript 2015 ES6與之後的版本相容性介紹，為什麼我們會需要Babel編譯

    20:35
  • ▶

    02. const 與 let的使用, 認識var所帶來的問題

    10:17
  • 🔒

    03. scope範圍對ES5與ES6 function的影響

    12:13
  • 🔒

    04. 初探箭頭函數(arrow function), 與forEach和map的共同運用

    15:40
  • 🔒

    05. [補充] 自製包含callback的函式function

    21:31
  • 🔒

    06. 剩餘參數Rest parameter與它適合應用的場合( spread 展開運算子 )

    11:32
  • 🔒

    07. 字串嵌入變數與字串的組成

    15:20
  • 🔒

    08. ES6 Class、繼承概念與setter, getter

    12:12
  • 🔒

    09. 陣列(Array)解構與實例

    16:53
  • 🔒

    10. 物件(Object)解構與實例

    10:33
  • 🔒

    11. ES6 module, import, export class 基本語法與不編譯會有的問題(script type module)

    16:04
  • 🔒

    12. 詳解 import, export, default語法以及與物件解構的關係

    15:14
  • 🔒

    13. 使用Webpack與babel編譯ES6程式解決連線過多問題與相容性問題

    17:34
  • 🔒

    14. 這支影片後可先跳至React基本章節或繼續進行ES6皆可

    01:35
  • 🔒

    15. HTML Script async 與 defer 的非同步使用

    10:54
  • 🔒

    16. [補充] Asynchronous異步(非同步)與Parallel平行處理之間的差異

    12:37
  • 🔒

    17. JavaScript單執行緒中Asynchronous非同步(異步)的排程順序

    10:40
  • 🔒

    18. 常見不使用Promise的非同步處理方式

    19:14
  • 🔒

    19. ES6 Promise 的基本使用方式

    27:36
  • 🔒

    20. Promise all的使用方式

    09:39
  • 🔒

    21. 初探或複習XMLHttpRequest AJAX, 改寫成Promise版本

    13:35
  • 🔒

    22. ES7 Fetch與Promise catch的順序邏輯問題

    15:11
  • 🔒

    23. Fetch post 的參數設定與throw Error的用處

    15:53
  • 🔒

    24. ES7 async與await, 用fetch來實作練習

    23:17

第四章 (總長 2 小時，15 支影片)

初探Webpack - 編譯你的程式碼讓所有瀏覽器都能用
▼
  • ▶

    01. Nodejs 簡介

    05:04
  • ▶

    02. [Windows] 安裝Node.js與npm

    07:16
  • ▶

    03. [MacOS] 安裝Node.js與npm

    05:43
  • 🔒

    04. 利用babel了解npm的使用與module安裝方式

    20:05
  • 🔒

    05. 利用babel來了解npm module內部串聯的關係

    12:50
  • 🔒

    06. 利用npm去編譯Sass指令與watch模式

    09:22
  • 🔒

    07. [Windows] npm多重編譯器同時監聽方法

    06:46
  • 🔒

    08. [MacOS] npm多重編譯器同時監聽方法

    04:25
  • 🔒

    09. 安裝與設定Webpack, 利用babel loader編譯成ES5程式

    13:47
  • 🔒

    10. 介紹webpack loader 與 mode 用途, 利用loader設定取代.babelrc功能

    19:04
  • 🔒

    11. 使用webpack編譯sass(scss)檔, 介紹style-loader, css-loader, file-loader, sass-loader的基本使用

    16:09
  • 🔒

    12. 使用webpack與babel編譯React JS程式

    13:46
  • 🔒

    13. 加入Polyfill編譯讓IE也能運行ES6, ES7(babel, core-js@3, whatwg-fetch)

    16:41
  • 🔒

    14. 使用MiniCssExtractPlugin壓縮css, sass與js檔

    10:03
  • 🔒

    15. 環境變數與參數, 針對不同mode設定不同config

    11:06

第五章 (總長 3 小時，14 支影片)

React JS 基本語法
▼
  • ▶

    01. 建立基本開發環境與使用React.js寫出Hello World

    11:15
  • 🔒

    02. 編譯JSX與加入Chrome Extension debug

    06:20
  • ▶

    03. 介紹第一個小專案, 地址選擇器

    02:37
  • 🔒

    04. 介紹React與ReactDOM的用途, 實作簡易虛擬DOM

    13:21
  • ▶

    05. React Component(元件)介紹與初探props

    16:38
  • 🔒

    06. 初探state(狀態), 利用input改變數值重新繪製UI

    14:44
  • 🔒

    07. state與props的用途, 一些常見的ES6參數傳遞寫法

    16:53
  • ▶

    08. 改寫ES5語法成React, 輸入即改變的網頁Input實作

    11:44
  • 🔒

    09. 地址選擇器(一), select, option輸入的使用與map和key的解說

    16:14
  • 🔒

    10. 地址選擇器(二), 資料間顯示互動

    14:27
  • 🔒

    11. 地址選擇器(三), input radio 與 checkbox 的使用

    17:08
  • 🔒

    12. 地址選擇器(四), 巢狀資料更新, 解決每個元件都用state的無效率情況

    24:17
  • 🔒

    13. input radio 與 checkbox中的checked與defaultChecked的差異

    10:39
  • 🔒

    14. inline style的使用介紹與className隨著state做切換

    10:39

第六章 (總長 1 小時，8 支影片)

加入外觀樣式 - React + Google Material Components Web
▼
  • ▶

    01. 加入外觀樣式 - Google Material Components Web React 介紹

    05:49
  • 🔒

    02. 設定material-components-web 與加入Button樣式

    08:10
  • 🔒

    03. 補充說明, 關於CDN URL的調整

    07:02
  • 🔒

    04. 設定Card樣式

    08:59
  • 🔒

    05. Radio與Checkbox樣式套用與Workaround

    10:19
  • 🔒

    06. TextField與MaterialIcon圖示

    07:09
  • 🔒

    07. Select與Option套用

    13:50
  • 🔒

    08. Layout Grid 響應式格狀系統套用

    07:14

第七章 (總長 3 小時，19 支影片)

ReactJS 的生命週期與非同步處理
▼
  • ▶

    01. Function Component 函數元件介紹與實作(或稱 Stateless Component 無狀態元件)

    18:56
  • 🔒

    02. import React 與 ReactDom 一起編譯

    04:34
  • 🔒

    03. Ref, 原生DOM API和Lifecycle的關係

    15:25
  • 🔒

    04. React Lifecycle 整體順序簡介

    11:22
  • 🔒

    05. Ajax與常見的promise順序錯誤所造成的重複render效能問題componentDidMount, fetch)

    14:41
  • 🔒

    06. 利用timer製作簡易讀取動畫(componentWillUnmount)

    05:19
  • 🔒

    07. 改用async與await, 抽出獨立data service

    14:51
  • 🔒

    08. 建立頁面導覽條Nav

    09:53
  • 🔒

    09. 建立多個頁面

    04:45
  • 🔒

    10. 實現登入頁面

    10:40
  • 🔒

    11. 靠註冊事件整合狀態

    16:18
  • 🔒

    12. 利用shouldComponentUpdate 避免不必要的重繪製

    10:19
  • 🔒

    13. Single Page Application 初探單頁面應用(SPA)

    10:36
  • 🔒

    14. React Router 基本功能介紹與SPA部署注意事項

    23:15
  • 🔒

    15. 將專案改為用React Router實現

    09:34
  • 🔒

    16. 將Nav從Router獨立出來(React.Fragment, props.children)

    08:42
  • 🔒

    17. [UI] 加入Google Material Components Web React 與 Top App bar

    08:30
  • 🔒

    18. [UI] 加入Drawer

    04:42
  • 🔒

    19. 接下來移至購物範例章節

    06:00

第八章 (總長 1 小時，8 支影片)

React 與 Redux
▼
  • ▶

    01. Redux簡介與自建簡易版本的createStore來練習

    18:49
  • 🔒

    02. 用Redux配合React開發的原因, 安裝React-redux

    04:46
  • 🔒

    03. 詳細介紹react-redux基本步驟

    21:08
  • 🔒

    04. 整理Redux程式, 了解各部分用途與名詞

    17:29
  • 🔒

    05. 簡介Redux原始碼, 了解Provider與connect基本運作邏輯

    10:52
  • 🔒

    06. 改變地址選擇器範例成使用Redux(一)

    14:14
  • 🔒

    07. 改變地址選擇器範例成使用Redux(二)

    15:37
  • 🔒

    08. 改變地址選擇器範例成使用Redux(三)

    11:08

第九章 (總長 1 小時，5 支影片)章節未完結

Functional component 與 React Hooks 介紹
▼
  • 🔒

    01. Context的基本使用

    14:50
  • 🔒

    02. 利用HOC概念的改善Context程式

    18:11
  • 🔒

    03. 初探React Hooks, 使用useState與useContext

    13:29
  • 🔒

    04. 簡介useEffect與useLayoutEffect

    10:30
  • 🔒

    05. useReducer的使用方式

    05:21
  • 章節尚未完全完結，我們會持續更新!!

第十章 (總長 5 小時，27 支影片)

用React Hooks建立完整SPA購物網站 - 以WooCommerce為後台
▼
  • ▶

    01. React 課程最終範例介紹 - 用Hooks建立以WooCommerce為後臺的單頁面SPA網站

    03:56
  • 🔒

    02. 讀取WooCommerce Rest API資料

    16:11
  • 🔒

    03. 建立Create React App專案

    05:30
  • 🔒

    04. NPM安裝WooCommerce rest api

    10:37
  • 🔒

    05. [補充] 自製Oauth Fetch連線

    20:44
  • 🔒

    06. 設定Nav與Drawer

    10:56
  • 🔒

    07. 加入Routers

    05:37
  • 🔒

    08. 加入product service與product model

    16:33
  • 🔒

    09. 加入Grid Layout 於Product頁面

    12:31
  • 🔒

    10. API資料顯示與注意事項

    10:27
  • 🔒

    11. 用useRef與useCallback紀錄個別元件狀態

    11:46
  • 🔒

    12. 建立Product頁面(一), Rediection 與 useMemo

    10:17
  • 🔒

    13. 建立Product頁面(二), 完成UI

    08:58
  • 🔒

    14. 建立Cart Service 購物車

    17:26
  • 🔒

    15. 顯示購物車內容於Nav導覽條上

    21:37
  • 🔒

    16. 利用useContext抽出全域state

    10:53
  • 🔒

    17. 完成購物車結帳前頁面

    20:43
  • 🔒

    18. 建立訂單

    16:08
  • 🔒

    19. 訂單建立成功與失敗頁面

    06:34
  • 🔒

    20. 顯示所有訂單與獨立訂單

    11:58
  • 🔒

    21. 顧客登入頁面與全域狀態

    13:34
  • 🔒

    22. 顧客註冊頁面

    07:21
  • 🔒

    23. 帶入使用者管理頁面顯示

    15:10
  • 🔒

    24. 商品搜尋過濾(包含價錢與類別Category)

    13:39
  • 🔒

    25. 移植地址編輯器(加入Class Component於Hooks)

    10:40
  • 🔒

    26. 將Class Component改成Hooks

    23:30
  • 🔒

    27. 加入運費與付款方式完成專案

    18:56

課程講師

縱裕

縱裕

iOS 工程師 / Ruby On Rails 網站工程師

現職為iOS 工程師，但同時也在鑽研網站技術並且建立多個網站。
曾協助多個新創公司，範圍包含網站前端到桌面應用程式倉存管理與電子機關互動。
從網站架設，手機APP到系統底層都有豐富的經驗。
擅長不同系統架構的整合與創新想法的實現。

經歷：
進度條 技術顧問
Digilog.tw 網站與倉庫後台程式架構設計與建置
Zooe 線上教學平台 網站架構設計與建置
HelloStudy 楓禾留遊學網 設計與建置
Funlock 放樂工作室真實密室逃脫遊戲  - 魔鏡迷城 電子機關設計與製作
iOS App - Rock Click 節拍器
Nexcom ARM韌體與軟體工程師
Insyde BIOS工程師