2.6 KiB
2.6 KiB
🌟 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 套件（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. 檢查 Node.js 與 npm 是否安裝成功
node -v # 檢查 Node.js 版本
npm -v # 檢查 npm 版本
# Vscode編譯器
vscode本身沒有支援npm，需去下載nodejs，https://nodejs.org/zh-tw
下載完vscode終端檢查有無node.js
node -v
檢查有無npm
npm -v
# Package.json
這個跟nuget一樣會有一個dependencies去記錄你安裝的套件
"dependencies": { "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.7.0" }
當別人拿到你的程式碼時，他們只需要執行
npm install
先下載Node.js 並安裝
於準備開發的資料夾下方開啟CMD
檢查有無node.js
npm -v
# React
## 基於VUE 可以更有效率地進行前端，省了很多路由部分，可以直接創建Page即可開始
先下載Node.js 並安裝
於準備開發的資料夾下方開啟CMD
檢查有無node.js
npm -v