# React + Vite 教學：新手指南 ## 目標 - 介紹如何使用 React 和 Vite 建立一個新專案。 - 解釋基本的 HTML 和 CSS 定義及其用意。 ## 先決條件 - 基本的 HTML 和 CSS 知識。 - 安裝 Node.js 和 npm。 ## 步驟 1：設定開發環境 ### 1.1 安裝 Node.js 和 npm 從 [Node.js 官網](https://nodejs.org/) 下載並安裝最新版本的 Node.js，它會自動安裝 npm。 ### 1.2 安裝 Vite 開啟終端機並執行以下指令來全域安裝 Vite： ```bash npm install -g create-vite ``` ### 1.3 建立新專案 使用 Vite 建立新專案： ```bash create-vite my-react-app --template react ``` ### 1.4 安裝依賴 進入專案目錄並安裝依賴： ```bash cd my-react-app npm install ``` ### 1.5 啟動開發伺服器 啟動開發伺服器來預覽應用程式： ```bash npm run dev ``` ## 步驟 2：了解基本的 HTML 和 CSS ### 2.1 HTML 結構 HTML 是網頁的骨架，包含各種元素標籤。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My React App</title> </head> <body> <div id="root"></div> </body> </html> ``` - `<!DOCTYPE html>`：聲明文件類型為 HTML。 - `<html lang="en">`：定義 HTML 文件的語言為英文。 - `<meta charset="UTF-8">`：設定字符編碼為 UTF-8。 - `<meta name="viewport" content="width=device-width, initial-scale=1.0">`：設置視窗大小及縮放。 - `<title>`：設定網頁標題。 - `<div id="root">`：React 會在此處渲染應用程式。 ### 2.2 CSS 定義 CSS 用於控制 HTML 元素的樣式。 ```css /* src/styles.css */ .section { padding: 20px; background-color: #f0f0f0; } ``` - `.section`：選擇器，選擇 class 名為 `section` 的元素。 - `padding: 20px;`：設定內邊距為 20 像素。 - `background-color: #f0f0f0;`：設定背景顏色為淺灰色。 ## 步驟 3：在 React 中使用 HTML 和 CSS ### 3.1 編寫 React 元件 在 `src` 目錄下創建一個新的 React 元件： ```jsx // src/components/MyComponent.jsx import React from 'react'; import './styles.css'; function MyComponent() { return ( <div className="section"> <h1>Hello, React + Vite!</h1> <p>This is a simple React component.</p> <a href="https://vitejs.dev" target="_blank" rel="noopener noreferrer">Learn Vite</a> </div> ); } export default MyComponent; ``` - `import React from 'react';`：導入 React 庫。 - `import './styles.css';`：導入 CSS 文件。 - `className="section"`：將 class 設定為 `section` 來應用 CSS 樣式。 - `<a href="https://vitejs.dev" target="_blank" rel="noopener noreferrer">Learn Vite</a>`：設置連結，`href` 定義連結目標，`target="_blank"` 打開新窗口，`rel="noopener noreferrer"` 提高安全性。 ### 3.2 在應用程式中使用元件 修改 `src/main.jsx` 來渲染元件： ```jsx // src/main.jsx import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import MyComponent from './components/MyComponent'; ReactDOM.createRoot(document.getElementById('root')).render( <React.StrictMode> <MyComponent /> </React.StrictMode> ); ``` - `import React from 'react';` 和 `import ReactDOM from 'react-dom';`：導入 React 和 ReactDOM 庫。 - `import './index.css';`：導入主 CSS 文件。 - `import MyComponent from './components/MyComponent';`：導入剛剛創建的元件。 - `ReactDOM.createRoot(document.getElementById('root')).render(...)`：在 `root` 容器中渲染 React 應用程式。 ### 3.3 編寫主 CSS 文件 在 `src` 目錄下創建 `index.css` 文件： ```css /* src/index.css */ body { font-family: Arial, sans-serif; margin: 0; padding: 0; } ``` - `font-family: Arial, sans-serif;`：設置字體。 - `margin: 0; padding: 0;`：移除預設邊距和內邊距。 ## 步驟 4：運行應用程式 確保開發伺服器正在運行，然後打開瀏覽器並訪問 `http://localhost:3000`。您應該會看到 "Hello, React + Vite!" 和一個連結到 Vite 官方網站的頁面。 --- - [✔️] 此文章部分內容為AI創作，若有錯誤請備註。 - [✔️] 分享貼文請標註來源。