React入门完全指南 - 非科班出身也能打造首个Web应用

引言：为什么选择React？

截至2026年，React在前端开发领域依然展现着压倒性的存在感。根据Stack Overflow 2025开发者调查，React在全球前端框架市场份额中占据约42%，稳居第一。Vue.js（约18%）、Angular（约15%）、Svelte（约8%）紧随其后，但与React的差距依然显著。在韩国国内就业市场中，React相关职位占前端招聘岗位的60%以上，React已成为前端开发者的必备技能。

学习React的理由不仅仅是因为市场份额高。围绕React的庞大生态系统（Ecosystem）为开发者提供了几乎无限的可能性。Next.js、React Native、Remix等基于React的元框架和移动开发工具正在蓬勃发展，npm上注册的React相关包多达数万个。此外，React拥有全球最活跃的开发者社区之一，可以轻松获取解决问题的资料和帮助。

本文将从React的核心概念到实战项目，逐步引导您学习，即使是零基础的非科班人士也能理解。读完本文后，您将理解React的基本原理，并能够自己构建一个简单的Web应用程序。

1. React基础概念

1.1 什么是React？

React是Facebook（现Meta）于2013年开源的用于构建用户界面（UI）的JavaScript库。准确地说，React是一个库而非框架。与Angular不同，它不内置路由、状态管理、HTTP通信等所有功能，而是专注于UI渲染这一个目的，其余功能通过组合第三方库来实现。正是这种理念使得React轻量、灵活，可以应用于各种项目。

要理解React，必须了解两个核心概念：

• Virtual DOM（虚拟DOM）：直接操作浏览器的真实DOM（Document Object Model）性能不佳。React在内存中维护一棵虚拟DOM树，当状态发生变化时，先在虚拟DOM中计算变更部分，然后仅将最小的变更应用到真实DOM。这个过程称为协调（Reconciliation），从而实现快速高效的UI更新。
• 基于组件的架构：在React中，UI被划分为独立且可复用的小单元——组件（Component）来构建。一个按钮、一个搜索栏、一个导航栏都可以是一个组件，通过组合这些组件来创建复杂的界面。这类似于组装乐高积木的概念。

1.2 理解SPA（单页应用）

用React构建的Web应用大多以SPA（Single Page Application）方式运行。传统网站每次页面跳转都会从服务器获取全新的HTML页面并重新绘制整个界面，而SPA只在首次加载时加载完整页面，之后仅从服务器获取必要的数据来动态更新页面的部分内容。因此，用户可以获得如同使用桌面应用般快速流畅的体验。

我们日常使用的大多数现代Web服务，如Gmail、Facebook、Instagram、Netflix等，都是以SPA方式构建的。SPA的核心优势是页面切换时无闪烁，提供流畅的用户体验。缺点是初始加载时间可能较长，且需要额外工作来优化搜索引擎（SEO）。后者的问题已通过Next.js等框架的服务端渲染（SSR）得到解决。

1.3 React vs Vue vs Angular 简单对比

开始前端开发时，很多人会纠结选择哪种技术。让我们简单对比三种主要的框架/库：

项目	React	Vue.js	Angular
开发方	Meta (Facebook)	Evan You（社区）	Google
类型	库	框架	框架
学习曲线	中等	低	高
生态系统	非常广泛	广泛	广泛（内置功能多）
语言	JavaScript / JSX	JavaScript / SFC	TypeScript
就业市场	需求最多	增长趋势	以大企业为主
代表性元框架	Next.js, Remix	Nuxt.js	Angular Universal

总结来说，React在就业市场、生态系统、灵活性方面是最通用的选择，非常适合作为第一个前端技术来学习。Vue.js的入门门槛最低，适合想要快速上手的人。Angular适合需要系统化架构的大型企业项目。

2. 开发环境搭建

2.1 安装Node.js

要开始React开发，首先需要安装Node.js。Node.js是一个让JavaScript可以在浏览器之外运行的运行时环境，是使用React项目构建工具和包管理器（npm）所必需的。

访问Node.js官网，下载并安装LTS（长期支持）版本。安装完成后，在终端（命令提示符）中运行以下命令确认安装是否成功：

# 检查Node.js版本
node -v
# 示例输出: v22.x.x

# 检查npm版本
npm -v
# 示例输出: 10.x.x

2.2 创建项目

