const name = "React";
const element = <h1>Hello, {name}!</h1>;

const videoUrl = "https://youtu.be/dQw4w9WgXcQ?si=aQXMJMbKnZDvqpuZ";
const element = <a href={videoUrl}>影片</a>;

<div className="container"></div>

const style = { color: "blue", fontSize: "20px" };
<div style={style}>Hello</div>

src/
├── components/
│   ├── common/
│   │   ├── Button.jsx
│   │   ├── InputField.jsx
│   │   └── ...
│   ├── layout/
│   │   ├── Header.jsx
│   │   ├── Footer.jsx
│   │   └── Sidebar.jsx
│   └── pages/
│       ├── HomePage.jsx
│       ├── AboutPage.jsx
│       └── ...
├── App.jsx
├── index.js
└── ...

function App() {
  return <h1>hello world</h1>;
}

export default App;

return (
  <React.Fragment>
    <h1>Title</h1>
    <p>Content</p>
  </React.Fragment>
);

<Square></Square>
// 沒有子元素
<Square />

<img src="logo.png" alt="Logo" />
<input type="text" />
<br />
<hr />

// 父組件傳遞 props：
function ParentComponent() {
  return <ChildComponent name="yourName" age={16} />;
}

// 子組件接收 props：
function ChildComponent(props) {
  return (
    <div>
      <p>Name: {props.name}</p>
      <p>Age: {props.age}</p>
    </div>
  );
}

// 解構賦值：將物件中的資料拆開成獨立的變數
function ChildComponent({ name, age }) {
  return (
    <div>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
    </div>
  );
}

// 利用 props.children 傳遞嵌套的內容

function Wrapper({ children }) {
  return <div className="wrapper">{children}</div>;
}

function App() {
  return (
    <Wrapper>
      <h1>Hello, React!</h1>
      <p>This is inside the wrapper.</p>
    </Wrapper>
  );
}

function handleClick() {
  alert("Button clicked!");
}

// 駝峰命名法 onClick
<button onClick={handleClick}>
  Click Me
</button>

// 全小寫 onclick
<button onclick="handleClick()">
  Click Me
</button>

// 函式() 會立刻執行
return (
<button onClick={handleClick()}>
  Click Me
</button>
)

// 如果需要傳遞參數給函式呢？例如：
function showMessage(name) {
  alert(`Hello, ${name}!`);
}

// 可以使用箭頭函式
return (
<button onClick={() => showMessage("建北電資")}>
  Click Me
</button>
)

function Counter() {
  let count = 0;

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => count = count + 1}>Increment</button>
    </div>
  );
}

export default Counter;

function Counter() {
  let count = 0;

  console.log("點擊前：", count);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => {
        count = count + 1;
        console.log("點擊後：", count);
      }}>Increment</button>
    </div>
  );
}

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0); // 初始值為 0

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default Counter;

import { useState, useEffect } from "react";

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    console.log("計時開始...");
    const interval = setInterval(() => {
      setSeconds((prev) => prev + 1);
    }, 1000);

    // 清除計時器，組件卸載後停止運作
    return () => {
      console.log("計時器清除");
      clearInterval(interval);
    };
  }, []); // 空陣列代表只在組件掛載時執行一次

  return <p>計時：{seconds} 秒</p>;
}

export default Timer;

import { useState, createContext, useContext } from "react";

// 1. 建立 Context
const ThemeContext = createContext();

function App() {
  const [theme, setTheme] = useState("light");

  return (
    // 2. 提供 Context 值
    <ThemeContext.Provider value={theme}>
      <button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
        切換主題
      </button>
      <ChildComponent />
    </ThemeContext.Provider>
  );
}

function ChildComponent() {
  // 3. 在子組件中使用 Context
  const theme = useContext(ThemeContext);

  return <p>目前的主題是：{theme}</p>;
}

export default App;

import { useState, useMemo } from "react";

function ExpensiveCalculation({ number }) {
  const squared = useMemo(() => {
    console.log("計算平方中...");
    return number * number;
  }, [number]); // useMemo 只有當 number 變更時才重新執行計算

  return <p>平方結果：{squared}</p>;
}

function App() {
  const [num, setNum] = useState(0);

  return (
    <div>
      <input 
        type="number" 
        value={num} 
        onChange={(e) => setNum(Number(e.target.value))} 
      />
      <ExpensiveCalculation number={num} />
    </div>
  );
}

