零基础也能上手：从零开始写出你的第一个React应用

大家好，我是阿航，一名在一线大厂干了3年前端开发的工程师，同时也是B站的一名技术UP主（ID：前端阿航）。最近在评论区和私信里收到很多小伙伴的问题：“React到底怎么学？”、“能不能出一期真正适合小白的入门教程？”、“面试常问React，但我连环境都搭不起来……”

我完全理解这种焦虑。我当初学的时候，也是对着一堆“组件”、“虚拟DOM”、“JSX”这些词一脸懵，文档翻来覆去看了三遍，连第一个Hello World都没跑起来。所以今天，我决定写一篇真正新手友好、手把手教学的React入门教程——不需要你有任何前端框架经验，只要会点HTML和JavaScript基础就行。

这篇文章的目标很明确：带你从安装Node.js开始，一步步写出并运行你的第一个React应用。全程代码可复制、步骤可复现，还会穿插一些我踩过的坑和避坑建议。最后，我们也会聊聊为什么React在面试中如此重要，以及学完这篇后该怎么继续进阶。

---

一、React是什么？它能帮你做什么？

简单来说，React 是一个用于构建用户界面的 JavaScript 库，由 Facebook（现 Meta）开发并开源。它的核心思想是“组件化”——把页面拆分成一个个独立、可复用的小部件（比如按钮、导航栏、商品卡片），然后像搭积木一样把它们组合起来。

举个例子：你在淘宝看到的商品列表页，其实可以拆成：

• 顶部搜索栏（一个组件）
• 商品卡片（另一个组件，可能重复出现20次）
• 底部页脚（又一个组件）

React 的优势在于：

• 高效更新：只重新渲染变化的部分，而不是整个页面
• 组件复用：写一次，到处用
• 生态强大：配套工具（如React Router、Redux）非常成熟
• 面试高频：据我所知，90%以上的前端岗位JD都会写“熟悉React优先”

所以，无论你是想找工作，还是想自己做个网站练手，React 都是必须掌握的技能之一。

---

二、环境准备：5分钟搞定开发环境

别被“环境配置”吓到！现在有官方脚手架，几行命令就能搞定。我们只需要两样东西：

1. Node.js（提供JavaScript运行环境）
2. 代码编辑器（推荐 VS Code）

第一步：安装 Node.js

前往 https://nodejs.org，下载 LTS 版本（长期支持版，更稳定）。安装时一路“下一步”即可。

安装完成后，打开终端（Windows用CMD或PowerShell，Mac用Terminal），输入：

node -v
npm -v

如果看到类似 v18.17.0 和 9.6.7 的版本号，说明安装成功！

💡 避坑提示：不要用太老的Node版本（<16），否则可能无法运行最新版React。也不要用最新实验版（Current），稳定性差。

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

我们使用官方推荐的 Vite（比Create React App更快更轻量）来搭建项目。在终端中执行：

npm create vite@latest my-react-app -- --template react

系统会提示你输入项目名称（我们已经写了 my-react-app），然后选择模板为 react（不是react-ts，先不用TypeScript）。

接着进入项目目录并安装依赖：

cd my-react-app
npm install

最后启动开发服务器：

npm run dev

你会看到类似这样的输出：

  VITE v4.4.9  ready in 234 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose

打开浏览器，访问 http://localhost:51ectl3/（端口号可能不同），如果看到一个会动的React Logo + “Vite + React”字样，恭喜你！环境搭建成功！

---

三、核心概念：用最简单的话讲清楚React

现在，让我们打开项目文件夹，重点看两个文件：

• src/main.jsx
• src/App.jsx

1. JSX：JavaScript + HTML 的混合写法

React 使用一种叫 JSX 的语法，让你在JavaScript里直接写类似HTML的结构。比如：

// App.jsx
function App() {
  return (
    <div>
      <h1>Hello, React!</h1>
      <p>这是我的第一个组件</p>
    </div>
  );
}

📌 注意：JSX 中的标签必须闭合（<img /> 而不是 <img>），属性名用驼峰（className 而不是 class）。

2. 组件：函数即组件

在React中，一个函数就是一个组件。只要这个函数返回JSX，它就可以被当作UI元素使用。

// 定义一个按钮组件
function MyButton() {
  return <button>点我</button>;
}

// 在App中使用
function App() {
  return (
    <div>
      <MyButton />
    </div>
  );
}

3. 状态（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 是修改状态的函数
• 每次调用 setCount，React 会自动重新渲染组件

✅ 新手常见误区：不要直接修改 count = count + 1！必须用 setCount 才能触发更新。

---

四、实战：做一个简易待办事项（Todo List）

光说不练假把式。现在，我们用刚学的知识做一个超简单的待办列表。

步骤1：清理默认代码

打开 App.jsx，删掉所有内容，替换成：

import { useState } from 'react';