截至2026年，创建React项目的标准方式是使用Vite。过去，Create React App（CRA）被推荐为官方工具，但目前已停止维护，React官方文档也推荐使用Vite。Vite的构建速度极快，开发服务器的热模块替换（HMR）几乎即时生效，开发体验非常出色。

# 使用Vite创建React项目
npx create-vite@latest my-first-react-app --template react

# 进入项目文件夹
cd my-first-react-app

# 安装依赖包
npm install

# 启动开发服务器
npm run dev

运行上述命令后，React应用将在http://localhost:5173地址启动。如果在浏览器中看到带有React标志的默认页面，就说明成功了。生成的项目文件夹结构如下：

my-first-react-app/
├── node_modules/       # 已安装的包（不要直接修改）
├── public/             # 静态文件（favicon等）
├── src/                # 源代码（在这里进行开发）
│   ├── App.css         # App组件样式
│   ├── App.jsx         # 主App组件
│   ├── index.css       # 全局样式
│   └── main.jsx        # 应用入口点（Entry Point）
├── index.html          # HTML模板
├── package.json        # 项目配置和依赖列表
└── vite.config.js      # Vite配置文件

最重要的文件夹是src/。所有后续的开发工作都在这个文件夹中进行。main.jsx是应用的入口点，这个文件渲染App.jsx组件。

2.3 推荐VS Code扩展

以下是一些让React开发更加舒适的VS Code扩展：

• ES7+ React/Redux/React-Native snippets：只需输入rfce就能自动生成函数组件的基本结构。大幅提升编码速度。
• Prettier - Code formatter：每次保存时自动格式化代码。在团队项目中统一代码风格必不可少。
• ESLint：实时检测JavaScript/JSX代码中的语法错误和潜在bug并发出提醒。
• Auto Rename Tag：在HTML/JSX中修改开始标签时，结束标签也会自动同步修改。
• Thunder Client：一个轻量级REST客户端，可以在VS Code内直接测试API请求。

3. React核心语法

3.1 JSX - HTML与JavaScript的相遇

JSX（JavaScript XML）是React中编写UI时使用的语法，结合了HTML和JavaScript的形式。初次接触可能会觉得陌生，但一旦熟悉后，就能直观地表达UI结构，非常方便。由于浏览器无法直接理解JSX，Vite（内部使用Babel/SWC）会将其转译为普通JavaScript。

// JSX基本语法示例
function Greeting() {
  const userName = "Hong Gildong";
  const isLoggedIn = true;

  return (
    <div className="greeting">
      {/* 在JSX中使用JavaScript表达式：花括号 {} */}
      <h1>你好，{userName}！</h1>
      <p>当前时间: {new Date().toLocaleTimeString()}</p>

      {/* 条件渲染：三元运算符 */}
      {isLoggedIn ? (
        <p>欢迎！您已登录。</p>
      ) : (
        <p>请先登录。</p>
      )}

      {/* 条件渲染：&& 运算符 */}
      {isLoggedIn && <button>退出登录</button>}
    </div>
  );
}

编写JSX时需要注意以下几个规则：

• 必须用一个根元素包裹。要返回多个元素，可以用<div>或<>...</>（Fragment）包裹。
• 使用className代替HTML的class（因为class在JavaScript中是保留字）。
• 使用htmlFor代替HTML的for。
• 所有标签必须关闭（<img />、<br />）。
• JavaScript表达式写在{}花括号内。

3.2 组件

在React中，组件是构成UI的独立且可复用的代码片段。截至2026年，以函数组件（Function Component）方式编写React组件是标准做法。过去的类组件只在遗留项目中可见，新项目中不再使用。

// 基本函数组件
function Welcome() {
  return <h1>你好，React！</h1>;
}

// 接收props的组件
function UserCard({ name, email, role }) {
  return (
    <div className="user-card">
      <h2>{name}</h2>
      <p>邮箱: {email}</p>
      <p>角色: {role}</p>
    </div>
  );
}

// 使用children的布局组件
function Card({ title, children }) {
  return (
    <div className="card">
      <div className="card-header">
        <h3>{title}</h3>
      </div>
      <div className="card-body">
        {children}
      </div>
    </div>
  );
}

// 组合使用组件
function App() {
  return (
    <div>
      <Welcome />
      <Card title="用户信息">
        <UserCard
          name="Kim Developer"
          email="dev@example.com"
          role="前端开发者"
        />
      </Card>
    </div>
  );
}

