1
http://localhost:5173/

1
react-beginner/
2
├─ index.html
3
├─ package.json
4
├─ src/
5
│  ├─ main.tsx
6
│  ├─ App.tsx
7
│  ├─ App.css
8
│  └─ index.css
9
└─ vite.config.ts

1
import { StrictMode } from "react";
2
import { createRoot } from "react-dom/client";
3
import "./index.css";
4
import App from "./App.tsx";
5

6
createRoot(document.getElementById("root")!).render(
7
  <StrictMode>
8
    <App />
9
  </StrictMode>,
10
);

1
function App() {
2
  return (
3
    <h1>标题</h1>
4
    <p>正文</p>
5
  );
6
}

1
function App() {
2
  return (
3
    <>
4
      <h1>标题</h1>
5
      <p>正文</p>
6
    </>
7
  );
8
}

1
function App() {
2
  return (
3
    <div>
4
      <h1>标题</h1>
5
      <p>正文</p>
6
    </div>
7
  );
8
}

1
<div class="card" tabindex="0"></div>

1
<div className="card" tabIndex={0}></div>

1
const user = {
2
  name: "小明",
3
  age: 18,
4
};
5

6
export default function App() {
7
  return (
8
    <section>
9
      <h1>{user.name}</h1>
10
      <p>明年 {user.age + 1} 岁</p>
11
    </section>
12
  );
13
}

1
<h1>{if (ok) "成功"}</h1>

1
<h1>{ok ? "成功" : "失败"}</h1>

1
const text = ok ? "成功" : "失败";
2
return <h1>{text}</h1>;

1
function App() {
2
  return (
3
    <h1 style={{ color: "tomato", fontSize: 32 }}>
4
      Hello React
5
    </h1>
6
  );
7
}

1
<button className={isActive ? "tab active" : "tab"}>文章</button>

1
const html = "<h1>Hello</h1>";
2
return <div>{html}</div>;

1
type CardProps = {
2
  title: string;
3
  children: React.ReactNode;
4
};
5

6
function Card({ title, children }: CardProps) {
7
  return (
8
    <section className="card">
9
      <h2>{title}</h2>
10
      <div>{children}</div>
11
    </section>
12
  );
13
}
14

15
export default function App() {
16
  return (
17
    <Card title="学习提醒">
18
      <p>今天先学组件和 props，不要急着学 Redux。</p>
19
    </Card>
20
  );
21
}

1
<UserCard
2
  userId="1"
3
  userName="小明"
4
  userAvatar="/a.png"
5
  userRole="admin"
6
  userStatus="active"
7
  showAvatar
8
  showRole
9
  showStatus
10
  isClickable
11
  isSelected
12
  onClick={handleClick}
13
/>

1
function Counter() {
2
  const [count, setCount] = useState(0);
3

4
  function handleClick() {
5
    setCount(count + 1);
6
    console.log(count);
7
  }
8

9
  return <button onClick={handleClick}>{count}</button>;
10
}

1
setCount((prev) => prev + 1);
2
setCount((prev) => prev + 1);
3
setCount((prev) => prev + 1);

1
const [user, setUser] = useState({ name: "小明", age: 18 });
2

3
function grow() {
4
  user.age += 1;
5
  setUser(user);
6
}

1
function grow() {
2
  setUser((prev) => ({
3
    ...prev,
4
    age: prev.age + 1,
5
  }));
6
}

1
const [todos, setTodos] = useState(["学习 JSX"]);
2

3
todos.push("学习 State");
4
setTodos(todos);

1
setTodos((prev) => [...prev, "学习 State"]);

1
setTodos((prev) => prev.filter((item) => item !== "学习 JSX"));

1
setTodos((prev) =>
2
  prev.map((item) => (item === "学习 JSX" ? "学习 JSX 和组件" : item)),
3
);

1
const [firstName, setFirstName] = useState("小");
2
const [lastName, setLastName] = useState("明");
3
const [fullName, setFullName] = useState("小明");

1
const fullName = firstName + lastName;

