Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Software Development Tools No-Code Development
Business
Entrepreneurship Communication Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certifications Network & Security Hardware Operating Systems & Servers Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Paid Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement & Gardening Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition & Diet Yoga Mental Health Martial Arts & Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Learning Teacher Training Test Prep Other Teaching & Academics
Web Development JavaScript React Angular CSS Node.Js HTML5 PHP Vue JS
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Amazon AWS Cisco CCNA Microsoft AZ-900 AWS Certified Developer - Associate
Microsoft Power BI SQL Tableau Data Modeling Business Analysis Business Intelligence MySQL Qlik Sense Blockchain
Unity Unreal Engine Game Development Fundamentals C# 3D Game Development C++ Unreal Engine Blueprints 2D Game Development Virtual Reality
Google Flutter Android Development iOS Development React Native Swift Dart (programming language) Mobile App Development Kotlin SwiftUI
Graphic Design Photoshop Adobe Illustrator Drawing Digital Painting Canva InDesign Character Design Procreate Digital Illustration App
Life Coach Training Neuro-Linguistic Programming Personal Development Personal Transformation Life Purpose Mindfulness Meditation CBT Cognitive Behavioral Therapy Sound Therapy
Entrepreneurship Fundamentals Business Fundamentals Freelancing Business Strategy Startup Business Plan Online Business Blogging Home Business
Digital Marketing Social Media Marketing Marketing Strategy Internet Marketing Google Analytics Copywriting Email Marketing YouTube Marketing Podcasting

DevelopmentProgramming LanguagesReactive.js

快速學習 React.js 和 Redux 的基礎到實踐

本堂課程講求實戰性與實作,除了教你在業界才懂的獨門心法,幫你加速建置網站。
Rating: 4.5 out of 54.5 (185 ratings)
788 students
Created by iLinke 聯成數網
Last updated 3/2019
Traditional Chinese

What you'll learn

  • 有能力建立強大、快速與用戶友善的網站與 Apps
  • 輕鬆利用 JavaScript 的強大功能,提供用戶驚人的使用體驗
  • 晉身為該行業的高薪工作者

Requirements

  • react 版本:16.2.0
  • redux 版本:3.7.2
  • react router 版本:4.2.0

Description

如果我完全沒有前端的經驗,可以上這堂課程嗎?

可以,我們會盡可能的顧慮到沒有前端經驗的學生!當然,如果您在哪一個階段卡住了,可以隨時詢問我們,老師會在三天內給回覆你的問題。

本堂課的四大學習色

  • 一次包含初、中、高三個階段課程,上完可直接進入業界實戰
  • 一次購買永久體驗,您可以自由掌握進度,無限次觀看複習
  • 有問題老師幫你解答,學員的問題在提出後三天內會得到老師回覆

為什麼學習 ES6 和 React?

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

為什麼要用 React 開發?

jQuery 雖然是目前多數前端工程師的必備工具,但在中大型專案的開發上,容易產生不易管理及效能降低的缺點。所以越來越多的網路公司都轉向 React.js 來開發前端組件,除了性能因素外,很大一部分原因是因為用 jQuery 去寫很複雜的 DOM 操作,後期代碼會變得越來越難維護。另外根據 State of JS 調查,顯示 React.js 的開發者滿意度最高,達到 92%。

React.js 本身的優勢?

  1. 由 Facebook 開發維護,具備未來性與擴展性,不會隨意消失或停止更新
  2. React.js 擁有 Virtual DOM,能夠減少操作,提高效能,讓您能專注於 UI 設計
  3. React Native 使得 Web 應用的邏輯可以直接使用在 iOS 或 Android 等移動端客戶
  4. 有足夠多的使用和測試場景來保證框架本身幾乎沒有 bug 和錯誤
  5. 模組化開發,架構良好,寫出來的東西易於維護,修改快速
  6. 良好優化的程式碼,讓系統載入與反應速度皆快

有哪些公司使用 React 開發

  1. Facebook
  2. Airbnb
  3. Netflix

為什麼選 Redux?

坊間的 React.js 課程中,對於資料流的概念僅止於 React.js 中的簡易單向資料流,然而單向資料流只能應付小規模的應用程式,因此我們選用市場上歷經千錘百煉的 Redux 來解決資料模型的問題,Redux 的概念簡單易上手,不但功能強大、維護性高且除錯容易,能為開發者省下大量的時間和維護成本。

授課進行與學習方式

【電腦螢幕側錄+動畫投影片】

線上學習方便大家可以利用空檔進行學習。本堂課講師將用螢幕側錄的方式,一步步帶你實際操作,在重點的部分,會以動畫投影片的方式講解,幫助學員更容易上手。

【問題回覆】

