ReactJS ES6 完全攻略

從入門到業界實務,完整學會最新的 JavaScript ES6 版本,和最熱門的 React,讓您快步跟進下一個十年的技術潮流。

100 %
897 人
教師: 彭彭
NT$ 1649
NT$ 4500 3.6折
  • 課程水平 中階
  • 使用語言 中文
  • 總節數 65
  • 時數 7小時41分
  • 39 支影片
  • 15 篇文章
  • 11 道練習題
  • 無限次觀看
  • 課程新增不額外收費

課程介紹

只會 jQuery 嗎?想進的公司須要懂 React 怎麼辦?

jQuery 是目前許多前端工程師的必備工具,但於中大型專案的開發上,容易產生不易管理(麵條式寫法)及效能降低的缺點。在依賴 DOM 的狀況下。一旦頁面結構發生改變,許多內容必須跟著改動,這是很痛苦的事!


如果您對「JavaScript 動態網頁」開發的知識相對少,對資料傳遞、框架觀念還不甚了解,React 將會是您值得投資的一項新武器! 而目前 React 也受到大量關注與企業採用,並出現在許多職缺的徵才條件內,早早熟悉絕對是正確的選擇!


『再打更具體一點的比方,如果要實作一個網頁版的 Skype,您會用 React,而不會是 jQuery!』趁這個機會,從「切版工人」進化成「前端工程師」吧!



 

這堂課如何運作 ?  如何保障您的升級狀況 ?

這堂課用 3 招讓您技術升級更有保障, 獲得不同於一般課程的新體驗 ! 學習超有感。

 

第 1 招 線上扎實課程 - 自由學習不用萬元

一次預購,永久體驗,居然只要 $1799

透過本堂課的線上影音、線上練習、以及各種補充資源充分學習。您可以自由掌握進度,無限次觀看複習,課程也會不定期作更新和增強。

第 2 招 線上直播討論會+主題講座

購課後全部免費

您以為看完線上就結束了嗎 ? 不是這樣的 !


老師將根據課程進度訂定不同主題的討論會,解決同學問題,並分享更多經驗與技巧。持續帶給您更多有價值的內容,直到您真正學會,不再需要這些輔助。

第 3 招 實體主題講座(台北市)

購課後全部免費

只要是老師的學生,就是一輩子的朋友,參與老師的特定實體講座,全部免費 ! 這樣做雖然有點瘋狂...,但我們願意嘗試給學生更不一樣的體驗 ! 只為讓您順利升級 !

有任何購課上的疑問歡迎前往課程問與答提出問題!

 

直播與實體講座菜單

為了加強學習效果,同時也考量了太過密集的時程可能會讓同學無法吸收。以下是規劃的時程跟主題。若有任何想法也歡迎提出喔!

請加入 Taiwan 程式直播講堂 社團收看直播講座!

P.S 線上直播皆會有錄影喔!不用怕錯過精彩內容

 

- 直播 - 106年度

 

106/10/23 - 箭頭函式中的魔鬼細節 - (課程錄影處理中)

106/11/13 - 閉包 (Closure) 與 let 的關鍵時機 - (課程錄影處理中)

106/12/04 - 原型鍊再聊一百次都值得!

106/12/18 - 邁向全端:Node.js 伺服器環境建置

時間待定 - 主題待定

時間待定 - 主題待定

......

- 台北實體講座 - 107年度

 

時間待定 - 彭彭的十二年前端開發之路 * 分享與問答

時間待定 - 主題待定

時間待定 - 主題待定

......


為什麼學習 ES6 和 React? 

1. JavaScript ES6 將是下一個十年,網頁前端工程的主流規格


JavaScript 是最受歡迎的程式語言之一,近幾年更做了大幅度的翻新,最新的 JavaScript ECMAScript 第六版 ( 簡稱 ES6 ) 語法比起以往更為強大、簡潔,這堂課協助已經學過 JavaScript 基礎的朋友,升級程式開發技能至 ES6 的最新版本。讓您準備好面對未來的挑戰,立於不敗之地!儘早學習、提前投資絕對是對的選擇!