1
function UserPanel({ user }: { user: { name: string } | null }) {
2
  if (!user) {
3
    return <p>请先登录</p>;
4
  }
5

6
  return <p>欢迎你，{user.name}</p>;
7
}

1
function LoginStatus({ isLogin }: { isLogin: boolean }) {
2
  return <p>{isLogin ? "已登录" : "未登录"}</p>;
3
}

1
function ErrorMessage({ error }: { error?: string }) {
2
  return <>{error && <p className="error">{error}</p>}</>;
3
}

1
{count && <p>有数据</p>}

1
{count > 0 && <p>有数据</p>}

1
function NameForm() {
2
  const [name, setName] = useState("");
3

4
  return (
5
    <label>
6
      姓名
7
      <input
8
        value={name}
9
        onChange={(event) => setName(event.target.value)}
10
      />
11
    </label>
12
  );
13
}

1
import type { FormEvent } from "react";
2

3
function ContactForm() {
4
  function handleSubmit(event: FormEvent<HTMLFormElement>) {
5
    event.preventDefault();
6
    const formData = new FormData(event.currentTarget);
7
    const email = String(formData.get("email") ?? "").trim();
8
    console.log(email);
9
  }
10

11
  return (
12
    <form onSubmit={handleSubmit}>
13
      <input name="email" type="email" required />
14
      <button type="submit">提交</button>
15
    </form>
16
  );
17
}

1
import { useActionState } from "react";
2
import { useFormStatus } from "react-dom";
3

4
type FormState = {
5
  message: string;
6
};
7

8
async function saveProfile(
9
  _prevState: FormState,
10
  formData: FormData,
11
): Promise<FormState> {
12
  const name = String(formData.get("name") ?? "").trim();
13

14
  if (!name) {
15
    return { message: "请输入姓名" };
16
  }
17

18
  await new Promise((resolve) => setTimeout(resolve, 500));
19
  return { message: `保存成功：${name}` };
20
}
21

22
function SubmitButton() {
23
  const { pending } = useFormStatus();
24

25
  return (
26
    <button type="submit" disabled={pending}>
27
      {pending ? "保存中..." : "保存"}
28
    </button>
29
  );
30
}
31

32
export default function ProfileForm() {
33
  const [state, formAction] = useActionState(saveProfile, { message: "" });
34

35
  return (
36
    <form action={formAction}>
37
      <input name="name" placeholder="请输入姓名" />
38
      <SubmitButton />
39
      {state.message && <p>{state.message}</p>}
40
    </form>
41
  );
42
}

1
useEffect(() => {
2
  document.title = `未完成：${remaining}`;
3
}, [remaining]);

1
function UserList() {
2
  const [users, setUsers] = useState<User[]>([]);
3
  const [loading, setLoading] = useState(true);
4
  const [error, setError] = useState("");
5

6
  useEffect(() => {
7
    let ignore = false;
8

9
    async function loadUsers() {
10
      try {
11
        setLoading(true);
12
        setError("");
13
        const response = await fetch("/api/users");
14

15
        if (!response.ok) {
16
          throw new Error("加载用户失败");
17
        }
18

19
        const data = (await response.json()) as User[];
20

21
        if (!ignore) {
22
          setUsers(data);
23
        }
24
      } catch (err) {
25
        if (!ignore) {
26
          setError(err instanceof Error ? err.message : "未知错误");
27
        }
28
      } finally {
29
        if (!ignore) {
30
          setLoading(false);
31
        }
32
      }
33
    }
34

35
    loadUsers();
36

37
    return () => {
38
      ignore = true;
39
    };
40
  }, []);
41

42
  if (loading) return <p>加载中...</p>;
43
  if (error) return <p>{error}</p>;
44

45
  return (
46
    <ul>
47
      {users.map((user) => (
48
        <li key={user.id}>{user.name}</li>
49
      ))}
50
    </ul>
51
  );
52
}

1
function App({ ok }: { ok: boolean }) {
2
  if (ok) {
3
    const [count, setCount] = useState(0);
4
  }
5

6
  return null;
7
}