若學員在學習上有遇到任何問題,我們也歡迎學員詢問,講師講在三天內回覆。

課程章節表

單元 1 - 實戰React:課程簡介

  • 你能從這堂課學會什麼
  • 這堂課適合怎樣的學習者
  • 為何你應該上這堂課

單元 2 - Hello React App:環境設定與安裝

  • 介紹Node.js
  • 安裝Node.js
  • npm介紹
  • 建立專案與開發環境
  • 啟動開發環境
  • 安裝Visual Studio Code
  • 以VSCode修改專案
  • 所見即所得的修改結果

單元 3 - 認識React:過去的問題與現在的解法

  • 網頁應用程式技術背景知識介紹:DOM Tree
  • 以JavaScript操作DOM Tree及衍生的問題
  • 何謂笨拙的DOM Tree操作
  • 何謂功能驅動開發
  • 功能驅動開發的問題
  • 優化DOM Tree操作概述
  • 何謂畫面元件驅動開發(Componetn Driven Development)
  • 畫面元件驅動開發的優點
  • 何謂虛擬DOM Tree (Virtual DOM Tree)
  • 圖解虛擬DOM Tree更新流程
  • 讓React幫你畫DOM Tree

單元 4 - ECMAScript介紹:發展淵源與新語法

  • ECMA Script發展歷史
  • ES6新語法:變數與常數
  • var與let比較
  • 其實你不需要變數
  • ES6新語法:樣版字串
  • 真的假的?短路求值
  • 短路求值常見應用
  • 短路求值:函式呼叫防呆
  • 短路求值:縮減程式碼
  • ES6新語法:其餘參數
  • ES6新語法:陣列展開語法

單元 5 - 物件、類別與模組

  • 物件介紹
  • 類別介紹
  • 類別建構式
  • 類別中的this概述
  • 物件封裝
  • ES6靜態屬性寫法與問題
  • ES7靜態屬性寫法與用法
  • 類別繼承寫法與用法
  • ES6模組系統寫法與用法

單元 6 - 解構賦值

  • 解構賦值解構賦值基礎語法
  • 解構賦值指派式 
  • 解構賦值完整語法 
  • 解構賦值簡縮語法 
  • 解構賦值陣列解構

單元 7 - 預設值

  • 預設值的必要性及設計思維
  • 預設值寫法:短路求值
  • 預設值解法:ES6新語法
  • 解構賦值的預設值

單元 8 - 箭頭函式

  • 箭頭函式基本語法
  • 箭頭函式完整語法
  • 箭頭函式的this綁定特色

單元 9 - 異步運算

  • 何謂同步運算
  • 何謂異步運算
  • Promise規格介紹
  • Promise類語法
  • Promise結果處理
  • Promise三態
  • Promise錯誤處理
  • 連鎖Promise處理

單元 10 - 瀏覽器支援

  • 瀏覽器不支援ES6
  • 填充技術的介紹
  • Babel介紹
  • React專案快速建置工具介紹
  • Webpack工具介紹

單元 11 - React語法入門:JSX、元件、屬性與狀態

  • 不囉唆實戰JSX
  • React元件生命週期:掛載
  • React元件生命週期:更新
  • React元件屬性與狀態介紹
  • 實戰React元件生命週期

單元 12 - 實戰:待辦事項App

  • 畫面規劃
  • 元件切割
  • 元件清單
  • 何謂容器?何謂元件?
  • 歸類聰明物件與笨物件
  • 實戰:撰寫基礎畫面元件
  • 實戰:資料、資料位置與資料流
  • 實戰:資料異動
  • 實戰:有控制的輸入元件(Controllerd Input)

單元 13 - React與樣式

  • CSS用法語發展歷史介紹
  • CSS前置處理器介紹:SASS範例
  • CSS樣式的問題
  • CSS的可讀性問題
  • 讓我們以畫面元件驅動開發
  • styled-components用法介紹
  • 實戰styled-components
  • styled-components與動畫
  • styled-compoents與響應式網頁設計(RWD)

單元 14 - 認識Single Page Application

  • MPA:舊時代架構優缺點介紹
  • SPA:新時代架構優缺點介紹
  • MPA與SPA效能上的比較
  • 如何設計SPA
  • 實戰:以SPA思維來重新設計待辦事項APP

單元 15 - 實戰:待辦事項App SPA

  • 實戰:修改撰寫資料模型
  • 實戰:修改撰寫分類元件
  • 實戰:完成待辦事項App SPA
  • 我們需要更多功能

單元 16 - React Router入門

  • React Router安裝
  • React Router核心三元件
  • BrowserRouter語法介紹
  • Router元件語法介紹
  • Link元件語法介紹
  • 實戰:以React Router改善待辦事項App SPA

