Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications 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 Certification Network & Security Hardware Operating Systems 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 Design Thinking 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 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 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 Yoga Mental Health Dieting 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 Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA Amazon AWS CompTIA Security+ AWS Certified Developer - Associate
Graphic Design Photoshop Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Personal Development Mindfulness Meditation Personal Transformation Life Purpose Emotional Intelligence Neuroscience
Web Development JavaScript React CSS Angular PHP WordPress Node.Js Python
Google Flutter Android Development iOS Development Swift React Native Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Google Analytics
SQL Microsoft Power BI Tableau Business Analysis Business Intelligence MySQL Data Modeling Data Analysis Big Data
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Online Business Business Plan Startup Blogging Freelancing Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
30-Day Money-Back Guarantee
Development Web Development Front End Web Development

從 Javascript 到 ES6 現代寫法,身為前端開發人員要學習用 ReactJS 建立網頁元件

你想建立一個網頁嗎?從網頁到 APP 無處不在的 Javascript 將是你的必經之路,從現代三大前端框架中學習具有代表的 ReactJS 開始建置新世代的網頁
Rating: 4.9 out of 54.9 (42 ratings)
78 students
Created by Happy Coding 快樂學程式
Last updated 6/2020
Traditional Chinese
30-Day Money-Back Guarantee

What you'll learn

  • 學習 Javascript 語言概念與特性
  • 使用 Javascript ES6 撰寫程式邏輯
  • 了解 ReactJS 這框前端函示庫
  • 用 ReactJS 建立 Time Picker 元件
  • React Hooks 特性使用
  • Component Props 跟 State 的運用

Course content

4 sections • 36 lectures • 11h 35m total length

  • Preview10:58
  • Console - Javascript 最原始的編輯器
    06:44
  • Javascript 程式基礎 - 變數與型別
    22:05
  • Javascript 程式基礎 - 陣列與物件
    26:35
  • Javascript 程式基礎 - 運算子
    20:46
  • Javascript 程式基礎 - 條件式
    15:17
  • Javascript 程式基礎 - 迴圈
    22:00
  • Javascript 程式基礎 - 函式與呼叫
    14:48
  • Javascript 程式基礎 - 變數作用域 Scope
    10:37
  • Javascript 程式基礎 - 物件導向
    29:02
  • Javascript 程式基礎 - 常用JS內建函式與物件
    23:23

  • 網頁 DOM 概念
    05:13
  • 如何讓 Javascript 找到節點與網頁資料
    21:05
  • 使用 Javascript 操作節點
    26:41
  • 事件監聽器與事件觸發回調函式 (Callback Function)
    19:38
  • 延遲執行與永久循環執行
    20:49
  • 同步與異步
    24:53
  • ES6 - let & const 與解構賦值
    11:41
  • ES6 - 箭頭函式
    15:01
  • ES6 - Class 語法糖
    12:39

  • ReactJS 簡介與 React 官方文件介紹
    12:25
  • ReactJS 使用 - RenderDom
    11:21
  • React Component 組件
    30:53
  • Component Props 組件參數傳遞
    25:31
  • React 本地端開發介紹與 node.js 環境建置
    16:39
  • React 於 Node.js 進行本地端開發
    15:28
  • React Lifecycle 生命週期
    36:27
  • Functional Component 函式組件
    07:58
  • React Hooks
    08:44
  • React Hooks - useState
    09:45
  • React Hooks - useEffect
    17:48

  • Case1 DropDown 下拉式選單列表(上)
    42:32
  • Case1 DropDown 下拉式選單列表(下)
    14:52
  • Case2 Carousel 圖片輪播
    29:28
  • Case3 TimePicker 時間選取
    44:39
  • 總結 React 框架與網站元件的關係
    11:33

Requirements

  • 不需要嚴謹的程式背景,願意思考學習
  • 有操作 Mac/Windows 電腦的基礎
  • 具備快樂學習的心情與一個假日
  • 對網頁有認識,操作過 JavaScript

Description

