从零开始，用 React 写出你的第一个网页应用
大家好，我是一个干了五年后端开发的工程师。虽然我的日常工作是写 API、调数据库、搭微服务，但我一直觉得，懂一点前端，尤其是 React，对程序员的职业发展非常有帮助。无论是想转全栈、参与开源项目，还是在求职时多一份竞争力，React 都是一块敲门砖。
我当初学 React 的时候，被一堆术语吓到过：JSX、虚拟 DOM、状态管理……但后来发现，只要拆开一步步来，它其实没那么难。今天这篇教程，就是专门为完全零基础的朋友准备的。我会用最直白的语言，带你从安装环境到写出第一个能运行的 React 应用。全程不讲大道理，只讲你能马上上手的东西。
更重要的是，我们会把整个过程变成一个“小项目”——你不仅能学会 React，还能把它上传到 GitHub，成为你简历里亮眼的一笔。毕竟，在求职时，一个能跑的 GitHub 项目，比一百句“熟悉 React”都有说服力。
为什么选择 React？
React 是 Facebook（现 Meta）开发的一个 JavaScript 库，专门用来构建用户界面。你可以把它想象成“搭积木”：每个页面由很多小部件（比如按钮、列表、表单）组成，而 React 帮你把这些部件高效地组合起来，并且当数据变化时，自动更新页面。
它的优势在于：
- 组件化：把 UI 拆成独立的小块，方便复用和维护
- 生态强大：有大量工具、库和社区支持
- 求职热门：几乎所有前端岗都要求会 React
第一步：搭建开发环境
别担心，现在搭建 React 环境比五年前简单多了。我们只需要两个工具：
- Node.js：让 JavaScript 能在电脑上运行（不只是浏览器里）
- npm 或 yarn：包管理工具，用来安装 React 和其他依赖
安装 Node.js
访问 https://nodejs.org，下载 LTS（长期支持）版本，一路默认安装即可。
安装完成后，打开终端（Windows 用 PowerShell 或 CMD，Mac 用 Terminal），输入：
node -v
npm -v
如果看到类似 v18.17.0 和 9.6.7 的版本号，说明安装成功！
💡 小提示：如果你用 Mac 且习惯用 Homebrew，也可以运行
brew install node。
创建你的第一个 React 项目
React 官方提供了一个叫 Create React App（简称 CRA）的工具，它能一键生成项目骨架。运行以下命令：
npx create-react-app my-first-react-app
这会创建一个名为 my-first-react-app 的文件夹。耐心等几分钟，因为 npm 会下载很多依赖。
完成后，进入项目目录并启动开发服务器：
cd my-first-react-app
npm start
浏览器会自动打开 http://localhost:3000，看到一个旋转的 React Logo —— 恭喜！你已经跑起了第一个 React 应用。
⚠️ 常见问题：如果卡在
Installing packages，可以尝试换源（比如npm config set registry https://registry.npmmirror.com）或使用yarn替代。
理解 React 的核心概念
别急着写代码，先搞懂三个关键概念，它们是 React 的“地基”。
1. 组件（Component）：UI 的乐高积木
在 React 中，一切皆组件。一个按钮、一个导航栏、整个页面，都是组件。组件可以嵌套，比如 App 组件里包含 Header 和 Main。
每个组件就是一个 JavaScript 函数（或类），返回你想显示的 HTML 内容。
// 这是一个简单的函数组件
function Welcome() {
return <h1>Hello, React!</h1>;
}
2. JSX：在 JS 里写 HTML
上面代码里的 <h1>Hello, React!</h1> 看起来像 HTML，但其实是 JSX —— 一种 JavaScript 的语法扩展。它让写 UI 更直观。
JSX 会被编译成普通的 JavaScript 函数调用，所以你可以在里面写逻辑：
function Greeting({ name }) {
return <p>你好，{name}！</p>; // {} 里可以放 JS 表达式
}
3. 状态（State）：让页面“活”起来
静态页面很无聊。我们要让页面能响应用户操作（比如点击按钮）。这就需要 状态。
React 提供了 useState 钩子（Hook）来管理状态：
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0); // 声明一个状态变量
return (
<div>
<p>你点击了 {count} 次</p>
<button onClick={() => setCount(count + 1)}>
点我加一
</button>
</div>
);
}
useState(0) 返回一个数组：当前值（count）和修改它的函数（setCount）。每次调用 setCount，React 会自动重新渲染组件。
实战：做一个“待办事项”小应用
光看不练假把式。现在，我们动手做一个极简的 Todo List 应用。它包含：
- 输入框：添加新任务
- 列表：显示所有任务
- 删除按钮：移除某项任务
这个项目虽小，但涵盖了 React 的核心用法。
步骤 1：清理默认代码
打开 src/App.js，删掉所有内容，替换成：
import './App.css';
function App() {
return (
<div className="App">
<h1>我的待办事项</h1>
</div>
);
}
export default App;
同时，清空 src/App.css，只保留：
.App {
max-width: 600px;
margin: 50px auto;
padding: 20px;
}
步骤 2：添加状态和输入框
我们需要两个状态：
todos：任务列表（数组）inputValue：输入框的当前内容
import { useState } from 'react';
import './App.css';
function App() {
const [todos, setTodos] = useState([]);
const [inputValue, setInputValue] = useState('');
const handleAddTodo = () => {
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={handleAddTodo}>添加</button>
<ul>
{todos.map((todo, index) => (
<li key={index}>{todo}</li>
))}
</ul>
</div>
);
}
export default App;
🔍 关键点解释：
value={inputValue}：让输入框受控（内容由 state 决定）onChange：监听输入变化，实时更新inputValuekey={index}：React 需要唯一 key 来高效更新列表
步骤 3：添加删除功能
给每个任务加一个“删除”按钮：
// 在 map 里修改 li
<li key={index}>
{todo}
<button onClick={() => {
const newTodos = todos.filter((_, i) => i !== index);
setTodos(newTodos);
}}>
删除
</button>
</li>
完整代码如下：
import { useState } from 'react';
import './App.css';
function App() {
const [todos, setTodos] = useState([]);
const [inputValue, setInputValue] = useState('');
const handleAddTodo = () => {
if (inputValue.trim()) {
setTodos([...todos, inputValue]);
setInputValue('');
}
};
const handleDelete = (index) => {
const newTodos = todos.filter((_, i) => i !== index);
setTodos(newTodos);
};
return (
<div className="App">
<h1>我的待办事项</h1>
<input
type="text"
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
placeholder="输入新任务"
onKeyPress={(e) => e.key === 'Enter' && handleAddTodo()}
/>
<button onClick={handleAddTodo}>添加</button>
<ul>
{todos.map((todo, index) => (
<li key={index}>
{todo}
<button onClick={() => handleDelete(index)}>删除</button>
</li>
))}
</ul>
</div>
);
}
export default App;
我还加了一个小功能：按回车也能添加任务（onKeyPress）。
现在，保存文件，浏览器会自动刷新。试试添加和删除任务吧！
把项目推送到 GitHub
做完项目，别让它躺在本地。上传到 GitHub 是展示能力的最佳方式，尤其在求职时。
步骤：
- 在 GitHub 创建一个新仓库（比如叫
my-first-react-todo） - 在项目根目录执行：
git init
git add .
git commit -m "feat: initial todo app"
git branch -M main
git remote add origin https://github.com/你的用户名/my-first-react-todo.git
git push -u origin main
💡 如果你还没配置 Git，先运行：
git config --global user.name "你的名字" git config --global user.email "你的邮箱"
上传成功后，你的 GitHub 主页就会多一个项目。面试时，直接说：“我有个 React 项目，地址是……”，立刻加分！
新手常见问题解答
Q1：为什么用 useState 而不用普通变量？
A：普通变量变了，React 不知道，不会重新渲染页面。useState 会通知 React：“数据变了，快更新 UI！”
Q2：key 为什么重要？能用 index 吗？
A：key 帮助 React 识别哪些元素变了、加了、删了。用 index 在列表顺序不变时没问题，但如果支持拖拽排序，就该用唯一 ID（比如数据库主键）。
Q3：项目太大，App.js 写不下了怎么办？
A：拆组件！比如把 TodoList 和 TodoItem 提成单独文件。组件化是 React 的核心思想。
Q4：怎么部署这个应用？
A：用 npm run build 生成静态文件，然后用 Vercel、Netlify 或 GitHub Pages 免费部署。一行命令就能上线！
下一步学习建议
恭喜你，已经跨过了 React 最难的门槛！接下来，我建议你：
- 深入理解 Hook：除了
useState，还有useEffect（处理副作用，如请求数据）、useContext等。 - 学习路由：用
react-router-dom实现多页面跳转。 - 尝试状态管理：小型项目用
useState足够，大型项目可学 Redux 或 Zustand。 - 做更多小项目：天气应用、记账本、博客首页……实践是最好的老师。
🛑 避坑指南：
- 不要一上来就学 Redux，先掌握 React 本身
- 不要死磕文档，边做边查更高效
- 不要怕犯错，所有开发者都是从 bug 里爬出来的
结语：工具、项目、求职，三位一体
写这篇教程，是因为我深知新手最需要的不是理论，而是“能跑起来”的信心。你今天完成的这个 Todo 应用，虽然简单，但它代表了你迈出了第一步。
记住：GitHub 上的项目 > 简历上的“了解 React”。企业更看重你能否产出实际成果。哪怕只是一个小应用，只要代码清晰、功能完整，就能在求职中脱颖而出。
工具帮你提高效率，项目证明你的能力，而 React，正是连接这两者的桥梁。
现在，去你的终端，敲下 npx create-react-app 吧。你的第一个 React 应用，正在等你唤醒。
评论 0