單元 17 - React與資料流設計

  • 資料流設計:MVC架構介紹
  • MVC架構的問題:Facebook實際上遇到的困難
  • Facebook Messenger Bug介紹

單元 18 - Redux觀念

  • React單向資料留所面臨的問題
  • Redux絕對真理資料流介紹
  • 可預測與不可預設函式介紹
  • 可預測資料流的重要
  • 單向資料流的行為解析
  • Redux跳脫框框的思考邏輯
  • Redux三部曲:規劃Action
  • 實戰:以待辦事項App來規劃Action
  • Redux三部曲:規劃Reducer
  • 實戰:以待辦事項App來規劃Reducer
  • Reducer鐵律(一)

單元 19 - React與Redux

  • Javascript效能致命傷:物件比較
  • 為何需要Reducer鐵律(一)
  • Immutable Data介紹
  • Reducer 鐵律(二)
  • 何謂純函式:資料的可預測性
  • Redux三部曲:建立Store與資料流
  • 如何建立Store
  • 透過Store發動Action
  • Redux名詞總覽
  • 在React中使用Redux
  • Connect語法與High Order Component(HOC)介紹
  • 何謂Decorator Pattern
  • 實戰:改寫待辦事項清單App

單元 20 - React與後端API呼叫

  • AJAX歷史簡介:XHR歷史與fetch演化
  • fetch語法介紹
  • fetch四天王:Request物件介紹
  • fetch四天王:Header物件介紹
  • fetch四天王:Body物件介紹
  • fetch四天王:Response物件介紹

單元 21 - Redux進階:後端資料串接

  • Redux中取得後端資料的錯誤範例
  • Fat action, slim reducer概念
  • 以非同步Action拆解設計同步Action creatror
  • 撰寫同步Action
  • 撰寫同步Reducer
  • Redux Middleware概念介紹
  • Middleware寫法:ES5與ES6寫法
  • Middleware堆疊特性:類剖面導向程式設計
  • redux-thunk介紹
  • redux-thunk安裝與設定
  • 將非同步Action以redux-thunk改寫成同步Action

單元 22 - 建置與發佈

  • 建置
  • 發佈前的最後測試

單元 23 - React的效能陷阱

  • React元件生命週期的陷阱
  • 改用PureComponent
  • 效能比較
  • 使用時機

單元 24 - 網頁應用程式的未來:Google Progreesive Web Application

  • Google PWA介紹
  • 網頁效能兩大重點數字
  • ES7動態輸入語法介紹
  • 啟動PWA
  • 效能比較
  • PWA的陷阱


《 即將上線課程 》

單元 25 - 出師實戰:使用Keystone.建置完整的內容管理系統

教你使用 React 搭配 Keystone 打造出一套內容管理網站,絕對讓你物超所值。

單元 26 - Immutable Data詳解

  •  Immutable.js,Facebook沒跟你說的秘密武器
  • 實戰Immutable.js:效能、架構大躍進
  • 採用Immutable.js 的問題以及解法

單元 27 - React與SEO

SPA(Single-page application)其中一項缺點是對搜尋引擎不友善,這堂課會教你如何透過建置工具,打造對搜尋引擎友善的單頁式網頁應用程式,一步步優化你的搜尋排序。


Who this course is for:

  • 想從實戰經驗中學習用 React 開發網站
  • 想要打造出反應敏捷的網站與 Apps
  • 想從 jQuery 或 AngularJS 1.x 中跳脫,學會更簡潔的開發工具
  • 想幫自己加值,滿足未來職場技能需求

Instructor

iLinke 聯成數網
聯成數網 RD 團隊
iLinke 聯成數網
  • 4.5 Instructor Rating
  • 185 Reviews
  • 788 Students
  • 1 Course

我們是聯成數網,在 2001 年打造自己的 RD 團隊,專注於各種前後端全站軟體技術解決方案,多年來持續與多家知名企業長期合作,深度掌握互聯網技術與用戶使用體驗。


我們使用開源碼從底層重構資訊系統架構,包括 Web / App 前端技術、中介訊息層、分散式運算演算法與Big Data巨量資訊存取架構等,迄今已取得7項政府技術研發獎勵科專。 

我們將 React 技術成功的應用於多款產品,如Cupoy 知識服務。這堂課會將我們使用React.js開發產品的經驗,以淺顯易懂的方式讓同學們快速上手。

Top companies choose Udemy Business to build in-demand career skills.
NasdaqVolkswagenBoxNetAppEventbrite
  • Udemy Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Investors
  • Impressum Kontakt
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Accessibility statement
Udemy
© 2022 Udemy, Inc.