零基础也能学会：React从安装到写出第一个应用
大家好，我是小码，在大厂做前端开发三年，业余时间也在B站分享技术干货。最近收到很多私信问：“React到底怎么入门？”“完全没基础能学会吗？”其实我当初学的时候也是一头雾水——文档术语一堆、环境配置复杂、概念又抽象。今天这篇教程，就是专门为零基础小白量身打造的，手把手带你从安装到跑起第一个React应用。无论你是为了求职、兴趣，还是想转行前端，这篇文章都能帮你打下扎实的第一步。
为什么学 React？和求职、书籍有什么关系？
React 是由 Facebook（现 Meta）推出的 JavaScript 库，专门用来构建用户界面。简单说，它让你用代码“搭积木”一样组合网页组件——比如按钮、导航栏、商品卡片。如今，90% 以上的前端岗位都要求会 React，尤其大厂几乎标配。如果你正在准备求职，掌握 React 几乎是必选项。
至于书籍？我建议新手先动手再看书。React 官方文档写得非常友好，比很多书更直观。等你有了实战经验，再配合《React 学习手册》《深入 React 技术栈》这类书系统梳理知识，效率更高。别一上来就啃厚书，容易劝退！
第一步：搭建开发环境（超详细！）
别被“环境搭建”吓到，现在工具很智能，几步就能搞定。
你需要准备：
- 一台电脑（Windows / Mac / Linux 都行）
- 最新版 Node.js（安装时勾选自动安装 npm）
✅ 检查是否安装成功：
打开终端（Mac/Linux 用 Terminal，Windows 用 PowerShell 或 CMD），输入：node -v npm -v如果显示版本号（如 v18.17.0），说明安装成功！
创建你的第一个 React 项目
我们使用官方推荐的脚手架工具 create-react-app（简称 CRA），它能自动生成所有配置文件。
在终端中运行：
npx create-react-app my-first-react-app
这个命令会：
- 自动下载所需依赖
- 创建一个叫
my-first-react-app的文件夹 - 里面包含完整可运行的 React 项目结构
⏱️ 等待时间：根据网速，大约 1-5 分钟。耐心点！
创建完成后，进入项目目录并启动开发服务器：
cd my-first-react-app
npm start
浏览器会自动打开 http://localhost:3000，看到一个旋转的 React logo——恭喜！你已经跑起了第一个 React 应用！
核心概念：用最简单的话讲清楚
别怕术语，我用生活例子解释：
1. 组件（Component） = 网页的“乐高积木”
传统写网页是把 HTML、CSS、JS 写在一起，改一处可能崩全局。
React 则把页面拆成一个个独立组件，比如：
Header（顶部导航）ProductCard（商品卡片）Footer（页脚）
每个组件自己管自己的样子和行为，互不干扰。
2. JSX = 在 JS 里写 HTML
React 用一种叫 JSX 的语法，让你在 JavaScript 文件里直接写类似 HTML 的代码：
// src/App.js
function App() {
return (
<div className="App">
<h1>你好，React！</h1>
</div>
);
}
注意：这里用 className 而不是 class，因为 class 是 JS 关键字。
3. 状态（State） = 组件的“记忆”
比如一个计数器，点一下 +1。这个“当前数字”就是状态。
React 用 useState 钩子（Hook）来管理状态：
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) 返回一个数组：当前值 count 和修改它的函数 setCount。
实战：做一个“待办事项”小应用
光看不练假把式！我们来做一个超简版 Todo List。
步骤 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 [inputValue, setInputValue] = useState('');
const handleAdd = () => {
if (inputValue.trim()) {
console.log('要添加的任务:', inputValue);
setInputValue(''); // 清空输入框
}
};
return (
<div className="App">
<h1>我的待办清单</h1>
<input
type="text"
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
placeholder="输入任务..."
/>
<button onClick={handleAdd}>添加</button>
</div>
);
}
步骤 3：保存任务列表并显示
function App() {
const [inputValue, setInputValue] = useState('');
const [todos, setTodos] = useState([]); // 存储任务列表
const handleAdd = () => {
if (inputValue.trim()) {
setTodos([...todos, inputValue]); // 添加新任务
setInputValue('');
}
};
return (
<div className="App">
<h1>我的待办清单</h1>
<input
type="text"
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
placeholder="输入任务..."
/>
<button onClick={handleAdd}>添加</button>
<ul>
{todos.map((todo, index) => (
<li key={index}>{todo}</li>
))}
</ul>
</div>
);
}
🔑 关键点：
key={index}是 React 渲染列表时的必要属性，用于高效更新。
现在试试输入任务并点击“添加”——列表会实时更新！这就是 React 的响应式魅力。
新手常见问题 & 避坑指南
| 问题 | 原因 | 解决方案 |
|---|---|---|
| 页面空白，控制台报错 | 忘记导入 useState |
检查 import { useState } from 'react'; |
| 输入框无法输入 | value 没绑定 onChange |
必须同时设置 value 和 onChange |
| 列表不更新 | 直接修改 todos 数组 |
用 setTodos([...todos, newItem]) 创建新数组 |
| 端口被占用 | 3000 端口已被其他程序占用 | 终端按 Ctrl+C 停止，或改端口：PORT=4000 npm start |
💡 我当初第一次写 Todo 时，死活不明白为什么不能直接写
todos.push(newItem)——因为 React 要求状态必须是不可变的（immutable），必须返回一个新数组才能触发更新！
下一步怎么学？给你的学习路线图
- 巩固基础：多写几个小项目（计算器、天气卡片、购物车）
- 理解原理：搞懂“虚拟 DOM”“组件生命周期”“props vs state”
- 进阶工具：学习 React Router（页面跳转）、Axios（请求数据）
- 求职准备：刷 LeetCode 简单题 + 做一个完整项目（比如博客系统）
- 推荐资源：
- 官方文档：react.dev（新版超友好！）
- 免费视频：我的 B 站频道搜 “React 零基础”
- 书籍（后期看）：《React 学习手册》（O’Reilly 出版）
最后说两句
React 看似门槛高，但只要你迈出第一步，后面会越来越顺。我带过不少零基础学员，三个月后成功入职大厂的不在少数。关键不是天赋，而是动手实践 + 持续迭代。
记住：每一个复杂的 React 应用，都是从 npx create-react-app 这一行命令开始的。
你现在就可以打开终端，敲下那行命令——属于你的前端之旅，就此启程。
评论 0