中文課程 - 從 Javascript 到 ES6 現代寫法，身為前端開發人員要學習用 ReactJS 建立網頁元件

Contents

你想建立一個網頁嗎？從網頁到 APP 無處不在的 Javascript 將是你的必經之路，從現代三大前端框架中學習具有代表的 ReactJS 開始建置新世代的網頁

從這 11.5 小時的課程，你會學到

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

要求

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

課程說明

前端開發在資訊時代已儼然成為周遭必備的技能樹選項。身為對職涯迷茫的你，是否曾想過可以成為前端工程師？如果尚未那你不會看到這段文字，當你看到這段文字即可能代表你正在前往前端開發的領域走，那這堂從 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 的基礎介紹。做為上課學員的你可以在裡面跟著一起練習，反覆操作嘗試建立自己的元件庫：）

目標受眾

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

講師簡介

Happy Coding 快樂學程式 ( 更多講師主講課程介紹 )

Grow up digital skills like an Engineer. 建立工程思維，提升數位能力第一站。

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

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

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

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

🙌 如何有效率地管理 ChatGPT 輸出與整理自己的 ChatGPT 提示( prompts )使用情境？LN+ for Web 已經針對 ChatGPT 的整合做最佳化

🙌 讓 Notion AI 成為你線上學習的得力助手，詳細操作請參考 – 使用 Notion AI 功能來為 udemy 的課程做摘要總結