props（Properties）是从父组件向子组件传递数据的方式。它像函数参数一样工作，子组件内部不能直接修改props（只读）。children是一个特殊的prop，它接收放置在组件开始标签和结束标签之间的内容。

3.3 State与事件

State（状态）是组件内部管理的动态数据。用户输入、从服务器获取的数据、UI的当前状态（打开/关闭等）都属于state。在React中，使用useState Hook来管理state。当state发生变化时，React会自动重新渲染该组件以更新界面。

import { useState } from 'react';

function Counter() {
  // useState: [当前状态值, 更新状态的函数]
  const [count, setCount] = useState(0);
  const [step, setStep] = useState(1);

  const increment = () => setCount(count + step);
  const decrement = () => setCount(count - step);
  const reset = () => setCount(0);

  return (
    <div className="counter">
      <h2>计数器应用</h2>
      <p className="count-display">当前值: {count}</p>

      <div className="controls">
        <label>
          增减步长:
          <input
            type="number"
            value={step}
            onChange={(e) => setStep(Number(e.target.value))}
            min="1"
          />
        </label>
      </div>

      <div className="buttons">
        <button onClick={decrement}>-{step}</button>
        <button onClick={reset}>重置</button>
        <button onClick={increment}>+{step}</button>
      </div>
    </div>
  );
}

export default Counter;

上面的例子中，useState(0)创建了一个初始值为0的state。count是当前状态值，setCount是更新状态的函数。将处理函数连接到按钮的onClick事件上，点击时state变化，界面自动刷新。onChange事件在输入框的值发生变化时被调用。

3.4 useEffect - 管理副作用

useEffect是用于处理与组件渲染没有直接关系的"副作用（Side Effect）"的Hook。API调用、定时器设置、事件监听器注册、直接DOM操作等都属于副作用。

import { useState, useEffect } from 'react';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // API调用（异步处理）
    const fetchUser = async () => {
      try {
        setLoading(true);
        const response = await fetch(
          `https://jsonplaceholder.typicode.com/users/${userId}`
        );
        if (!response.ok) throw new Error('未找到用户');
        const data = await response.json();
        setUser(data);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchUser();

    // 清理函数：组件卸载或依赖项变化时执行
    return () => {
      console.log('执行清理');
    };
  }, [userId]); // 依赖数组：每当userId变化时重新执行useEffect

  if (loading) return <p>加载中...</p>;
  if (error) return <p>错误: {error}</p>;
  if (!user) return null;

  return (
    <div>
      <h2>{user.name}</h2>
      <p>邮箱: {user.email}</p>
      <p>电话: {user.phone}</p>
    </div>
  );
}

useEffect的第二个参数——依赖数组（Dependency Array）非常重要。传入空数组[]时，仅在组件首次挂载时执行一次；传入特定值时，该值每次变化都会重新执行。如果省略依赖数组，则每次渲染都会执行，需要特别注意。

3.5 条件渲染与列表

在实际应用中，根据条件显示不同的UI或将数组数据显示为列表的情况非常常见。

function FruitList() {
  const fruits = [
    { id: 1, name: "Apple", emoji: "🍎", inStock: true },
    { id: 2, name: "Banana", emoji: "🍌", inStock: true },
    { id: 3, name: "Grape", emoji: "🍇", inStock: false },
    { id: 4, name: "Strawberry", emoji: "🍓", inStock: true },
  ];

  return (
    <div>
      <h2>水果列表</h2>
      <ul>
        {fruits.map((fruit) => (
          <li key={fruit.id}>
            {fruit.emoji} {fruit.name}
            {fruit.inStock ? (
              <span style={{ color: "green" }}> - 有库存</span>
            ) : (
              <span style={{ color: "red" }}> - 已售罄</span>
            )}
          </li>
        ))}
      </ul>
      <p>有库存的水果: {fruits.filter(f => f.inStock).length}个</p>
    </div>
  );
}

map()用于将数组的每个元素转换为组件来渲染列表。此时必须为每个元素传递唯一的key prop。React使用这个key来高效地判断哪些项目被添加、删除或修改。key最好使用数据的唯一ID而非数组索引。

4. 实战项目：构建Todo（待办事项）应用

4.1 项目设计

让我们运用到目前为止学到的所有React核心概念，构建一个实战Todo应用。通过这个项目，您可以综合练习组件设计、state管理、事件处理、列表渲染和条件渲染。要实现的功能如下：

