React入门教程：从安装到第一个应用（零基础友好版）

大家好，我是你们的老朋友——一个在大厂干了3年前端开发、业余时间还在B站做技术UP主的程序员。最近收到很多私信，问：“React到底怎么学？能不能写一篇真正适合小白的教程？”
我当初学的时候也是一头雾水，文档看不懂、命令报错、组件嵌套像迷宫……所以今天，我就用最直白的语言，手把手带你从零搭建第一个 React 项目。哪怕你连“什么是前端框架”都不知道，也能跟上！

友情提示：本文会覆盖关键词 React、项目、爬虫、面试题挑战，但重点是 React 入门。至于“爬虫”和“面试题”，我会在合适的位置自然融入，不强行堆砌。

---

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

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

• 它的核心思想是“组件化”：把页面拆成一个个小零件（比如按钮、导航栏、卡片），每个零件独立开发、复用。
• 你看到的 Facebook、Instagram、Netflix、淘宝部分页面，都是用 React 做的。
• 它不是“全栈框架”（不像 Vue 或 Angular 那样自带路由、状态管理），但它生态强大，搭配其他工具就能打造完整应用。

✅ 你能用它做什么？

• 企业级后台管理系统
• 电商商品展示页
• 实时聊天应用
• 甚至——配合 Node.js，可以写可视化爬虫监控面板！（后面会提）

---

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

别被“环境配置”吓到！现在有超简单的工具，一行命令搞定。

步骤 1：安装 Node.js

React 依赖 Node.js（一个运行 JavaScript 的环境）。
👉 访问 https://nodejs.org，下载 LTS 版本（长期支持版，最稳定）。

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

node -v
npm -v

如果显示版本号（比如 v18.17.0），说明安装成功！

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

我们用官方推荐的脚手架工具：Vite（比旧的 Create React App 更快！）

在终端执行：

npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install
npm run dev

这三行命令的意思是：

命令	作用
npm create vite@latest ...	创建一个叫 my-react-app 的项目，使用 React 模板
cd my-react-app	进入项目文件夹
npm install	安装依赖（就像给手机装 App）
npm run dev	启动开发服务器

启动成功后，终端会显示类似：

Local: http://localhost:5173/

打开浏览器，访问这个地址，看到 Vite + React 的欢迎页，恭喜你！环境搭好了！

💡 新手避坑：如果卡在 npm install，可能是网络问题。可尝试换源：

npm config set registry https://registry.npmmirror.com

---

三、核心概念：用“乐高积木”理解 React

1. 组件（Component）—— UI 的基本单位

想象你在拼乐高：每个小块就是一个组件。React 中，组件就是一个函数，返回 JSX（一种 HTML 和 JS 混写的语法）。

// src/App.jsx
function Welcome() {
  return <h1>你好，React 新手！</h1>;
}

export default Welcome;

• 函数名首字母必须大写（这是 React 规定）
• return 里写的是 JSX，看起来像 HTML，但其实是 JS 的语法糖

2. JSX —— 在 JS 里写 HTML

JSX 不是字符串，也不是 HTML，它是 React.createElement() 的语法糖。

✅ 正确写法：

const element = <div className="box">内容</div>;

❌ 错误写法（JSX 中不能用 class，要用 className）：

// 报错！
const element = <div class="box">内容</div>;

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

静态页面谁都会写，但用户点了按钮要变化怎么办？用 useState！

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // 声明一个状态

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

• useState(0)：初始化状态为 0
• count 是当前值，setCount 是更新它的函数
• 点击按钮 → 调用 setCount → React 自动重新渲染页面

🎯 我当初学的时候：总忘记 setCount(count + 1) 里的 count 是“旧值”，以为直接 count++ 就行。记住：状态不可变，必须用 setter 函数更新！

---

四、实战项目：做一个“电影信息展示器”

现在，我们来做一个超简单的项目：显示几部电影的名字和简介。

🌟 为什么选这个？

• 不涉及复杂逻辑
• 能练习组件、状态、列表渲染
• 后期可扩展：比如接入真实 API，甚至用爬虫抓取数据！

第 1 步：清理默认代码

打开 src/App.jsx，替换成：

import './App.css';

function App() {
  return (
    <div className="App">
      <h1>我的电影库</h1>
    </div>
  );
}

export default App;

第 2 步：创建 MovieCard 组件

新建文件 src/MovieCard.jsx：

// src/MovieCard.jsx
function MovieCard({ title, description }) {
  return (
    <div style={{ border: '1px solid #ccc', margin: '10px', padding: '10px' }}>
      <h2>{title}</h2>
      <p>{description}</p>
    </div>
  );
}

export default MovieCard;

注意：{ title, description } 是 props 解构，相当于接收外部传进来的数据。

第 3 步：在 App 中使用 MovieCard

回到 App.jsx：

import './App.css';
import MovieCard from './MovieCard';

function App() {
  const movies = [
    { id: 1, title: '肖申克的救赎', description: '希望让人自由' },
    { id: 2, title: '阿甘正传', description: '人生就像一盒巧克力' },
    { id: 3, title: '盗梦空间', description: '现实还是梦境？' }
  ];

  return (
    <div className="App">
      <h1>我的电影库</h1>
      {movies.map(movie => (
        <MovieCard
          key={movie.id}
          title={movie.title}
          description={movie.description}
        />
      ))}
    </div>
  );
}

export default App;

• movies.map(...)：遍历数组，生成多个 MovieCard
• key={movie.id}：React 要求列表项必须有唯一 key，用于优化渲染

保存后，浏览器自动刷新，看到三张电影卡片！🎉

🔍 关于“爬虫”的彩蛋：
如果你想用真实电影数据，可以写个 Python 爬虫抓取豆瓣电影，存成 JSON，然后放在 public/data.json，再用 fetch('/data.json') 加载。这就是“用 React 展示爬虫结果”的典型场景！

---

五、常见问题 & 面试题挑战

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

• 检查是否用了 useState 的 setter 函数（如 setCount）
• 检查是否直接修改了状态（如 arr.push()），应该用不可变方式：setArr([...arr, newItem])

❓ Q2：key 到底有什么用？

React 用 key 判断哪些元素变了。如果不用 key，列表顺序变化时可能渲染错乱。

💼 面试题挑战（初级）：

问题：React 中 props 和 state 有什么区别？

参考答案：

• props 是父组件传给子组件的只读数据，用于配置组件
• state 是组件内部可变的数据，用于记录用户交互或临时状态
• 类比：props 像函数参数，state 像函数内部的变量

---

六、下一步学习建议

你已经完成了第一个 React 项目！接下来：

1. 深入 Hooks：除了 useState，还有 useEffect（处理副作用，比如发请求）、useContext（跨组件传值）
2. 学路由：用 react-router-dom 实现多页面跳转
3. 状态管理：小型项目用 useState 足够，大型项目可学 Zustand 或 Redux
4. 实战扩展：
   • 给电影项目加“搜索”功能
   • 用 fetch 请求公开 API（如 https://api.themoviedb.org）
   • 写个 Node.js 后端，把爬虫数据通过接口返回给 React

📢 我的 B 站频道每周更新 React 实战项目，从 TodoList 到仿抖音 UI，关注我不迷路！

---

结语

React 没有那么可怕。它只是一个帮你高效组织 UI 代码的工具。
记住：先跑起来，再优化；先模仿，再创造。你今天的第一个 <h1>Hello React</h1>，就是未来大厂项目的起点。

有问题？评论区见！
我是那个既写代码又录视频的前端工程师，我们下期教程再见！🚀