進度條

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

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

最後更新時間: 2023/01

Loading

特價 NT$: 4600

原價 NT$: 7200

優惠至:2024/12/15

課程包含:

終生於平台觀看 詳情

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.1小時)

React JS, ES6 與Webpack課程與編輯器介紹
keyboard_arrow_down
  • play_arrow

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

    07:45
  • play_arrow

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

    08:53
  • play_arrow

    03. 程式編輯器介紹

    05:02
  • play_arrow

    04. [VSCode] 介紹Visual Studio Code

    07:55
  • lock

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

    08:07
  • lock

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

    13:43
  • lock

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

    06:24
  • lock

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

    07:38

第二章 (總長9.5小時)

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

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

    14:22
  • lock

    02. HTML簡介與複習

    20:11
  • lock

    03. CSS簡介與Selector複習

    21:37
  • lock

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

    10:13
  • lock

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

    10:12
  • lock

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

    04:55
  • play_arrow

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

    19:33
  • lock

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

    06:23
  • lock

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

    07:00
  • lock

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

    11:48
  • lock

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

    14:01
  • play_arrow

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

    22:25
  • lock

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

    11:47
  • lock

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

    11:23
  • lock

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

    23:35
  • lock

    16. 函數function與變數範圍scope

    12:54
  • lock

    17. 完成基本的BMI頁面

    11:05
  • lock

    18. Array 陣列(一)

    09:00
  • lock

    19. While 與 For loop迴圈

    13:43
  • lock

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

    06:29
  • lock

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

    27:30
  • lock

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

    23:04
  • lock

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

    15:15
  • lock

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

    17:12
  • lock

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

    14:35
  • lock

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

    19:29
  • lock

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

    23:54
  • lock

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

    16:40
  • lock

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

    17:48
  • lock

    30. JavaScript 原型鏈與繼承

    23:50
  • lock

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

    27:42
  • lock

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

    14:45
  • lock

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

    17:39
  • lock

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

    28:16
  • lock

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

    18:57

第三章 (總長5.9小時)

開始使用JavaScript ES6吧!解決非同步問題的舊與新方法。
keyboard_arrow_down
  • play_arrow

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

    20:35
  • play_arrow

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

    10:17
  • lock

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

    12:13
  • lock

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

    15:40
  • lock

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

    21:31
  • lock

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

    11:32
  • lock

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

    15:20
  • lock

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

    12:12
  • lock

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

    16:53
  • lock

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

    10:33
  • lock

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

    16:04
  • lock

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

    15:14
  • lock

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

    17:34
  • lock

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

    01:35
  • lock

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

    10:54
  • lock

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

    12:37
  • lock

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

    10:40
  • lock

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

    19:14
  • lock

    19. ES6 Promise 的基本使用方式

    27:36
  • lock

    20. Promise all的使用方式

    09:39
  • lock

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

    13:35
  • lock

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

    15:11
  • lock

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

    15:53
  • lock

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

    23:17

第四章 (總長2.9小時)

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

    01. Nodejs 簡介

    05:04
  • play_arrow

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

    07:16
  • play_arrow

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

    05:43
  • lock

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

    20:05
  • lock

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

    12:50
  • lock

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

    09:22
  • lock

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

    06:46
  • lock

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

    04:25
  • lock

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

    13:47
  • lock

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

    19:04
  • lock

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

    16:09
  • lock

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

    13:46
  • lock

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

    16:41
  • lock

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

    10:03
  • lock

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

    11:06

第五章 (總長3.1小時)

React JS 基本語法
keyboard_arrow_down
  • play_arrow

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

    11:15
  • lock

    02. 編譯JSX與加入Chrome Extension debug

    06:20
  • play_arrow

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

    02:37
  • lock

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

    13:21
  • play_arrow

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

    16:38
  • lock

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

    14:44
  • lock

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

    16:53
  • play_arrow

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

    11:44
  • lock

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

    16:14
  • lock

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

    14:27
  • lock

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

    17:08
  • lock

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

    24:17
  • lock

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

    10:39
  • lock

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

    10:39

第六章 (總長1.1小時)

加入外觀樣式 - React + Google Material Components Web
keyboard_arrow_down
  • play_arrow

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

    05:49
  • lock

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

    08:10
  • lock

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

    07:02
  • lock

    04. 設定Card樣式

    08:59
  • lock

    05. Radio與Checkbox樣式套用與Workaround

    10:19
  • lock

    06. TextField與MaterialIcon圖示

    07:09
  • lock

    07. Select與Option套用

    13:50
  • lock

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

    07:14

第七章 (總長3.5小時)

ReactJS 的生命週期與非同步處理
keyboard_arrow_down
  • play_arrow

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

    18:56
  • lock

    02. import React 與 ReactDom 一起編譯

    04:34
  • lock

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

    15:25
  • lock

    04. React Lifecycle 整體順序簡介

    11:22
  • lock

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

    14:41
  • lock

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

    05:19
  • lock

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

    14:51
  • lock

    08. 建立頁面導覽條Nav

    09:53
  • lock

    09. 建立多個頁面

    04:45
  • lock

    10. 實現登入頁面

    10:40
  • lock

    11. 靠註冊事件整合狀態

    16:18
  • lock

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

    10:19
  • lock

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

    10:36
  • lock

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

    23:15
  • lock

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

    09:34
  • lock

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

    08:42
  • lock

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

    08:30
  • lock

    18. [UI] 加入Drawer

    04:42
  • lock

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

    06:00

第八章 (總長1.9小時)

React 與 Redux
keyboard_arrow_down
  • play_arrow

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

    18:49
  • lock

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

    04:46
  • lock

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

    21:08
  • lock

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

    17:29
  • lock

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

    10:52
  • lock

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

    14:14
  • lock

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

    15:37
  • lock

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

    11:08

第九章 (總長1.0小時)

Functional component 與 React Hooks 介紹
keyboard_arrow_down
  • lock

    01. Context的基本使用

    14:50
  • lock

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

    18:11
  • lock

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

    13:29
  • lock

    04. 簡介useEffect與useLayoutEffect

    10:30
  • lock

    05. useReducer的使用方式

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

第十章 (總長5.9小時)

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

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

    03:56
  • lock

    02. 讀取WooCommerce Rest API資料

    16:11
  • lock

    03. 建立Create React App專案

    05:30
  • lock

    04. NPM安裝WooCommerce rest api

    10:37
  • lock

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

    20:44
  • lock

    06. 設定Nav與Drawer

    10:56
  • lock

    07. 加入Routers

    05:37
  • lock

    08. 加入product service與product model

    16:33
  • lock

    09. 加入Grid Layout 於Product頁面

    12:31
  • lock

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

    10:27
  • lock

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

    11:46
  • lock

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

    10:17
  • lock

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

    08:58
  • lock

    14. 建立Cart Service 購物車

    17:26
  • lock

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

    21:37
  • lock

    16. 利用useContext抽出全域state

    10:53
  • lock

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

    20:43
  • lock

    18. 建立訂單

    16:08
  • lock

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

    06:34
  • lock

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

    11:58
  • lock

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

    13:34
  • lock

    22. 顧客註冊頁面

    07:21
  • lock

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

    15:10
  • lock

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

    13:39
  • lock

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

    10:40
  • lock

    26. 將Class Component改成Hooks

    23:30
  • lock

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

    18:56

課程講師

縱裕

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

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

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