• 添加新待办事项
• 切换待办事项完成/未完成状态
• 删除待办事项
• 显示剩余待办事项数量

4.2 组件结构

我们将Todo应用的组件按以下方式分离设计：

App（顶层组件 - 管理所有state）
├── TodoForm（待办事项输入表单）
├── TodoList（待办事项列表容器）
│   └── TodoItem（单个待办事项） x N
└── TodoFooter（剩余待办事项数量显示）

4.3 状态管理

这个应用需要管理的state是待办事项列表数组（todos）。每个待办事项包含id、text（内容）和completed（完成状态）。所有CRUD功能在App组件中作为修改state的函数实现，并通过props传递给子组件。

4.4 实现CRUD功能

以下是Todo应用的完整源代码。在src/App.jsx文件中输入以下代码并保存，即可在浏览器中立即看到效果：

// src/App.jsx - Todo App Complete Code
import { useState } from 'react';

// ─── TodoForm Component ─────────────────────────
function TodoForm({ onAdd }) {
  const [inputValue, setInputValue] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault(); // 阻止表单默认行为（页面刷新）
    const trimmed = inputValue.trim();
    if (!trimmed) return; // 防止空值提交
    onAdd(trimmed);
    setInputValue(''); // 清空输入框
  };

  return (
    <form onSubmit={handleSubmit} className="todo-form">
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        placeholder="请输入待办事项..."
      />
      <button type="submit">添加</button>
    </form>
  );
}

// ─── TodoItem Component ─────────────────────────
function TodoItem({ todo, onToggle, onDelete }) {
  return (
    <li className={`todo-item ${todo.completed ? 'completed' : ''}`}>
      <input
        type="checkbox"
        checked={todo.completed}
        onChange={() => onToggle(todo.id)}
      />
      <span
        style={{
          textDecoration: todo.completed ? 'line-through' : 'none',
          color: todo.completed ? '#999' : '#333',
        }}
      >
        {todo.text}
      </span>
      <button onClick={() => onDelete(todo.id)}>删除</button>
    </li>
  );
}

// ─── TodoList Component ─────────────────────────
function TodoList({ todos, onToggle, onDelete }) {
  if (todos.length === 0) {
    return <p className="empty-message">暂无待办事项。</p>;
  }

  return (
    <ul className="todo-list">
      {todos.map((todo) => (
        <TodoItem
          key={todo.id}
          todo={todo}
          onToggle={onToggle}
          onDelete={onDelete}
        />
      ))}
    </ul>
  );
}

// ─── App Component (Main) ─────────────────────────
function App() {
  const [todos, setTodos] = useState([
    { id: 1, text: '学习React基本语法', completed: false },
    { id: 2, text: '构建Todo应用', completed: false },
    { id: 3, text: '将项目推送到Git', completed: false },
  ]);

  // 添加待办事项 (Create)
  const addTodo = (text) => {
    const newTodo = {
      id: Date.now(), // 生成唯一ID
      text,
      completed: false,
    };
    setTodos([...todos, newTodo]);
  };

  // 切换完成状态 (Update)
  const toggleTodo = (id) => {
    setTodos(
      todos.map((todo) =>
        todo.id === id
          ? { ...todo, completed: !todo.completed }
          : todo
      )
    );
  };

  // 删除待办事项 (Delete)
  const deleteTodo = (id) => {
    setTodos(todos.filter((todo) => todo.id !== id));
  };

  // 计算剩余待办事项数量
  const remainingCount = todos.filter((t) => !t.completed).length;

  return (
    <div className="todo-app">
      <h1>我的待办清单</h1>
      <TodoForm onAdd={addTodo} />
      <TodoList
        todos={todos}
        onToggle={toggleTodo}
        onDelete={deleteTodo}
      />
      <p className="todo-footer">
        剩余待办: <strong>{remainingCount}</strong>项
      </p>
    </div>
  );
}

export default App;

5. React生态系统一览

由于React本身是专注于UI渲染的库，实际项目中通常会搭配各种第三方库使用。以下按类别整理React丰富的生态系统。

类别	主要工具	特点	推荐对象
路由	React Router v7	在SPA中实现页面导航，支持嵌套路由	所有SPA项目
状态管理	Zustand	轻量直观，样板代码最少	中小型项目（当前最受欢迎）
	Redux Toolkit	可预测的状态管理，丰富的中间件	大型企业项目
	Jotai / Recoil	基于原子（Atom），React友好	复杂的异步状态管理
