React 快速入门（2025 版）｜30 分钟从 0 到 Hello Vite + React 18

赛博切图仔

已于 2025-08-02 23:06:10 修改

阅读量255

点赞数 6

CC 4.0 BY-SA版权

分类专栏： React 筑基：从零到上手的 100 次心跳文章标签： react.js 前端前端框架 javascript

于 2025-08-02 22:58:53 首次发布

本文链接：https://blog.csdn.net/weixin_48221903/article/details/149865809

React 筑基：从零到上手的 100 次心跳专栏收录该内容

4 篇文章

订阅专栏

适用人群：
• 已掌握 HTML / CSS / JS（ES6+）
• 想用最短时间跑通 React 开发链路
• 不想先学脚手架黑盒，而是先“看见”代码再深入

1. 一句话认识 React

React 是一个把 UI 拆成可复用组件、用状态（state）驱动视图的 UI 库。
核心就三件事：
① JSX 语法糖 → 写 HTML 一样写 JS
② 单向数据流 → 数据变，界面自动变
③ 组件化 → 把页面切成乐高积木

2. 环境 3 分钟搭好：Vite + React 18

不需要全局安装 CRA（create-react-app）！2025 年了，直接用 Vite。

# 1. 初始化
npm create vite@latest React-Quick-Start -- --template react-ts
cd React-Quick-Start
npm i

# 2. 启动
npm run dev        # http://localhost:5173

打开浏览器，出现 Vite Logo，环境 OK！

3. 第一个组件：计数器

删掉 src/App.tsx 里的示例代码，替换成：

import { useState } from 'react';

function App() {
  const [count, setCount] = useState(0);

  return (
    <div style={{ textAlign: 'center', marginTop: 60 }}>
      <h1>Hello React 18 🚀</h1>
      <p>当前计数：{count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

export default App;

保存，浏览器热更新，点按钮数字加 1 —— 你的第一个交互完成！

4. 组件拆分实战：Todo List（10 行代码）

目录结构：

src/
 ├─ App.tsx
 └─ components/
     ├─ TodoInput.tsx
     ├─ TodoItem.tsx
     └─ TodoList.tsx

4.1 根组件 App.tsx

import { useState } from 'react';
import TodoInput from './components/TodoInput';
import TodoList from './components/TodoList';

export type Todo = { id: number; text: string; done: boolean };

function App() {
  const [list, setList] = useState<Todo[]>([]);

  const addTodo = (text: string) =>
    setList([...list, { id: Date.now(), text, done: false }]);

  const toggleTodo = (id: number) =>
    setList(list.map(t => (t.id === id ? { ...t, done: !t.done } : t)));

  return (
    <div style={{ maxWidth: 400, margin: '0 auto' }}>
      <h2>极简 Todo</h2>
      <TodoInput onAdd={addTodo} />
      <TodoList todos={list} onToggle={toggleTodo} />
    </div>
  );
}

export default App;

4.2 components/TodoInput.tsx

import { useState, KeyboardEvent } from 'react';

type Props = { onAdd: (text: string) => void };

export default function TodoInput({ onAdd }: Props) {
  const [val, setVal] = useState('');
  const handleKey = (e: KeyboardEvent) => {
    if (e.key === 'Enter' && val.trim()) {
      onAdd(val.trim());
      setVal('');
    }
  };
  return (
    <input
      placeholder="按回车添加"
      value={val}
      onChange={e => setVal(e.target.value)}
      onKeyDown={handleKey}
      style={{ width: '100%', padding: 8 }}
    />
  );
}

4.3 components/TodoItem.tsx

import { Todo } from '../App';

type Props = { todo: Todo; onToggle: (id: number) => void };

export default function TodoItem({ todo, onToggle }: Props) {
  return (
    <li
      style={{
        cursor: 'pointer',
        textDecoration: todo.done ? 'line-through' : 'none',
      }}
      onClick={() => onToggle(todo.id)}
    >
      {todo.text}
    </li>
  );
}

4.4 components/TodoList.tsx

import { Todo } from '../App';
import TodoItem from './TodoItem';

type Props = { todos: Todo[]; onToggle: (id: number) => void };

export default function TodoList({ todos, onToggle }: Props) {
  if (!todos.length) return <p>暂无任务～</p>;
  return (
    <ul>
      {todos.map(t => (
        <TodoItem key={t.id} todo={t} onToggle={onToggle} />
      ))}
    </ul>
  );
}

保存，浏览器里输入、回车、点击完成 ✅ —— 组件化思维立竿见影！

5. 打包上线

npm run build
# dist/ 目录就是纯静态文件，丢到 GitHub Pages / Netlify / OSS 即可

demo源码

结语

React 并不难，先跑起来 → 拆组件 → 加状态 → 上线，
剩下的就是不断拆更小、复用更多、状态更集中。

如果本文帮你跑通了第一个 React 应用，点个 👍 再走吧！
评论区留下你的第一个 bug，一起聊聊～