React入门教程：从安装到第一个应用

大家好，我是掘金上的一名全栈工程师，毕业于某985高校，这几年一直在一线做前端开发和教学。最近收到不少私信问我：“能不能写一篇真正零基础也能看懂的React入门教程？”

我当初学React的时候，也是被各种术语搞得晕头转向——JSX、虚拟DOM、状态管理……一堆概念砸过来，连“组件”到底是啥都没搞明白就急着写代码，结果越学越挫败。

所以今天这篇文章，就是为完全零基础的同学量身打造的。我会用最直白的语言、最清晰的步骤，带你从零安装React，写出你的第一个应用。文末还会附上新手避坑指南、常见面试题思路，以及如何把项目托管到GitHub——这些都是你未来求职时的加分项。

---

一、React到底是什么？能用来做什么？

简单说：React 是一个用于构建用户界面的 JavaScript 库，由 Facebook（现 Meta）开发并开源。

它不是框架（比如 Vue 或 Angular），而是一个“库”——你可以把它理解成一套高效的“积木工具包”，专门用来搭网页的交互部分。

为什么学 React？

• 就业需求大：国内大厂（字节、腾讯、阿里等）大量使用 React。
• 生态成熟：配套工具链完善（如 React Router、Redux、Next.js）。
• 思维现代化：组件化、声明式编程的思想，是现代前端开发的核心。

我当年面试时，面试官第一句就是：“说说你对 React 组件的理解？”——可见它有多重要。

---

二、环境准备：5分钟搭建开发环境

别担心，现在搭建 React 开发环境比五年前简单太多了！我们用官方推荐的 Create React App（简称 CRA），一键生成项目骨架。

前提条件

你需要先安装以下两个工具：

1. Node.js（建议 v18 或以上）
2. npm 或 yarn（Node.js 安装后自带 npm）

✅ 检查是否安装成功：

node -v
npm -v

步骤 1：创建你的第一个 React 项目

打开终端（Windows 用 PowerShell 或 CMD，Mac 用 Terminal），运行：

npx create-react-app my-first-react-app

💡 npx 是 npm 自带的命令，可以直接运行远程包，无需全局安装 CRA。

这个命令会：

• 自动下载所需依赖
• 生成项目文件夹 my-first-react-app
• 配置好 Webpack、Babel 等构建工具（你不用管这些，CRA 都帮你配好了）

步骤 2：启动开发服务器

cd my-first-react-app
npm start

浏览器会自动打开 http://localhost:3000，你会看到一个旋转的 React logo —— 恭喜！你的开发环境已就绪。

常用命令速查表

命令	作用
npm start	启动开发服务器（热更新）
npm run build	打包生产版本
npm test	运行测试（初学者可忽略）
npm run eject	慎用！ 暴露配置文件（一般不需要）

⚠️ 新手注意：不要随便运行 eject，一旦执行无法撤销，会让项目变得复杂。

---

三、核心概念：用大白话讲清楚 React 的三大基石

React 看似复杂，其实核心就三个概念：组件、JSX、状态（State）。我们一个个来。

1. 组件（Component）：网页的“乐高积木”

在 React 中，一切皆组件。按钮是一个组件，导航栏是一个组件，整个页面也是一个组件。

我当初理解不了“组件”，直到老师打了个比方：“就像搭乐高，每个小块都是独立的，拼起来就是一个完整模型。”

函数式组件示例（现代写法）：

// src/App.js
function Welcome() {
  return <h1>Hello, React!</h1>;
}

export default Welcome;

• 组件名首字母必须大写（Welcome 而不是 welcome）
• 必须 return 一些内容（通常是 JSX）
• 用 export default 导出，才能被其他文件使用

2. JSX：在 JavaScript 里写 HTML？

JSX 看起来像 HTML，但其实是 JavaScript 的语法扩展。

const element = <h1>Hello, world!</h1>;

❗注意：这不是字符串，也不是 HTML，而是会被 Babel 编译成 React.createElement() 调用。

JSX 规则（新手易错点）：

• 只能返回一个根元素（不能并列写两个 <div>）
• 使用 className 而不是 class
• 写 JavaScript 表达式要用 {} 包裹

function User({ name }) {
  return (
    <div className="user-card">
      <p>用户名：{name}</p>
      <p>当前时间：{new Date().toLocaleTimeString()}</p>
    </div>
  );
}

3. 状态（State）：让页面“动”起来

静态页面谁都会写，但用户点击按钮、输入文字怎么办？这就需要 状态（State）。

React 提供 useState Hook 来管理状态：

import { useState } from 'react';

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

  return (
    <div>
      <p>你点击了 {count} 次</p>
      <button onClick={() => setCount(count + 1)}>
        点我加 1
      </button>
    </div>
  );
}

🔑 关键理解：

