零基础也能上手！从安装到写出你的第一个 React 应用

大家好，我是阿哲，一个在大厂干了3年前端开发的“打工人”，业余时间也在B站做技术UP主。经常有粉丝私信我：“React到底难不难？零基础能不能学会？”说实话，我当初学的时候也踩过不少坑——Node版本装错、依赖报错、组件嵌套搞不清……但只要你方法对，React 其实比你想象中友好得多。

这篇文章就是为完全没碰过前端框架的你量身打造的。我会用最直白的语言、最实用的例子，带你从零搭建环境，写出第一个能跑起来的 React 应用。而且，文末还会聊聊 React 在求职和面试中的真实价值——毕竟，学技术最终是为了找工作嘛！

---

为什么是 React？

React 是由 Facebook（现 Meta）推出的 JavaScript 库，专门用来构建用户界面（UI）。你可以把它理解成“搭积木”：每个功能模块（比如按钮、列表、弹窗）都是一个独立的“积木块”（组件），拼在一起就成了完整页面。

现在国内大厂如字节、腾讯、阿里，中小厂甚至创业公司，React 的使用率都非常高。我在帮团队面试时，80% 的前端岗都要求熟悉 React。掌握它，不只是学会一个工具，更是打开职业大门的一把钥匙。

---

第一步：准备好你的“武器库”

别担心，安装过程其实很傻瓜。跟着下面几步走就行。

你需要装什么？

工具	作用	是否必须
Node.js	运行 JavaScript 的环境	✅ 必须
npm 或 yarn	包管理器，用来安装 React 等依赖	✅ 必须
VS Code	代码编辑器（推荐）	✅ 推荐

💡 开发心得：我当初第一次装 Node，下错了 ARM 版本，结果命令行一直报错。记住：去 https://nodejs.org 官网下载 LTS（长期支持）版本，Windows/Mac 用户直接点绿色大按钮就行。

检查是否安装成功

打开终端（Mac 用 Terminal，Windows 用 PowerShell 或 CMD），输入：

node -v
npm -v

如果看到类似 v18.17.0 和 9.6.7 的版本号，恭喜你，环境搞定！

---

用 Create React App 一键创建项目

React 官方提供了一个脚手架工具叫 Create React App（简称 CRA），它能帮你自动生成完整的项目结构，省去手动配置 Webpack、Babel 的麻烦。

在终端执行：

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

⏱️ 这个过程可能需要几分钟，取决于你的网络速度。耐心等待，别按 Ctrl+C！

完成后，进入项目目录并启动开发服务器：

cd my-first-react-app
npm start

浏览器会自动打开 http://localhost:3000，看到一个旋转的 React Logo —— 恭喜！你的第一个 React 应用已经跑起来了！

---

核心概念：组件、JSX、状态

别被术语吓到，我们用生活化的方式解释。

1. 组件（Component） = 可复用的 UI 积木

React 的核心思想是“一切皆组件”。比如：

• 一个按钮是一个组件
• 一个用户头像卡片是一个组件
• 整个首页也可以是一个组件

组件可以互相嵌套，就像乐高一样。

2. JSX = 在 JS 里写 HTML

你可能会在 .js 文件里看到这样的代码：

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

这叫 JSX，是 React 的语法扩展。它看起来像 HTML，但其实是 JavaScript 的语法糖。浏览器最终会把它编译成普通的 JS 函数调用。

✅ 新手注意：JSX 中不能写 class，要用 className；标签必须闭合（比如 <img />）。

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

静态页面谁都会写，但交互才是前端的灵魂。React 用 state 来管理数据变化。

举个例子：点击按钮，数字加 1。

import { useState } from 'react';

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

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

这里 useState 是 React 提供的“钩子”（Hook），用来声明状态变量。count 是当前值，setCount 是更新它的函数。

💡 开发心得：我当初总忘记 useState 要从 react 引入，导致报错 “useState is not defined”。记住：所有 React API 都要显式导入！

---

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

光看不练假把式。我们来做一个超简单的 Todo 应用，包含：

• 输入新任务
• 显示任务列表
• 删除任务

第1步：清理默认代码

打开 src/App.js，删掉所有内容，替换成：

import { useState } from 'react';
import './App.css';

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

export default App;

第2步：添加状态和输入框

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

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

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

第3步：显示任务列表

在 <button> 下面加上：

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

🔍 关键点解释：

• map 用来遍历数组生成列表
• key 是 React 识别列表项的唯一标识（这里用 index 仅作演示，实际项目建议用 ID）
• 删除逻辑：过滤掉当前索引的项，生成新数组

第4步：美化一下（可选）

打开 App.css，加点样式让页面好看些：

.App {
  max-width: 500px;
  margin: 50px auto;
  padding: 20px;
}
input, button {
  padding: 8px;
  margin: 5px;
}
ul {
  list-style: none;
  padding: 0;
}
li {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  border-bottom: 1px solid #eee;
}

现在，你的 Todo 应用就完成了！试试添加、删除任务吧！

---

新手常问的 5 个问题

Q1：为什么改了代码，页面没更新？

A：检查是否正确使用了 setState（比如 setCount）。不要直接修改 state 变量，比如 count++ 是无效的。

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

A：在 map 生成的元素上加 key 属性。尽量用数据本身的唯一 ID，而不是数组索引（除非列表不会变动）。

Q3：如何在组件间传数据？

A：通过 props。父组件像这样传递：<Child name="小明" />，子组件通过参数接收：function Child({ name }) { ... }

Q4：React 和 Vue 哪个好？

A：没有绝对好坏。React 生态更庞大，适合复杂应用；Vue 上手更快。但大厂更倾向 React，求职时优势明显。

Q5：学完这个就能找工作了吗？

A：这只是第一步！React 只是前端技术栈的一环。后续还要学：

• 路由（React Router）
• 状态管理（Redux / Zustand）
• 请求库（Axios / fetch）
• 构建工具（Vite / Webpack）

🎯 面试题预告：面试官常问：“React 中 key 的作用是什么？”、“useState 和 class 组件的 setState 有什么区别？” 建议提前准备！

---

学习建议：从入门到求职

1. 先模仿，再创造
   把本文的 Todo 应用多敲几遍，理解每一行代码的作用。

2. 善用官方文档
   React 官网（https://react.dev）有中文版，案例丰富，是我当初的“救命稻草”。

3. 做项目，别只看视频
   很多人在 B站刷教程上百小时，但从不动手。记住：运营自己的 GitHub 仓库比收藏夹吃灰有用一百倍。哪怕只是几个小 demo，面试时也能展示。

4. 关注“为什么”，而不只是“怎么做”
   比如：为什么 React 要用虚拟 DOM？为什么不能直接改 state？理解原理，才能应对面试深挖。

5. 加入社区，别闭门造车
   我在 B站直播 coding 时，经常有观众提问，有些问题连我自己都没想过。交流能加速成长。

---

最后说两句

React 并不可怕，它只是一个帮你更高效构建 UI 的工具。真正重要的是你解决问题的思维。

我当初也是从“Hello World”开始，一步步做到参与百万级用户项目。你现在迈出的这一步，可能就是未来 offer 的起点。

如果你觉得这篇教程有帮助，欢迎去 B站搜“阿哲前端”，我会持续更新 React 进阶内容——从 Hooks 原理到性能优化，再到真实项目实战。

技术路上，你不是一个人。加油，未来的前端工程师！