export default App;

if (條件一) {
    若條件一為 true，執行此區塊內的程式碼
}
else if (條件二) {
    若條件一為 false，但條件二為 true，執行此區塊內的程式碼
}
else {
    若以上所有條件皆為 false，執行此區塊內的程式碼
}

function Greeting({ isLoggedIn }) {
  if (isLoggedIn) {
    return <h1>Welcome Back!</h1>;
  }
  else {
    return <h1>Please Log In</h1>;
  }
}

export default Greeting;

// 三元運算子
條件 ? 若條件為 true，返回此值 : 若條件為 false，返回此值

// 巢狀三元運算子
條件一 ?
  若條件一為 true，返回此值
: 
	條件二 ? 
  	  若條件一為 false、條件二為 true，返回此值
    : 
	  若條件一為 false、條件二為 false，返回此值

function Greeting({ isLoggedIn }) {
  return (
    <h1>{isLoggedIn ? "Welcome Back!" : "Please Log In"}</h1>
  );
}

export default Greeting

// &&
條件 && 若條件為 true，返回此值
// 若左側為 false，返回左側（false 不渲染）

// ||
值 || 預設值
// 若左側為 false，返回右側；若左側為 true，返回左側
// 左側為 false -> false、0、""、null、undefined、NaN

function Message({ unreadMessages }) {
  return (
    <div>
      {unreadMessages.length > 0 && <p>你有 {unreadMessages.length} 則未讀訊息</p>}
    </div>
  );
}

export default Message;

function Message({ username }) {
  return (
    <div>
      <p>歡迎, {username || "訪客"}！</p>
    </div>
  );
}

export default Message;

function UserList() {
  const users = [
    { name: "小明", score: 90 },
    { name: "小美", score: 88 },
    { name: "小華", score: 60 },
  ];
  return (
    <ul>
      {users.map((user) => (
        <li>
          {user.name} - {user.score} 分
        </li>
      ))}
    </ul>
  );
}

function UserList() {
  const users = [
    { id: 1, name: "小明", score: 90 },
    { id: 2, name: "小美", score: 88 },
    { id: 3, name: "小華", score: 60 },
  ];
  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>
          {user.name} - {user.score} 分
        </li>
      ))}
    </ul>
  );
}

import { BrowserRouter as Router, Route, Routes } from "react-router-dom";

function Home() {
  return <h2>首頁</h2>;
}

function About() {
  return <h2>關於我們</h2>;
}

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
}

export default App;

import { BrowserRouter as Router, Route, Routes, Link } from "react-router-dom";

function App() {
  return (
    <Router>
      <nav>
        <Link to="/">首頁</Link> | <Link to="/about">關於我們</Link>
      </nav>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
}

import { useNavigate } from "react-router-dom";

function Home() {
  const navigate = useNavigate();

  return (
    <div>
      <h2>首頁</h2>
      <button onClick={() => navigate("/about")}>前往關於我們</button>
    </div>
  );
}

import React from 'react';
import { HashRouter, Route, Link, Switch } from 'react-router-dom';

function App() {
  return (
    <HashRouter>
      <nav>
        <ul>
          <li><Link to="/home">Home</Link></li>
          <li><Link to="/about">About</Link></li>
        </ul>
      </nav>

      <Switch>
        <Route path="/home">
          <h2>Home Page</h2>
        </Route>
        <Route path="/about">
          <h2>About Page</h2>
        </Route>
      </Switch>
    </HashRouter>
  );
}

export default App;

import { BrowserRouter as Router, Route, Routes, Link } from "react-router-dom";

function App() {
  return (
    <Router>
      <nav>
        <Link to="/">首頁</Link> | <Link to="/about">關於我們</Link>
      </nav>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
}

npm install gh-pages --save-dev

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  base: '/你的儲存庫名/',
  plugins: [react()],
})

"homepage": "https://你的GitHub用戶名.github.io/儲存庫名"

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "serve": "vite preview",
  "predeploy": "npm run build",
  "deploy": "gh-pages -d dist"
},

"homepage": "https://你的GitHub用戶名.github.io/儲存庫名",

git init

git remote add origin https://github.com/你的GitHub用戶名/儲存庫名.git

git add .
git commit -m "Initial commit"

git branch -M main
git push -u origin main

npm run deploy

https://你的GitHub用戶名.github.io/儲存庫名