diff --git a/進階_React框架/docs/Nodejs.md b/進階_React框架/docs/Nodejs.md index 1a1b4e5..5bc5f33 100644 --- a/進階_React框架/docs/Nodejs.md +++ b/進階_React框架/docs/Nodejs.md @@ -1,24 +1,24 @@ -# 🌟 Node.js 與 npm 簡介 +# Node.js 與 npm 簡介 -## 📌 Node.js 是什麼? +## Node.js 是什麼? Node.js 是一個 **不需要開啟網頁就能執行 JavaScript** 的環境,讓 JavaScript 可以在 **伺服器端運行**,而不只是瀏覽器內使用。 -## 📌 npm(Node Package Manager)是什麼? +## 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 本身是 **JavaScript 寫成的工具**,需要 Node.js 在背景執行來處理指令。 +雖然 **React 只負責前端開發,不會用到 Node.js**,但仍然需要 npm 來安裝開發工具與相關套件。 -**例如,開發 React 項目時,你可能會用到以下工具:** +開發 React 項目時,常見的 npm 套件如下: -### 📦 **常用 npm 套件(React 開發必備)** +### 常用 npm 套件(React 開發必備) | **類別** | **套件名稱** | **用途** | |----------|------------|---------| | **React 本體** | `react`, `react-dom` | React 組件核心 | @@ -31,59 +31,12 @@ npm 本身是 **JavaScript 寫成的工具**,**需要 Node.js 在背景執行* --- -## 🚀 如何安裝 Node.js 與 npm? -📌 **1. 下載與安裝 Node.js(自動附帶 npm)** -🔗 [Node.js 官方網站](https://nodejs.org/)(建議下載 LTS 版本) +## 安裝 Node.js 與 npm +### 1. 下載與安裝 Node.js(自動附帶 npm) +官方下載連結:[Node.js 官網](https://nodejs.org/)(建議下載 LTS 版本) -📌 **2. 檢查 Node.js 與 npm 是否安裝成功** -```bash +### 2. 在Vscode檢查安裝是否成功 +``` 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 ```