回到部落格

2024-02-22

【React 新手村】在2024年學React！

【React 新手村】在2024年學React！

原文發表於 Medium。

每年都會有大量的類似標題的文章，似乎都被寫爛了。雖然如此，還是想要跟大家分享，我認為在2024年要入坑React的學習地圖

1. HTML+CSS

首先在一開始，若是連HTML都還不會的話，建議先從最基礎的線上BootCamp課程開始。以下是我推薦的課程：

  • 免費課程
    freeCodeCamp.org — HTML and CSS Tutorials
    老牌前端課程，拍攝與剪輯細緻度不如付費課程，但非常實用。
    • 付費課程
      Udemy — The Complete 2024 Web Development Bootcamp (Angela Yu)
      超級推薦安潔拉的課程，一位非常厲害的中裔英國籍老師，也是我的啟蒙老師。這堂課程在我寫文的時候，總修課學生人數達到120萬，評分也超高！還可以順便練一下英式英語的聽力。

若各位參加了安潔拉的課程，裡面就包含React，等同於是搭上直達車了，請直接跳到本文React部份繼續閱讀 （順便安麗一下，安潔拉最近還加入了新的加密貨幣章節，加量不加價喔！）。

若是走免費黨的路線的話，我們還有許多知識空缺要自己找東西來學一下，請直接往下看。

2. JavaScript

HTML是網頁的骨架跟血肉，CSS是外皮，但只有這樣的傀儡娃娃是動不起來的（怪怪的比喻），我們還要施展魔法讓它動，JavaScript就是網頁開發者的魔法。推薦的課程：

由於JavaScript是一門程式語言，若是內容太過學術，則可能學到一半就睡著了，因此我推薦的Bro Code一開始就針對網頁開發者的使用情景設計課程，銜接前面的HTML+CSS課程內容剛剛好。

延伸補充：若要對JavaScript有非常深入的了解，推薦Udemy — JavaScript 全攻略：克服 JS 的奇怪部分（Anthony Alicea），上完保證脫胎換骨。

延伸補充：若要對JavaScript有非常深入的了解，推薦Udemy — JavaScript 全攻略：克服 JS 的奇怪部分（Anthony Alicea），上完保證脫胎換骨。

若走到這，我們已經完成了古典時代的網頁工程師的功課了。但是現在的前端『內卷』嚴重，大部分都要使用前端框架，因此我們不能停留在這，一起往前吧！

3. Node.js + npm

由於現代的網頁框架都要透過Node.js進行套件安裝與專案開發，因此Node.js是必要學的。如果各位有聽過Express.js這樣的第三方套件，可以發現學node也可以跨到後端去，好處多多。推薦的課程有：

大家可以先從第一個影片開始學會基礎的node知識：從安裝到語法指令教學。然後看第二個影片學習從npm上裝第三方套件與library。

所謂第三方套件就是其他人或公司建立的一堆程式碼，我們就可以站在巨人的肩膀上開啟專案，包含React.js本身也是透過npm安裝的library。

所謂第三方套件就是其他人或公司建立的一堆程式碼，我們就可以站在巨人的肩膀上開啟專案，包含React.js本身也是透過npm安裝的library。

4. React

總算，我們終於要開始學React了！推薦課程如下：

若各位買了安潔拉的課程，會發現其實她教的知識面很廣，但都不太深入，對於新手來說是很好的，可以盡情去體驗探索。但是若我們要開始專一在React上，你會需要一個專門教React的課程。因此推薦各位這個環節不要錯過。（或者也可以直接在安潔拉的課後，轉學Vue.js框架…）

後續進修步驟

學過上面的課程之後，各位就可以自己去做自己的作品集，開始找工作了。
但若是你還不急著找工作，建議可以學一些React的框架，是的，你沒聽錯，React自己的框架。

Next.js

非常出名的React框架，依靠它可以很簡單地實現伺服器端渲染（SSR），也能夠建立具有複雜階層網址（URLs）的網站。更重要的是，它有後端API功能！換句話說，Next可以建構前後端兼具的所謂『全端』網站，棒不棒！

推薦課程：

其他還有React相關的框架像是Remix.js，各位也可以去找相關的課程試著學看看唷！

如果你真的走到最後這一步了，恭喜你，我們都走了好遠的路途！為自己驕傲吧！

許多人買了線上課程卻沒有學完，或者草草學完後又停止Coding。而你還在這裡，就證明你是對於網頁技術有滿滿熱誠的人。期許在未來，我們互相切磋，彼此惕厲，在技術路上越走越遠！

最後分享：在網路上有人問，coursera的課程如何，幾倍寶石的課程怎樣，我想這全都不重要！重點是有沒有練習，學了不練，你是不會知道過程中會遇到的問題，進而解決，成為真正的知識。

學程式就跟學游泳一樣，沒有下過水，是不可能學會的。

最後分享：在網路上有人問，coursera的課程如何，幾倍寶石的課程怎樣，我想這全都不重要！重點是有沒有練習，學了不練，你是不會知道過程中會遇到的問題，進而解決，成為真正的知識。

學程式就跟學游泳一樣，沒有下過水，是不可能學會的。

最後的最後，若覺得我的文章寫得好，還請給我幾個掌聲，你的鼓勵是我繼續寫下去的動力！謝謝！