大重建：用 React 重写你的网站

你的任务

把第 1–2 级的网站用 React 再建。像退步？不是——最好的训练：内容和设计已经有了，可以专心新技术。最后你会黑白分明地看到专业人士为什么觉得值得。

重建计划

1. 把网站拆成组件。 拿纸笔（认真的！）把网站画成盒子：Header、Gallery、Quiz、Footer……每个盒子 = src/ 里一个文件。

2. 把 HTML 移进组件。 从旧 .html 文件一块块复制到 JSX。注意熟悉的差异：class → className，每个组件返回一个包裹元素。图片复制到 Vite 项目的 public/ 文件夹——路径像 /images/team.jpg 不用改。

3. 移 CSS。 把 style.css 内容复制到 src/App.css。几乎不用改——CSS 还是 CSS。

4. 把数据抽成数组。 卡片、结果、画廊照片——重复的都变成对象数组 + .map()，组件课里学的方式。

5. 把第 2 级法术改写成 state。 对照表：

   Level 2 (plain JavaScript)	React
   getElementById + textContent	state + {value} in JSX
   addEventListener("click", ...)	onClick={...}
   classList.toggle + CSS .hidden	boolean state + {condition && (...)}
   a counter with a variable	useState with a number

跟我看：React 方式的深色模式

一起重写一个法术，看转换：

import { useState } from 'react';
import Header from './Header.jsx';
import Gallery from './Gallery.jsx';

function App() {
  const [dark, setDark] = useState(
    localStorage.getItem("mode") === "dark"
  );

  function toggleMode() {
    const newMode = !dark;
    setDark(newMode);
    localStorage.setItem("mode", newMode ? "dark" : "light");
  }

  return (
    <div className={dark ? "dark" : ""}>
      <Header onToggle={toggleMode} dark={dark} />
      <Gallery />
    </div>
  );
}

export default App;

Header.jsx 里，按钮通过 prop 收到函数：

function Header({ onToggle, dark }) {
  return (
    <header>
      <h1>My website</h1>
      <button onClick={onToggle}>{dark ? "☀️" : "🌙"}</button>
    </header>
  );
}

最后一样新东西：prop 也可以是函数。App 拥有 state，借给子组件切换按钮。这叫”state 在顶层”，是 React 最常见的模式。

重建清单

• 网站拆成至少 4 个组件，各在单独文件
• 重复元素（卡片、照片……）从数组经 .map() 生成
• 至少两个互动点用 useState
• 深色模式可用且被记住（localStorage）
• 控制台无错误
• 代码里没有任何 getElementById 😉

这堂课你要记住

• 重建：拆组件 → 移 HTML 和 CSS → 数据进数组 → 法术变 state。
• prop 也可以是函数——父组件借给子组件控制自己 state 的按钮。
• 同样结果，更干净结构：少复制，易改动。看得见的进步。

© 2026 Ing. Martin Polak / AlgoRhino · 内容使用条款