// ES6 到底如何正確運用呢?讓我們繼續看下去
var New = '更簡潔'
let New = '更強大'
const New = '新規格' 
 
上課不廢話,給您更多Coding 細節與範例程式
// 經典關於閉包的範例,該怎麼更新成 ES6 讓他更簡潔呢?

for (var i = 0; i <= 3; i++) {
  Time(i);
}

function Time(i) {
  setTimeout(function() {
    alert(i);
  }, i * 1000);
}
 
2. React 已是許多公司對外徵才的「加分條件」


React.js 則是由 Facebook 團隊所開發維護的重量級框架,它的模組化設計、生命週期管理和優秀的效能、延展性,都是許多一流企業,包括 Facebook、Netflix、Instagram、Atlassian 等等選擇以 React.js 當核心架構的理由,也是目前台灣業界受歡迎的前端框架之一,許多公司爭相導入內部開發使用,並列為對外徵才加分條件!

 

 

React 本身的優勢 :

  1. 學會了 React 以及 JSX 語法,您可以通過 React 寫 Web,也可以寫 IOS 或者 Android 應用程式、視覺化應用程式、桌面應用程式。
  2. 回到 Web 應用上的 React,React 擁有 Virtual DOM,能夠減少操作,提高效能,讓您能專注於 UI 設計!
  3. 易於維護,修改較快速!
  4. 由 Facebook 開發維護,具備未來性與擴展性,不會隨意消失、停止更新。
  5. 目前許多公司已導入作為專案主要前端框架。

 

我只懂 JS 基礎和一點點 JQuery。適合學嗎?

完全適合!這堂課將從最基礎的 JavaScript ES6 語法開始教學,只要您具備原生 JS 基礎概念,並且想要系統化學習最新、最熱門前端工程技術,這門課正是為您而設!

不用擔心目前還看不懂一些名詞包括 JSX、Babel、Redux ... 等等的概念和工具。這門課將有方向地、有重點地教給您!讓您的技術快速從「古代」升級至「現代」!

 

還沒學過JS嗎 ? 參考這堂課吧 ! 

 

學新技術時常見的痛...

  1. 課程好貴 ... 不然就只是幾小時 WorkShop,幫助不大。
  2. 網路自學,似懂非懂也不會實際運用。
  3. 觀念混淆,升級速度慢、瓶頸超多。
  4. 知識東拼西湊,學不完整。
  5. 上班上不完,沒完整時間學。
  6. 遇到問題,Google 找不到答案,英文也看不太懂 ...

 

豈止無痛,這堂課一次解決這些問題!

1.一站式學習,鉅細靡遺,課程以「最完整」為目標。

 

不用再擔心東拼西湊,這門課將您所需億的知識都放在這裡了!只要一次付費,就能永久觀看所有課程內容,新增內容不另外收費!以打造最完整、最友善的課程為目標!

 

2.做中學、學中做,學習有感覺!


每一段內容都會搭配小型、中型專案開發實務,學起來更有感覺!

 

3.重點化教學,基礎與實作並重


這堂課針對 ES6 + React 進行深入淺出的豐富教學,同時也將導入業界實務開發 Know How。讓課程不僅只是「教語法」,更著重於學習後的專案實踐。讓學完這堂課後,馬上能獲得一套開發流程與清晰的思路。

 

老師專門研究 JS,擁有大型專案經驗,手把手教會您!

彭兆蔚老師專注在 JS 上的教學和研究,經歷過大大小小的專案主要開發者,包括「網頁大型多人連線遊戲」 到 「影像處理軟體」,教學經驗相當豐富,是非常難得的老師,畢竟許多人雖然很厲害但不會教學,用利用這堂課,更新您的技能吧!有任何學習上的問題,也都能夠過討論區或社團與老師取得聯繫喔!
 

目前規劃的主線內容

1. Javascript ES6 基礎打底

這堂課將預設學生不熟悉 JS 作為出發點,從零開始教授最新的 JS ES6 語法,並帶領學生實際操作與練習。充分融會貫通 ES6 語法的內容。

2. 完全掌握 ES6 物件導向 

