今天來分享前端框架-御三家 傑尼龜（誤)

React!!

React

這邊要提醒一下，前端技術一直在更新，課程要盡量找新一點的，目前React版本已經到18，課程如果是用18以前的，就不太建議花時間學習拉。

YT影片：【前端速成】React 快速入門｜Tiktok工程師帶你入門前端｜布魯斯前端
YT影片：React JS Tutorial - Basic to Advance (2023)
YT影片：React JS Full Course for Beginners | Complete All-in-One Tutorial | 9 Hours

YT頻道：Wei Wei
YT頻道：Web Dev Simplified
YT頻道：Jack Herrington
YT頻道：Net Ninja
YT頻道：Traversy Media
YT頻道：Dave Gray
YT頻道：PedroTech
YT頻道：Josh tried coding

官方文件（舊）：https://zh-hant.reactjs.org/
官方文件（新）：https://react.dev/

鐵人賽文章：React框架白話文運動
鐵人賽文章：一次打破 React 常見的學習門檻與觀念誤解
鐵人賽文章：從Create到React - 用來實作使用者介面的JavaScript函式庫
鐵人賽文章：React.js 從 【0】 到【1】推坑計畫
鐵人賽文章：你 React 了嗎? 30 天解鎖 React 技能
鐵人賽文章：終究都要學 React 何不現在學呢？

電子書：從 Hooks 開始，讓你的網頁 React 起來

Udemy課程：Complete React Developer in 2023 (w/ Redux, Hooks, GraphQL)
Udemy課程：The Ultimate React Course 2023: React, Redux & More
Udemy課程：React - The Complete Guide 2023 (incl. React Router & Redux)
Udemy課程：Modern React with Redux [2023 Update]
Udemy課程：React 18 Tutorial and Projects Course (2023)

想要完整上完，怕漏東漏西的話，送上Udemy有名的React課程傳送門！！！基本上就是這幾個講師了，選一個你喜歡的，把他看完，我自己是買了第一個，因為課程內容有包含完整狀態管理工具的教學，是我那時候需要的，細節後面會再說明。

React生態系

學了React也需要認識一下周邊生態系的酷東西，這邊簡單說明一下，職缺內容常看到的工具，CSS-in-JS、UI框架（Framework/Library）、狀態管理工具

CSS-in-JS

常見的工具有
官方文件：styled-components
官方文件：emotion

UI框架（Framework/Library）

一開始接觸UI 框架（Framework/Library）是因為參與的專案用的是MUI，後來才發現蠻多教學是用Ant Design，發現好像還有不少UI框架我不認識。

在github搜尋UI，看得我眼花撩亂。

也有參考這個介紹Rating The Most Popular React UI Frameworks

列幾個常在職缺內容上看到的，還有github星星數排名前面的，通常在YT上也會有很多教學。

官方文件：Material UI
官方文件：Ant Design
官方文件：Chakra UI
官方文件：Tailwind CSS

這邊也提供使用UI框架（Framework/Library）的反面看法

You Don’t Need A UI Framework

長話短說，就是一開始使用起來可能很快，但有時候會因為一些元件沒這麼好用，反而花更多時間為了將元件調整成需要的樣式，結果自己手寫反而不需要花這麼多時間。

結論：不一定要從頭手寫一個元件，也不代表使用UI框架（Framework/Library）的時候，就要使用包含很多樣式的元件，有些UI框架（Framework/Library）可以在樣式上保有彈性，會是你更好的選擇。

作者推薦他常用的UI框架（Framework/Library），沒有內建樣式，讓你保有彈性使用。

Reach UI
Headless UI
Radix UI
React ARIA

狀態管理工具

職缺內容常見，面試都會關心你會不會的技能之一，基本上現在都是必學的。

• Redux
• Redux-Thunk
• Redux-Saga
• Redux-Toolkit
• Redux-Persist
• useContext & useReducer

有關React就先這樣拉！

尋找適合你的課程很重要，都點看看，覺得聽得懂的，就慢慢看，聽不懂可換別的試試。

明天要來分享我個人很喜歡的學習方式，以專案為主的學習資源。