From 8da093375b77dc0fcf96c1423537ba8c2ed6a22d Mon Sep 17 00:00:00 2001 From: Tim_note Date: Sat, 8 Feb 2025 12:39:40 +0800 Subject: [PATCH] aa --- 進階_React框架/README.md | 2 +- 進階_React框架/docs/CreateReact.md | 77 ------------------------------ 2 files changed, 1 insertion(+), 78 deletions(-) diff --git a/進階_React框架/README.md b/進階_React框架/README.md index 7235927..b719774 100644 --- a/進階_React框架/README.md +++ b/進階_React框架/README.md @@ -1,5 +1,5 @@ ### 文件導航測試 -- [(必要)了解基本知識](docs/Nodejs.md) +- [(必要)了解基本知識](docs/Basic.md) # React diff --git a/進階_React框架/docs/CreateReact.md b/進階_React框架/docs/CreateReact.md index c493129..bfffcd2 100644 --- a/進階_React框架/docs/CreateReact.md +++ b/進階_React框架/docs/CreateReact.md @@ -8,80 +8,3 @@ npm run dev ``` ![image](../assets/startReact.png) - -# ## 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 官網](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創建專案 -# #### 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 - -# ``` \ No newline at end of file