---
# System prepended metadata

title: React + Vite 教學：新手指南
tags: [網頁教學]

---

# 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創作，若有錯誤請備註。
- [✔️] 分享貼文請標註來源。
