This commit is contained in:
Tim_note 2025-02-08 12:39:40 +08:00
parent 47696bab8d
commit 8da093375b
2 changed files with 1 additions and 78 deletions

View File

@ -1,5 +1,5 @@
### 文件導航測試 ### 文件導航測試
- [(必要)了解基本知識](docs/Nodejs.md) - [(必要)了解基本知識](docs/Basic.md)
# React # React

View File

@ -8,80 +8,3 @@ npm run dev
``` ```
![image](../assets/startReact.png) ![image](../assets/startReact.png)
# ## Node.js 是什麼?
# Node.js 是一個 **不需要開啟網頁就能執行 JavaScript** 的環境,讓 JavaScript 可以在 **伺服器端運行**,而不只是瀏覽器內使用。
# ## npmNode 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 官網](https://nodejs.org/)(建議下載 LTS 版本)
# ### 2. 在Vscode終端檢查安裝是否成功
# ```
# node -v # 檢查 Node.js 版本
# npm -v # 檢查 npm 版本
# ```
# ### 3. 如果遇到無法使用npm指令?
# ![image](../assets/npmbug1.JPG)
# #### a.在「開始功能表」搜尋 PowerShell
# #### b.右鍵「以系統管理員身份執行」
# ```
# Set-ExecutionPolicy RemoteSigned -Scope CurrentUser
# ```
# ```
# Y
# ```
# # Vite
# ## 什麼是 Vite
# Vite 是一個 **現代化的前端開發工具**,主要用於快速建立與運行 **React、Vue、Svelte、Solid.js 等前端框架**
# 它的核心目標是 **提供極速的開發體驗**,比傳統的 Webpack 快 10 倍以上。
# ### 使用Vite創建專案
# #### ReactJavaScript
# ```
# npm create vite@latest my-react-app --template react
# ```
# #### ReactTypeScript
# ```
# npm create vite@latest my-react-app --template react-ts
# ```
# #### Vue 3JavaScript
# ```
# npm create vite@latest my-vue-app --template vue
# ```
# #### Vue 3TypeScript
# ```
# npm create vite@latest my-vue-app --template vue-ts
# ```