• count 是当前状态值
• setCount 是更新状态的函数
• 永远不要直接修改 state（比如 count = count + 1 是错的！）

---

四、实战项目：做一个简单的“待办事项”列表

现在，我们把上面的知识串起来，做一个 mini Todo App。

步骤 1：清理默认代码

删除 src 目录下除 index.js 和 App.js 外的所有文件（如 logo.svg）。修改 App.js：

// src/App.js
import { useState } from 'react';

function App() {
  const [todos, setTodos] = useState([]);
  const [inputValue, setInputValue] = useState('');

  const addTodo = () => {
    if (inputValue.trim() !== '') {
      setTodos([...todos, inputValue]);
      setInputValue(''); // 清空输入框
    }
  };

  return (
    <div style={{ padding: '20px' }}>
      <h1>我的待办事项</h1>
      
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        placeholder="输入任务..."
      />
      <button onClick={addTodo}>添加</button>

      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

步骤 2：关键代码解析

代码片段	说明
const [todos, setTodos] = useState([])	初始化一个空数组作为待办列表
value={inputValue} + onChange	受控组件：输入框内容由 state 控制
setTodos([...todos, inputValue])	用展开运算符创建新数组（React 要求不可变更新）
key={index}	列表渲染必须加 key（但实际项目建议用唯一 ID）

💡 开发心得：我早期总忘记 key，结果列表更新时 UI 错乱。记住：key 是 React 识别列表项的“身份证”。

步骤 3：运行看看效果！

保存后，浏览器会自动刷新。输入“学习 React”，点击“添加”，任务就会出现在下方列表中。

---

五、新手常见问题 & 解决方案

Q1：为什么我的组件不更新？

• 检查是否直接修改了 state（比如 arr.push(item)）
• 正确做法：用 setArr([...arr, item]) 创建新数组

Q2：JSX 中怎么写 if 判断？

• 不能写 if 语句，但可以用三元表达式或 &&

{count > 0 && <p>你有未完成任务！</p>}

Q3：报错 “Each child in a list should have a unique key prop”

• 列表渲染时每个元素必须有唯一的 key
• 临时可用 index，但数据变动时可能出 bug，建议用 ID

Q4：如何在面试中解释 React 的优势？

• 虚拟 DOM：减少真实 DOM 操作，提升性能
• 组件化：高复用、易维护
• 单向数据流：数据流向清晰，便于调试

📌 面试题参考：
“React 的 setState 是同步还是异步？”
答：在 React 事件处理函数中是异步批量更新，以提升性能；但在原生事件或 setTimeout 中是同步的。

---

六、下一步：把项目推送到 GitHub

学会 Git 和 GitHub 是程序员的基本功。我们把刚做的 Todo App 上传上去。

步骤 1：初始化 Git 仓库

git init
git add .
git commit -m "Initial commit: Todo App"

步骤 2：在 GitHub 创建新仓库

• 登录 GitHub，点击 “+” → “New repository”
• 仓库名填 my-first-react-app（不要初始化 README）
• 复制仓库地址（HTTPS 格式）

步骤 3：关联远程仓库并推送

git remote add origin https://github.com/你的用户名/my-first-react-app.git
git branch -M main
git push -u origin main

✅ 成功后，你的项目就永久保存在 GitHub 上了！这不仅能备份代码，还能展示给面试官看。

---

七、学习建议 & 避坑指南

学习路径推荐

1. 先掌握基础：组件、Props、State、事件处理
2. 再学 Hook：useEffect, useContext, 自定义 Hook
3. 然后路由：React Router 实现多页面
4. 最后状态管理：Redux / Zustand（初期其实用不到）

我踩过的坑（你别踩！）

• ❌ 不要一上来就学 Redux —— 90% 的项目用 useState 就够了
• ❌ 不要纠结 class 组件 —— 现在主流是函数组件 + Hook
• ✅ 多写小项目：计数器、天气查询、简易博客……实践出真知

推荐资源

• 官方文档（中文）：https://zh-hans.react.dev/
• 免费课程：Scrimba 的《Learn React》
• GitHub 模板：搜索 “react starter” 找优秀项目结构

---

结语

恭喜你，已经迈出了 React 开发的第一步！这篇文章虽然只有三千多字，但涵盖了从安装到实战的核心流程。真正的学习才刚刚开始——接下来，试着给你的 Todo App 加个“删除功能”，或者改造成能本地存储的任务列表。

记住：每个大神都曾是小白。我当初连 npm install 都要 Google 十遍，现在却能写出被几万人阅读的教程。

如果你觉得这篇教程有帮助，欢迎点赞、收藏，也欢迎在评论区留言你的问题。我会持续更新更多“零基础友好”的前端教程。

下期预告：《React Hook 详解：useEffect 到底什么时候执行？》

加油，未来的 React 开发者！🚀