DAY1(2025/06/14)

[TOC]

# DAY1(2025/06/14)React

## 進度日誌
- 完成 React + TypeScript 專案初始化（使用 Vite 建立 my-react-ts-app，安裝所有依賴）
- 完成建立第一個元件 Hello，學會 props 傳遞與 TypeScript 型別定義

## 筆記區📘 React

### 🛠️ 專案建立流程

####

npm create vite@latest my-react-ts-app -- --template react-ts
cd my-react-ts-app
npm install
npm run dev

#### 📂 專案結構重點

- `src/`：主要程式碼
- `App.tsx`：主元件（可以想成首頁）
- `main.tsx`：程式的進入點

#### Vite、React、TypeScript 小知識

- **Vite**：現代快速啟動器，幫你配置好大部分開發環境。
- **React**：以元件（Component）為單位組網頁。
- **TypeScript**：JavaScript 超集，加入型別，更安全好維護。

### 🏗️ Hello 元件實作

#### 1️⃣ 建立 Hello.tsx ( 在src/components/WelcomeCard.tsx )

import React from 'react';

// 🧠 定義 Props 型別
type HelloProps = {
  name: string;
  age: number;
};

// ✅ 函式型元件，使用 props + TypeScript 型別
const Hello: React.FC<HelloProps> = ({ name, age }) => {
  return (
    <div>
        Hello,world.<br />
        Hello {name}，你今年 {age} 歲！
    </div>
  );
};

export default Hello;

##### 元件（Component）
- 類似Function
- 寫法const Hello = () => .........;
- React 就是把畫面拆成一塊一塊的小零件，這些零件你可以重複使用、自由組合。
##### props
- 就像元件的「參數」。
- name 跟 age 就是 props
##### TypeScript 型別定義
- TypeScript 可以強制規定每個 props 必須是什麼型別。
- 寫法是type Hello={};

#### 2️⃣ 在 App.tsx 使用元件 ( 在 src/App.tsx )

import React from 'react';
import Hello from './components/Hello';

function App() {
  return (
    <div>
      <h1>第一個元件</h1>
      <Hello name="宸維(Shiki)" age={21} />
    </div>
  );
}

export default App;