样式	Tailwind CSS	实用优先，快速原型开发	大多数项目（当前最受欢迎）
	styled-components	CSS-in-JS，组件级样式封装	构建设计系统
数据获取	TanStack Query (React Query)	服务器状态管理，缓存，自动重新获取	API通信频繁的项目
表单管理	React Hook Form + Zod	性能优化，基于Schema的验证	表单复杂的管理后台
服务端框架	Next.js	SSR、SSG、API路由、基于文件的路由	SEO重要的项目，全栈开发
	Remix	以Web标准为中心，渐进增强	忠实于Web标准的项目
测试	Vitest + Testing Library	基于Vite的快速测试，用户视角测试	所有项目（测试是必须的）

在入门阶段，不需要学习上述所有工具。先充分掌握React本身，然后根据项目需要逐步添加即可。作为首批外部工具，推荐React Router（页面导航）和Tailwind CSS（样式）。

6. 学习路线图与下一步

6.1 4周学习路线图

以下是系统学习React的4周路线图建议。以每天学习1-2小时为基准：

周次	学习主题	目标	实践项目
第1周	JavaScript ES6+、React基础	理解箭头函数、解构赋值、展开运算符、JSX、组件、props	制作自我介绍卡片
第2周	State、事件、useEffect	useState、事件处理、副作用管理、条件渲染、列表	计数器应用、Todo应用
第3周	React Router、API对接	页面路由、fetch/axios、加载/错误处理	电影搜索应用、天气应用
第4周	样式、部署	Tailwind CSS、响应式设计、Vercel/Netlify部署	制作并部署作品集网站

6.2 推荐学习资源

以下按优先级整理了有助于React学习的资源：

• React官方文档（react.dev）：2023年全面重写的官方文档包含交互式教程和丰富的示例，是最好的学习资料。也提供多语言翻译。务必将其作为第一学习资料。
• 免费在线课程：Nomad Coders（韩语）、freeCodeCamp（英语）、Scrimba（英语，交互式）等平台提供优质的免费React课程。
• 付费课程：可以在Udemy、Inflearn等平台上学习系统深入的React课程。建议选择基于实战项目的课程。
• 书籍：《Modern React Deep Dive》（金容灿著）——一本深入讲解React内部工作原理的书籍，适合超越基础的深度学习。
• 社区：通过GitHub、Stack Overflow、Discord（Reactiflux）等与其他开发者交流，共同成长。

6.3 作品集项目创意

掌握React基础后，以下是按难度分级的可纳入作品集的项目创意：

• 初级：天气应用（使用OpenWeatherMap API）、记事本应用（localStorage存储）、定时器/秒表应用、计算器应用
• 中级：电影信息搜索应用（TMDB API，无限滚动）、博客平台（Markdown编辑器，分类管理）、记账应用（使用图表库）、聊天应用（WebSocket或Firebase）
• 高级：电商购物平台（购物车、支付对接、管理后台）、项目管理工具（看板、拖拽功能）、社交媒体信息流（无限滚动、图片上传、评论）

在进行项目时遵循以下要点，可以大幅提升作品集质量：

• 将代码上传到GitHub，并认真编写README.md（包含项目介绍、技术栈、安装方法和截图）。
• 部署到Vercel或Netlify，提供可实际访问的URL。
• 应用响应式设计，确保在移动端也能良好展示。
• 即使是简单的测试代码，也能成为重要的差异化亮点。

结语：React，开始就是成功的一半

React一开始可能会因为众多新概念（JSX、Virtual DOM、组件、State、Hooks）而让人感到压力。但只要一步步踏实地学习，您就会自然地理解为什么React受到全球开发者的喜爱。React的声明式编程方式和基于组件的架构，为系统化管理复杂UI提供了强大的基础。

最重要的是亲自动手写代码来学习。仅靠理论绝对无法掌握编程。请亲自敲出本文中的计数器应用和Todo应用代码并运行。尝试修改代码，观察结果如何变化。遇到错误时，阅读错误信息、搜索解决方案、尝试修复。这个过程本身就是最有效的学习。

截至2026年，React已经超越了简单的UI库，成为前端开发的标准，并通过Next.js发展成为涵盖全栈开发的庞大生态系统。如果你现在开始学React，你就站在了最广阔可能性的大门前。