「類別的繼承」、「靜態成員」、「原形鍊」... 等等是 JavaScript ES6 物件導向中相當專業的內容,這堂課也將仔細地講解,帶給您更深入的知識。

3. 快速進入 React 核心世界

帶您快速瞭解 React 核心技術,包括組件、組件屬性、組建狀態、繼承、生命週期 ... 等,並透過每段內容的開發實務,讓您快速地學習使用 React 進行開發。

4. 一起來用React 製作遊戲吧!

用 React.js 做一個 to-do-list 非常常見也不稀奇。這堂課直接帶您實作一個「井字遊戲」作為課程專案,讓所學融會貫通,直接完成一個能 demo 的作品。

5. 使用 React + Redux 大絕連放

除了 React 的核心技術之外,本課程更進一步介紹與 React 完美搭配、近年最受歡迎的 Redux 應用程式狀態管理套件,擁有 React · Redux 的能力將讓您在職場上無往不利!

6. 專案開發寶貴 Know How

語法學得再多,還是需要經驗的累積,老師將在這堂課傳授許多業界開發寶貴的經驗,例如程式碼分工觀念 (code responsibility),以及各式各樣在網路學習上所學不到的知識! 

7. 更多隱藏內容以需求,持續新增!

我們持續傾聽學生聲音,並依照回饋製作出更符合學生需求的內容,若您對課程有想法、想學什麼、對課程有疑問,歡迎至課程問與答留言或提問!

 
 

關於彭兆蔚老師

 

  

學經歷

 

1. 畢業於台大心理系、台大資訊工程研究所,具備跨領域專案開發、溝通經驗。

2. 於 2003 年,獲得美商昇陽電腦Sun Certificated Java Programmer(SCJP) 認證。

3. 於 2008 年,參與美商昇陽電腦校園大使計畫。

4. 曾任資策會軟體工程師。

5. COSCUP 2010 開源人年會講者,講題:Implementation of websocket protocol。

6. 網頁多人線上遊戲開發。

7. Piconion 影像處理軟體主要開發者。

8. iThome Modern Web 2016 講者,講題:Web 終將統治世界,用 JS 打造專業影像處理軟體。

9. iThome Modern Web 2017 講者,講題:開發複雜網頁應用的黃金法則。

10. JSDC 2017 講者,講題:如何開發複雜的雲端服務。

11. 十年豐富教學經驗。教授超過 70 個班,累計教學時數達到數千小時。

 

彭老師專屬課程網站:彭彭的課程教學網站


常見問與答

1.誰不適合這堂課程?

完全不了解網頁基礎知識 HTML / CSS 的人,不建議修習這堂課。建議從這門課開始,或參考彭彭老師的免費 JavaScript 入門課程。 

課程特色

  • 彭彭老師擁有十年教學經驗,能同理新手的困難
  • 彭彭老師真正開發過大型網頁應用,實務經驗豐富
  • 凡購買課程的人,皆能「免費」參加任何所有彭彭老師定期的直播+實體講座
  • 持續提供給學生更多不一樣的體驗

適合我嗎?需要那些課程準備?

適用對象

  • 想要學習最新、最熱門前端工程技術的人
  • 對React 與 ES6 好奇卻不知怎麼學習的人
  • 想要幫自己加值,滿足未來職場技能需求,並更進一步的人
  • 受夠網路雜亂學習資訊,想一次學會React 和 ES6 的人

工具準備

  • 任何文字編輯器 (Visual Code, Sublime, etc ..)
  • 本堂課使用 Visual Code 作為教學用編輯器

知識準備

  • HTML / CSS
  • JavaScript 基礎

課程章節表

第1章

課程說明
1
課程前言:彭彭的碎念
2
寫寫程式,線上體驗 JavaScript ES6

第2章

ES6 變數宣告 - 升級 10%
1
使用 let 宣告變數、const 宣告常數
1:55
2
詳解 let, const, var 的差異
5:21
3
let 的使用練習
4
const 的使用練習

第3章

ES6 函式 - 升級 25%
1
使用箭頭函式 (Arrow Function)
8:59
2
使用參數的預設值 (Default Parameter)
8:03
3
箭頭函式的基本練習
4
參數預設值的使用練習
5
練習解答