function App() {
  return (
    <div className="app">
      <h1>我的待办事项</h1>
    </div>
  );
}

export default App;

步骤2：添加输入框和“添加”按钮

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

  const handleAdd = () => {
    console.log('要添加:', inputValue);
    // 后面会实现添加逻辑
  };

  return (
    <div className="app">
      <h1>我的待办事项</h1>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        placeholder="输入任务..."
      />
      <button onClick={handleAdd}>添加</button>
    </div>
  );
}

这里我们：

• 用 inputValue 存储输入框内容
• onChange 监听输入变化，实时更新状态
• 点击按钮时打印当前输入值（用于调试）

步骤3：存储并显示任务列表

我们需要一个数组来存所有任务：

function App() {
  const [inputValue, setInputValue] = useState('');
  const [todos, setTodos] = useState([]); // 初始为空数组

  const handleAdd = () => {
    if (inputValue.trim() === '') return; // 防止空任务
    setTodos([...todos, inputValue]); // 添加新任务
    setInputValue(''); // 清空输入框
  };

  return (
    <div className="app">
      <h1>我的待办事项</h1>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        placeholder="输入任务..."
        onKeyPress={(e) => e.key === 'Enter' && handleAdd()} // 回车也能添加
      />
      <button onClick={handleAdd}>添加</button>

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

关键点：

• setTodos([...todos, inputValue])：用展开运算符复制原数组，再追加新项
• map 遍历数组生成 <li> 列表
• 每个列表项必须有唯一的 key（这里用 index 仅作演示，实际项目建议用ID）

步骤4：加上删除功能（可选挑战）

给每个任务加一个“删除”按钮：

{todos.map((todo, index) => (
  <li key={index}>
    {todo}
    <button onClick={() => {
      const newTodos = todos.filter((_, i) => i !== index);
      setTodos(newTodos);
    }}>
      删除
    </button>
  </li>
))}

filter 会创建一个新数组，排除当前索引的任务。

---

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

Q1：为什么页面没更新？我明明改了数据！

原因：直接修改了状态变量（比如 todos[0] = 'new'），而没有用 setTodos。

正确做法：永远通过 setter 函数更新状态，且返回一个新对象/数组。

Q2：控制台报错 “Each child in a list should have a unique key prop”

原因：map 渲染列表时没加 key，或者 key 不唯一（比如用了随机数）。

解决：确保 key 是稳定、唯一的标识。如果是数据库数据，用 id；如果是临时数据，可用 index（但注意顺序变化时会有问题）。

Q3：如何在React中写CSS？

最简单的方式：直接写 .css 文件，然后在组件中 import './App.css'。Vite 会自动处理。

也可以用内联样式（不推荐大量使用）：

<div style={{ color: 'red', fontSize: '18px' }}>红色文字</div>

---

六、React面试题小彩蛋

学完基础，你可能会好奇：“面试官会问什么？”

以下是3个高频React面试题（附简答）：

面试题	核心考察点	简明回答
React 是什么？有什么特点？	基础认知	React 是用于构建UI的JavaScript库，核心特点是组件化、虚拟DOM、单向数据流
什么是State？如何更新State？	状态管理	State是组件内部的数据，通过 useState 声明，用其返回的setter函数更新（如 setCount）
为什么列表渲染需要key？	渲染机制	key帮助React识别哪些元素被更改、添加或删除，从而高效更新DOM

🎯 技术分享Tip：面试时不要死记硬背，结合你做的Todo List举例说明，印象分会更高！

---

七、下一步学习建议

恭喜你完成了第一个React应用！但这只是起点。我建议你按以下路径继续深入：

1. 巩固基础：多做几个小项目（计算器、天气查询、博客首页）
2. 学习Hooks：除了 useState，还要掌握 useEffect（副作用处理）、useRef 等
3. 路由管理：学 React Router 实现多页面跳转
4. 状态管理：了解 Context API 或 Redux（复杂应用需要）
5. 工程化：学习打包、部署、性能优化

📚 资源推荐：

• 官方文档（中文）：https://zh-hans.react.dev/
• 我的B站系列课：《React从入门到求职》（搜索“前端阿航”）
• 免费练习平台：CodeSandbox（在线写React，无需本地环境）

---

写在最后

还记得我开头说的吗？我当初学的时候，也卡在环境配置这一步整整两天。但只要你跨过最初那道坎，后面就会越来越顺。React 的设计哲学其实很人性化——用函数写UI，用状态驱动更新，一切都是为了让你更专注地“描述UI应该是什么样子”，而不是“怎么操作DOM”。

希望这篇教程能成为你React之旅的第一块垫脚石。如果你跟着做完了Todo List，不妨在评论区留言“Done!”，我会随机抽几位朋友送学习资料包！

记住：每一个大神，都曾是小白。你缺的从来不是天赋，而是开始的勇气。

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