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

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

4.60 (49 reviews)
Udemy
platform
中文
language
Web Development
category
從 Javascript 到 ES6 現代寫法,身為前端開發人員要學習用 ReactJS 建立網頁元件
145
students
11.5 hours
content
Jun 2020
last update
$199.99
regular price

What you will learn

學習 Javascript 語言概念與特性

使用 Javascript ES6 撰寫程式邏輯

了解 ReactJS 這框前端函示庫

用 ReactJS 建立 Time Picker 元件

React Hooks 特性使用

Component Props 跟 State 的運用

Why take this course?

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

Screenshots

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

Reviews

岳鋒
June 29, 2020
給對這門課學習心得回饋: 1. 課程適合誰: 該課程分級雖為「初階級」,但若你真的對JavaScript零基礎,只會基本的html與css,那麼這門課基本上對您可能還是太難了。基本上這門課較適合已經對JavaScript有一定的熟悉度與認識,這門課四節中有兩節在講JavaScript的基本概念,但基本上在講法的速度與內容方面,比較像是以懶人包的方式說完,簡言之,廣度很夠,但若從探討JavaScript的相關深度內容(如閉包、非同步等概念)或資料結構的相關refine寫法來說很少,甚至沒有。當然這不影響後面兩節的對React.js的理解,但以熟悉JavaScript的基礎來說,仍是重要的概念。 2. 課程內容: 在React.js的講解方面,個人認為課程有將React基礎入門知識與整體概念講解的很清楚,非常適合過去只會用原生JavaScript的前端學習者。對於React的應用範例,課程內容也以簡單的下拉選單、圖片輪播與時間選取範例進行解說,總體來說,是非常適合首次接觸React.js的前端學習者。另外,講師的聲線、口齒清晰度與語調起伏也表現得不錯,相較我參加其他線上或線下實體課程的其他講師相比,該課程講師聲音在聽覺上面,除了算是悅耳,最重要的是不會讓人想睡覺。當然,雖然這跟課程內容無關,但以我個人經驗來說,講師上課的 語調與音色,多少也會影響聽者的學習專注度。 3. 給該課程的建議: 以我個人學習前端網頁設計的學習歷程來說,該課程雖有提及前端網頁框架應用於實務專案程式維護與分工,但建議可以再加強說明前端框架在應用於什麼樣的大型專案才真正需要? 雖然有提及,但深入度個人覺得稍顯不足, 以我的之前其他的上課經驗來說,有課程主要是在教如何開發「漸進式網頁應用程式(PWA)」,當中對是否有無使用React.js前端框架,就有很顯著的差別,因為網頁應用程式程式系統龐雜,同時又要求學生要撰寫相關應用引擎時,前端框架在進行程式分割與模組化的應用概念上,可以讓學生更加的理解與印象深刻 ! 當然,該課程本來針對的目標學習者,是首次學習Reat.js的前端學習者,就該課程的說明就已經很足夠且詳盡了,但對於還想繼續鑽研相關網頁前端應用的學習者來說,內容可以在豐富一點! 不過整體來說,這門課真的在課程架構上,內容的邏輯與系統,我是覺得很棒,並且也推薦給想要學習React.js的學習者。
Esther
June 29, 2020
課程從Javascript開始進行延展至React,四個章節涵蓋前端開發人員需要知道的重點觀念,課程中針對每個單元提出範例進行說明解析,讓每個重點區域都能夠很清楚的理解,並且於最後一節進行正在學習的人往往最害怕也最缺乏的實作講解練習,這堂課程幫助我在使用Javascript及React時能運用更清晰的邏輯來建立程式,推薦給同樣正在學習前端或對於自己的概念和程度不太有把握的人藉由這堂課程來加深自己的觀念。
Li
June 29, 2020
講師講得非常詳細,深入淺出,內容循序漸進,課程教學主要依照各項分類彙整開發上常用到的語法及觀念,且於每個需要注意、知道的小細節(陷阱)都有著重地為學員們補充,覺得對於日後銜接實際開發應該是非常有幫助的。 另外在正式進入 React 本地端開發前都備有 CodePen 筆記,課中可讓學員無痛跟隨講師的步伐,課後可供學員複習及查找。
ShaoYu
June 29, 2020
課程的第1、2節 Javascript 基礎與 ES6 講解內容的觀念非常實用淺顯易懂。第 3 節將 ReactJS基本觀念與React 16.8 中增加Hook新功能講解非常清楚,並在第 4 節講解幾個常見的網站元件實作。此課程很適合想學 React 的人來上。希望之後會有進階的課程內容 ,如:React-Router, Redux, Redux-saga 等。 (課程中講解程式碼畫面有點小,前半段使用 codepen 方式還可以開啟瀏覽器對照的看,但後半段使用 VS Code 只能看影片畫面,希望能附 VS Code 範例程式碼對照的看)
Hsueh
June 28, 2020
老師講得很清楚,且有實際操作當例子。這門課是完全從頭開始教,對基礎者相當友善,有範例程式碼(codepen)可以對著看慢慢消化,容易上手。 另:建議分享網址的時候可以直接附在可以複製貼上的地方(如,課程標題處???),不要用QRcode,電腦掃QRcode比較不方便;再來就是老師在使用codepen示範時,可以考慮再放大一點XD。
CC
June 28, 2020
這門課很適合初學者學習,課程中講師會配合清晰且明確的簡報與詳細的解說來講解課程。使得讀者容易理解課程內容並有層次的學習 Javascript 與 React ,且講師也會詳細地說明其使用理由等等。真誠推薦!
翔麟
June 28, 2020
這門課從最基礎的JS基本觀念到 現在熱門的框架ReactJS都有做很好的說明 在課程中講師也會給一些自己的小小建議或是意見 就像是在跟學生對話 這在現在的線上課是比較少見的 蠻適合給一些非本科系或是想了解JS的學生
Sho
June 28, 2020
老師對於重要觀念的解說清楚明白,會仔細講觀念,而且章節的最後會結論複習,全部Run一遍加深印象。在章節的解說中,不僅僅是介紹內容,有時會舉例現實工作中會遇到的情境,代入觀念的解決方法,就好像工程師在你身邊告訴你遇到時該怎麼辦、為什麼建議使用這個property或方法等,即使是對 JS 並未完全熟練的人,也可以按部就班,跟著課程一步步從基礎javascript (會帶 ES6 )、同步異步Callback,Run 到 React 的 component 組件與 Hooks,最後會實際用 React 完成一些東西,如 dropdown select 、 carousel 等。不錯!
紹宇
June 28, 2020
這個課程對於網頁初學者來說十分的友善,基礎 js 知識介紹非常的完整。學習框架本來我覺得很困難,但經過這個課程循序漸進的教學,一步一步的打穩 js 概念,再來學習框架負擔減輕很多。希望之後會繼續介紹到 Next.js 和 redux。
Changken
June 28, 2020
我覺得這堂課的講師很用心,基礎的javascript他都有帶到,然後對於講授上我覺得是很流暢的,這堂課有種按部就班的感覺,由基礎的js再到react框架,你不用擔心趕不上,很快你就進入狀況了! 老師在react裡也有介紹到react componet和react hook等功能,尤其是在後面的三大case應用我覺得收穫剖多,但我覺得沒有提到react router和redux則有點可惜(大家可以在參考老師的其它門課程,他有教到),不過整體上我覺得很高興!
瑞純
June 27, 2020
1. React很吃Javascript的功,JS 佔比不少!了解講師在為同學們課程打好基礎作準備! 2. 講師很熱心每一節課程會一直補充自己的經驗,不過相對的課程變得很攏長讓人有點聽不下去,建議可以再細分。不要所有東西都集中在同一個章節(譬如介紹js時還講了編輯器,兩款編輯器可以分出來講並且手把手教學安裝及VS CODE for ReactJS套件安裝) 3. 課程比較適合已經對JS.ReactJS有點了解的人,因為講師講的很細(太細反而新手上了有聽沒有懂(如何實際用在專案),教學的內容豐富資訊多,提供在Codepen上的資訊倒是可以拿來當字典查,不過建議講師可直接把連結分享在Udemy的公佈欄或每章節,因為影片播放中用QrCode的呈現方式不太好,拿手機要掃描時影片必須按暫停,QrCode被播放ICON擋到了.. 4. 1-6 10:34秒 畫面有問題 5. 建議畫面可以配合講師邊講邊帶入一些生動的動畫,不然一直停在同一個畫面很枯燥乏味)或者可以邊帶入試題邊實作邊聽教學。 6. 講師的語助詞太多了常常出現ㄝ,ㄟ,ㄜ,恩,.. (這樣顯得不像是教學課程像是youtube上的影片分享) 7.對於新手來說沒有看到畫面僅聽講師的敘述會不曉得要運用在哪。 如果有實際專案搭配這些課程及講師分享的實例經驗會更棒。 總結:整體來說教學豐富,新手可以聽觀念了解JS/JS ES6/ReatJS的相關知識,已經上手的同學可以多吸取經驗分享講師提供的文檔可以當字典使用查詢。
林以珊
June 27, 2020
整體來說內容很豐富,前面花了很多篇幅在講解js幫大家打基本功。講師經驗豐富,會分享許多自己以前遇到的例子。額外提供的講義可以有效歸納重點,語速對於有學過js的人來說很友善,會慢慢由淺入深帶學生學習react,推薦有一點點基礎的人,花一個週末把教學看完後會有基本觀念,要精熟的話就要再多花一些時間。
找錢
June 27, 2020
1. 針對Javascript基礎:各個需要的基礎知識都很詳細帶過。 2. 針對ES6新的語法糖:會針對原本Javascript的原本語法做比較, 讓人更清楚優化或者簡化的沿革。 3. React內容: React從文檔到當前前端很流行的ReactHook的介紹, 很詳實。 4. 最後帶些簡單的demo, 熟悉react。 課程對入門Js與React非常有幫助, 就此課程主題已經完全達到達成課程簡介中的課程目的。 老師聲音好聽, 教學上對概念解析很透徹, 期待未來可以有教程針對SSR(next)框架, 以及redux狀態流的管理, 有更多的介紹。
Josh
June 26, 2020
講師口條清晰,課程課綱與內容相當完善,且難度逐漸增加,使得學習曲線不會太陡峭,react的教學部分讓我相當受用,讓我更了解它的核心精神與使用狀況。另外小建議,因為常使用手機觀看,所以私心希望老師的coding頁面字型能夠大一點或是錄製時可以放大敘述的部分就更完美了
Yu
June 26, 2020
The course provides a solid basics of Javascript and is really beginner-friendly. The instructions on each topic are clear, straightforward, and easy to follow. The logic on React components and hooks are well-explained and detailing. I now understand how React works underneath the hood. Recommend for getting started with React.

Charts

Price

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

Rating

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

Enrollment distribution

從 Javascript 到 ES6 現代寫法,身為前端開發人員要學習用 ReactJS 建立網頁元件 - Distribution chart
3195786
udemy ID
6/2/2020
course created date
6/11/2020
course indexed date
Bot
course submited by