進度條

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

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

Loading

特價 NT$: 1800

原價 NT$: 3600

優惠至:2019/06/16

課程包含:

終生於平台觀看 詳情

9個章節,35堂影片

7小時以上的課程時間

這堂課尚未在其他服務上架

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

課程敘述

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初中階組合 + 版本管理」
https://progressbar.tw/packages/11

 

課程難度

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

請參閱課程需求

課程需求

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

2. 對架設網站有興趣

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

【課程預計完成於8月底】

課程目標

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
  • play_arrow

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

    08:07
  • play_arrow

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

    13:43
  • play_arrow

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

    06:24
  • play_arrow

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

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

第二章 (總長6.3小時)

[補充] 新手或複習,你不能不知道的JavaScript ES5
keyboard_arrow_down
  • play_arrow

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

    14:22
  • play_arrow

    02. HTML簡介與複習

    20:11
  • play_arrow

    03. CSS簡介與Selector複習

    21:37
  • play_arrow

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

    10:13
  • play_arrow

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

    10:12
  • play_arrow

    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實作

    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 New
  • lock

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

    23:04 New
  • lock

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

    15:15 New
  • lock

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

    17:12 New
  • lock

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

    14:35 New
  • lock

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

    19:29 New
  • 章節尚未完全完結,我們會持續更新!!

第三章 (總長0.3小時)

開始使用JavaScript ES6吧!
keyboard_arrow_down
  • play_arrow

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

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

第四章 (總長0.0小時)

初探Webpack - 編譯你的程式碼讓所有瀏覽器都能用
keyboard_arrow_down
  • 尚未確定課程,請再等我們一下!!

第五章 (總長0.0小時)

React JS 基本語法
keyboard_arrow_down
  • 尚未確定課程,請再等我們一下!!

第六章 (總長0.0小時)

React JS 搭配真實資料的網站實例
keyboard_arrow_down
  • 尚未確定課程,請再等我們一下!!

第七章 (總長0.0小時)

更深入的React JS的使用
keyboard_arrow_down
  • 尚未確定課程,請再等我們一下!!

第八章 (總長0.0小時)

React 與 Redux
keyboard_arrow_down
  • 尚未確定課程,請再等我們一下!!

第九章 (總長0.0小時)

[補充] 待定
keyboard_arrow_down
  • 尚未確定課程,請再等我們一下!!

課程講師

縱裕

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

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

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