前端開發在資訊時代已儼然成為周遭必備的技能樹選項。身為對職涯迷茫的你,是否曾想過可以成為前端工程師?如果尚未那你不會看到這段文字,當你看到這段文字即可能代表你正在前往前端開發的領域走,那這堂從 Javascript 開始走到現代 ES6 開發網頁元件課程將是你的敲門磚。

你為什麼需要上這堂課?

Javascript 在前端開發中佔有非常大的份量。尤其在 2020 根據 Hackrio Javascript 是除了 Python/Java/C++ 專為電腦工程領域撰寫中緊接在後的上位者,足以見得前端介面在軟體世界中的份量更能得知 JS 將是你踏入前端介面領域必不可少的語言。而這堂課你將進入到 ReactJS 生態系,從基礎 Javascript 到 ES6 的現代開發直至 ReactJS 元件,將一次進入前端元件開發的世界。

本課程將會包含以下內容:

這堂課程分為四個大章節。從基礎 Javascript 開始帶你入門基礎使用方式諸如:運算子、迴圈、邏輯 if else 與進階作用域的使用。到第二章節會講到現代的 ES6 撰寫方式像是:Promise、同步異步、let 與 const 概念、箭頭函式等等,使用逐漸邁向主流的寫法來提升 JS 開發能力。第三章節則會進入本課程重點講解 ReactJS,從生命週期的了解到本地開發 NodeJS 的串聯使用,都是現代網頁必不可少的能力,最後透過學習到的部分嘗試練習建置常見的 Carousel、TimePicker 元件。

  • Javascript 的基礎介紹如:運算子、邏輯使用、迴圈。

  • ReactJS 開發項目上手。

  • ES6 撰寫元件庫,套用到 React 函式庫。

  • 實作 Carousel、TimePicker 等元件。


關於這堂課

快樂學程式在台灣擁有超過 1000 人參與的在地社群活動。截至 2020 年我們已經舉辦超過三年的社群與活動,每個月皆有程式思維相關的聚會與交流,深耕社群並參與推廣工程思維,讓非本科系的男孩女孩皆能一窺程式的風趣與培養解決問題的能力。這次與 Glove 推出這堂「從 Javascript 到 ES6 現代寫法,身為前端開發人員要學習用 ReactJS 建立網頁元件」內容屬於入門並有完整從 ES6 與 ReactJS 的基礎介紹。做為上課學員的你可以在裡面跟著一起練習,反覆操作嘗試建立自己的元件庫:)

Who this course is for:

  • 對前端開發有興趣,有嘗試使用 JS 來撰寫程式
  • 對製作 UI 元件有認知,知道網頁需要建構元件
  • 嘗試使用現代 JS ES6 語法,並有興趣加強 JS 能力

Instructor

Happy Coding 快樂學程式
Grow up digital skills like an Engineer. 建立工程思維,提升數位能力第一站。
Happy Coding 快樂學程式
  • 4.6 Instructor Rating
  • 298 Reviews
  • 744 Students
  • 7 Courses

Using Engineering Thinking build up digital nomads skill.


快樂學程式成立於 2017 年,希望能提供給非本科系與相關領域的學生以及工作者們一個友善學習程式的平台,幫助大家培養工程思維以及邏輯思維,運用在解決工作上以及生活中的各種大小事。

工程思維為建立解決方法中的邏輯化思考。例如處理你的支出報告,你減少非需要支出,增加你的可動用資產。這時候會需要紀錄你每月份的支出與收入並在適當的軟體工具上建立你的收支紀錄,透過收支紀錄組織每月的標準支出。可以從圖像流程化列點出步驟、要點、目標後進而找出改善方式,以達成解決問題的方法。

建立良好的工程思維會幫助你更好、快速地組織出問題的解決辦法。運用系統化思考與流程化條列,提升你溝通與組織問題的能力,在數位化時代是相當重要的技能,同時,我們將推出更多的課程幫助提升數位能力。

提升數位化專長不再只是空談。快樂學程式舉辦每月的工作坊,並與社群舉辦主題社群小聚,讓喜愛網路生活與增加數位能力的數位住民更多的機會與舞台交流,快樂輕鬆地建立你的工程思維與解決問題的軟實力技能。

  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.