第4章

ES6 類別與物件 - 升級 45%
1
類別與物件的基本觀念
2:30
2
定義類別並產生物件
3:26
3
定義建構式 (Constructor)
4:58
4
定義、存取屬性 (Attribute)
9:48
5
定義、呼叫方法 (Method)
15:10
6
設計 Animal 類別、產生物件的基本練習
7
設計 Animal 類別、產生物件的進階練習
8
練習解答

第5章

ES6 類別與物件進階 - 升級 65%
1
類別繼承的基本觀念
2:40
2
定義子類別並操作子類別物件
13:29
3
了解原型鍊 (Prototype Chain)
15:28
4
定義、呼叫靜態方法
5:18
5
定義子類別,繼承 Animal 類別的基本練習
6
靜態方法的使用練習
7
練習解答

第6章

ES6 Promise 非同步處理 - 升級 85%
1
什麼是非同步程式
8:35
2
回呼函式做非同步處理
10:09
3
Promise 做非同步處理
17:17
4
回呼函式的基本練習
5
Promise 的基本練習
6
練習解答

第7章

ES6 自我學習、實務評估心法 - 升級 100%
1
淺談自我學習
10:01
2
導入新技術的實務考量
11:33

第8章

React 快速入門
1
簡介與安裝
4:40
2
快速入門範例
4:11
3
基本設計理念
4:35

第9章

React 組件 (Component)
1
我的第一個組件
6:26
2
組件的屬性 (props)
5:29
3
巢狀組件結構
8:54
4
組件的狀態 (state)
18:03
5
組件的生命週期 (lifecycle)
21:46
6
使用 React 組件,建立單一項目練習
7
使用 React 組件,建立項目列表的練習
8
使用 React 組件,操作組件狀態練習
9
練習解答

第10章

React JSX 建立畫面
1
認識 JSX 語法與 Babel 編譯器
12:49
2
JSX 基本使用與動態資料
18:14
3
JSX 套用樣式 (CSS Style)
11:08
4
使用 JSX,建立項目列表的練習
5
使用 JSX,套用 CSS 樣式的練習
6
練習解答

第11章

React 其他重要主題
1
事件處理 (event)
16:27
2
表單處理 (form)
23:23
3
利用事件處理,建立滑鼠移入、移出效果練習
4
練習解答

第12章

專案開發實務
1
了解程式碼分工 (code responsibility)
4:06
2
選項開關元件
17:46
3
井字遊戲開發
39:28

第13章

Redux 快速入門與核心操作
1
Redux 簡介與安裝
7:58
2
Redux 核心操作
24:27

第14章

React · Redux 整合實務
1
整合 React · Redux 的關鍵接點
2
整合 React · Redux 完成列表介面
22:47
3
整合 React · Redux 完成選項開關
12:11
4
整合 React · Redux 完成井字遊戲
22:25

您將會學到的

  • 能力升級至 JavaScript ES6 版本
  • React 基礎觀念與應用訣竅
  • React 專案開發實務與構思技巧
  • React 套件工具的搭配與應用

教師簡介

喜歡技術、熱愛與人互動:

1. 美商昇陽大使、資策會軟體工程師。
2. COSCUP、JSDC 2017 講者。
3. iThome Modern Web 2016, 2017 講者。
4. 多人線上遊戲、影像處理軟體開發者。
5. 台大教學超過 2000 小時。
我想經過這次彭彭老師的課程,對於我繼續研究與學習理解React上墊定了良好基礎!!~
3 周前
很清楚的教學,Good。
3 周前
用心,清楚有不失重點
1 月前
老師講解的清楚有條理,期待未來能有更多關於react的應用課題唷^^ 謝謝
1 月前
老師講得非常清楚,希望可以完成一個實務網站練習,才知道學習React後要如何運用在網站上。
2 月前

其他人也參加了這些課程

輕鬆上雲端 - AWS 網站建置術

基礎前端 - CSS

基礎前端(上) - HTML

一次搞懂 CSS z-index 層疊特性