React環境建置和必須知道的10個套件

重要

create-react-app 已被棄用，改使用 npm create vite@latest my-react-app --template react，文章已於 2024-10-29 更新可至步驟3進行查看。

前言

對於有興趣成為前端的朋友，本文章會告訴你如何安裝環境和啟動，且在前端的開發過程中會使用各式各樣的套件，所以也會介紹我自己最常使用的幾個套件。

環境建置

本文會以windows平台來做介紹，讓你可以成功建置環境和你的第一個react專案

步驟1

首先我們需要安裝Nodejs，可以至這裡選擇所需的版本及平台去做下載並安裝。

接著打開命令提示字元(CMD)輸入:

console
1node -v

只要看到node的版本代表已安裝成功。

步驟2

我們需要一個可以編譯程式碼的東西，那就是VSCode，可以至這裡進行下載並安裝。

步驟3

接著我們新增一個React專案，並使用Typescript:

console
1npx create-react-app my-app --template typescript
2cd my-app
3npm i
4npm run start

代碼解釋: 建立一個my-app的專案，進入該專案的資料夾，下載所需套件並啟動。

接著讓我們打開預設網址 http://localhost:3000/ 就可看到第一個react專案了。

---

2024-10-29 已更新

由於create-react-app已棄用，以下是使用vite進行react專案創建:

console
1npm create vite@latest my-react-app --template react
2cd my-react-app
3npm i
4npm run dev

預設網址為 http://localhost:5173/。

套件介紹

這邊只會做套件介紹，可以根據需求到各套件的官網查看，以下是常用的10個套件:

1. Ant Design: 提供常用且豐富的 UI 組件，例如:Button、Table、Form、Dropdown、Modal 等等。
2. Recharts: 圖表類型的套件，有許多常用圖表像是長條圖、折線圖、圓餅圖等等。
3. react-icons: 提供大量 Icon 的套件。
4. dayjs: 用來處理時間的套件，如果只使用基本的功能相較於 moment 來說是非常輕量的，僅有 2KB。
5. react-i18next: 用來實作多國語言的套件，如果多國語言需要從網路拉取可以搭配i18next-http-backend來做使用。
6. axios: 非常輕量的 Http 請求工具。
7. react-redux: 來實現狀態管理的套件，但此套件稍微複雜一點有機會再發一篇文章來做介紹。
8. lodash: 提供了許多方法來做資料的處理。
9. react-app-rewired: 修改 webpack 用。
10. generate-react-cli: 可以依自己建置的模板快速建立 component。

最後

這樣就可以開始屬於你的前端之旅了，下次見~