Frontend/進階_React框架/docs/Basic.md

Node.js 與 npm 簡介

Node.js 是什麼？

Node.js 是一個 不需要開啟網頁就能執行 JavaScript 的環境，讓 JavaScript 可以在 伺服器端運行，而不只是瀏覽器內使用。

npm（Node Package Manager）是什麼？

npm 是 Node.js 內建的套件管理工具，類似於 pip（Python）或 NuGet（C#）。
它的主要用途包括：

• 管理 JavaScript 套件（安裝、更新、移除）
• 處理前端與後端的開發依賴
• 自動化開發工作（如打包、測試、部署）

---

為什麼使用 React 仍然需要 npm？

npm 本身是 JavaScript 寫成的工具，需要 Node.js 在背景執行來處理指令。
雖然 React 只負責前端開發，不會用到 Node.js，但仍然需要 npm 來安裝開發工具與相關套件。

開發 React 項目時，常見的 npm 套件如下：

常用 npm 套件（React 開發必備）

類別	套件名稱	用途
React 本體	react, react-dom	React 組件核心
開發工具	vite, webpack	開發環境、建置專案
TypeScript 支援	typescript	強型別 JavaScript
狀態管理	redux, zustand	管理全域狀態
UI 框架	tailwindcss, material-ui	美化前端 UI
前端路由	react-router-dom	處理單頁應用（SPA）導航
API 請求	axios, fetch	透過 HTTP 取得數據

---

安裝 Node.js 與 npm

1. 下載與安裝 Node.js（自動附帶 npm）

官方下載連結：Node.js 官網（建議下載 LTS 版本）

2. 在Vscode終端檢查安裝是否成功

node -v  # 檢查 Node.js 版本
npm -v   # 檢查 npm 版本

3. 如果遇到無法使用npm指令?

a.在「開始功能表」搜尋 PowerShell

b.右鍵「以系統管理員身份執行」

Set-ExecutionPolicy RemoteSigned -Scope CurrentUser

Y

Vite

什麼是 Vite？

Vite 是一個 現代化的前端開發工具，主要用於快速建立與運行 React、Vue、Svelte、Solid.js 等前端框架。
它的核心目標是 提供極速的開發體驗，比傳統的 Webpack 快 10 倍以上。

使用Vite創建專案

React（JavaScript）

npm create vite@latest my-react-app --template react

React（TypeScript）

npm create vite@latest my-react-app --template react-ts

Vue 3（JavaScript）

npm create vite@latest my-vue-app --template vue

Vue 3（TypeScript）

npm create vite@latest my-vue-app --template vue-ts