1
function App({ ok }: { ok: boolean }) {
2
  const [count, setCount] = useState(0);
3

4
  if (!ok) {
5
    return null;
6
  }
7

8
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
9
}

1
function formatName(name: string) {
2
  const [prefix] = useState("用户");
3
  return `${prefix}: ${name}`;
4
}

1
import { useRef } from "react";
2

3
function FocusInput() {
4
  const inputRef = useRef<HTMLInputElement>(null);
5

6
  function focus() {
7
    inputRef.current?.focus();
8
  }
9

10
  return (
11
    <>
12
      <input ref={inputRef} />
13
      <button onClick={focus}>聚焦输入框</button>
14
    </>
15
  );
16
}

1
function ClickTracker() {
2
  const clickCountRef = useRef(0);
3

4
  function handleClick() {
5
    clickCountRef.current += 1;
6
    console.log("点击次数", clickCountRef.current);
7
  }
8

9
  return <button onClick={handleClick}>点击</button>;
10
}

1
const visibleTodos = useMemo(() => {
2
  return todos.filter((todo) => todo.text.includes(keyword));
3
}, [todos, keyword]);

1
const handleDelete = useCallback((id: string) => {
2
  setTodos((prev) => prev.filter((todo) => todo.id !== id));
3
}, []);

1
type Todo = {
2
  id: string;
3
  text: string;
4
  done: boolean;
5
};
6

7
type Action =
8
  | { type: "add"; text: string }
9
  | { type: "toggle"; id: string }
10
  | { type: "remove"; id: string };
11

12
function todoReducer(state: Todo[], action: Action): Todo[] {
13
  switch (action.type) {
14
    case "add":
15
      return [
16
        { id: crypto.randomUUID(), text: action.text, done: false },
17
        ...state,
18
      ];
19
    case "toggle":
20
      return state.map((todo) =>
21
        todo.id === action.id ? { ...todo, done: !todo.done } : todo,
22
      );
23
    case "remove":
24
      return state.filter((todo) => todo.id !== action.id);
25
    default:
26
      return state;
27
  }
28
}

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

3
type Theme = "light" | "dark";
4

5
type ThemeContextValue = {
6
  theme: Theme;
7
  toggleTheme: () => void;
8
};
9

10
const ThemeContext = createContext<ThemeContextValue | null>(null);
11

12
function useTheme() {
13
  const value = useContext(ThemeContext);
14

15
  if (!value) {
16
    throw new Error("useTheme must be used within ThemeProvider");
17
  }
18

19
  return value;
20
}
21

22
function ThemeProvider({ children }: { children: React.ReactNode }) {
23
  const [theme, setTheme] = useState<Theme>("light");
24

25
  function toggleTheme() {
26
    setTheme((prev) => (prev === "light" ? "dark" : "light"));
27
  }
28

29
  return (
30
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
31
      {children}
32
    </ThemeContext.Provider>
33
  );
34
}
35

36
function ThemeButton() {
37
  const { theme, toggleTheme } = useTheme();
38

39
  return <button onClick={toggleTheme}>当前主题：{theme}</button>;
40
}

1
function Parent() {
2
  const [selectedId, setSelectedId] = useState<string | null>(null);
3

4
  return (
5
    <>
6
      <Sidebar selectedId={selectedId} onSelect={setSelectedId} />
7
      <Detail selectedId={selectedId} />
8
    </>
9
  );
10
}

1
function SearchPage() {
2
  const [keyword, setKeyword] = useState("");
3

4
  return (
5
    <>
6
      <SearchInput value={keyword} onChange={setKeyword} />
7
      <SearchResult keyword={keyword} />
8
    </>
9
  );
10
}

1
const [items, setItems] = useState<Item[]>([]);
2
const [selectedItem, setSelectedItem] = useState<Item | null>(null);

1
const [items, setItems] = useState<Item[]>([]);
2
const [selectedId, setSelectedId] = useState<string | null>(null);
3

4
const selectedItem = items.find((item) => item.id === selectedId) ?? null;