diff --git a/進階_React框架/assets/startReact.png b/進階_React框架/assets/startReact.png new file mode 100644 index 0000000..8a8b128 Binary files /dev/null and b/進階_React框架/assets/startReact.png differ diff --git a/進階_React框架/docs/Nodejs.md b/進階_React框架/docs/Basic.md similarity index 100% rename from 進階_React框架/docs/Nodejs.md rename to 進階_React框架/docs/Basic.md diff --git a/進階_React框架/docs/CreateReact.md b/進階_React框架/docs/CreateReact.md new file mode 100644 index 0000000..c493129 --- /dev/null +++ b/進階_React框架/docs/CreateReact.md @@ -0,0 +1,87 @@ +# 創建一個React專案 +於準備開發的資料夾下方開啟CMD,並執行 +``` +npm create vite@latest my-project --template react-ts +cd my-project +npm install +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