零基础也能学会：从零搭建你的第一个 React 应用
大家好，我是一个自学转码成功的文科生。三年前，我连“前端”和“后端”都分不清，如今却在一家互联网公司做前端开发。当初学 React 的时候，我被各种术语、工具和配置搞得晕头转向——Node.js 是什么？npm 和 yarn 有啥区别？为什么还要装 Git？今天，我就用自己踩过的坑、总结的经验，写一篇真正适合零基础朋友的 React 入门教程。
这篇教程不讲高深理论，只带你从安装到跑通第一个应用，还会穿插我作为新手时的开发心得，以及如何把代码托管到 GitHub 上，甚至为未来做产品运营打下基础。无论你是学生、转行者，还是纯粹好奇的技术爱好者，都能跟着一步步走完。
一、React 是什么？能用来做什么？
简单说，React 是一个用来构建用户界面的 JavaScript 工具库，由 Facebook（现 Meta）开发并开源。你每天刷的微博、小红书、抖音网页版，背后很可能就用了 React。
它的核心思想是：把页面拆成一个个“组件”，比如导航栏、按钮、商品卡片，每个组件独立工作，又能组合起来形成完整页面。这样不仅代码更清晰，也更容易维护和复用。
我当初学的时候，最震撼的就是：原来网页可以像搭积木一样拼出来！
二、环境准备：5 分钟搞定开发环境
别被“环境搭建”吓到，其实就三步。我们用官方推荐的 Vite + React 模板，它比传统 Create React App 更快、更轻量。
第一步：安装 Node.js
React 项目依赖 Node.js 来运行开发服务器和打包工具。
- 打开 https://nodejs.org
- 下载 LTS 版本（长期支持版，更稳定）
- 安装时一路“下一步”即可
安装完成后，打开终端（Windows 用 PowerShell 或 CMD，Mac 用 Terminal），输入：
node -v
npm -v
如果看到版本号（比如 v18.17.0 和 9.6.7），说明安装成功！
💡 开发心得：不要用最新版 Node，LTS 版兼容性最好，避免踩坑。
第二步：创建 React 项目
在终端中执行以下命令（假设你想把项目放在桌面）：
# 进入桌面目录
cd ~/Desktop
# 创建新项目（按提示操作）
npm create vite@latest my-react-app -- --template react
# 进入项目文件夹
cd my-react-app
# 安装依赖
npm install
# 启动开发服务器
npm run dev
你会看到类似这样的输出：
VITE v4.3.9 ready in 234 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
复制 http://localhost:5173/ 到浏览器打开，如果看到一个会动的 React Logo 和“Vite + React”字样，恭喜你！环境搭好了！
🚫 常见问题：如果卡在
npm install，可能是网络问题。可以尝试换源：npm config set registry https://registry.npmmirror.com
第三步：安装代码编辑器（推荐 VS Code）
去 https://code.visualstudio.com 下载安装。装好后，用 VS Code 打开 my-react-app 文件夹，你会看到如下结构：
my-react-app/
├── public/
├── src/
│ ├── App.jsx
│ ├── main.jsx
│ └── ...
├── index.html
├── package.json
└── ...
其中，src/App.jsx 就是我们要修改的主文件。
三、核心概念：用大白话讲清楚 React
1. JSX：HTML 写在 JavaScript 里？
你看 App.jsx 里有这样一段代码：
function App() {
return (
<div>
<h1>Hello, React!</h1>
</div>
);
}
这看起来像 HTML，但其实叫 JSX —— 一种 JavaScript 的语法扩展。它让开发者能用类似 HTML 的方式写 UI，但最终会被编译成纯 JavaScript。
✅ 记住：JSX 不是字符串，也不是 HTML，它是 React.createElement() 的语法糖。
2. 组件：UI 的“乐高积木”
上面的 App 函数就是一个 函数组件。你可以把它想象成一个“模具”，每次调用就能生成一个 UI 片段。
比如，我们写一个按钮组件：
// Button.jsx
export default function Button() {
return <button style={{ padding: '8px', margin: '4px' }}>点我</button>;
}
然后在 App.jsx 中使用：
import Button from './Button';
function App() {
return (
<div>
<h1>我的第一个 React 应用</h1>
<Button />
<Button />
</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++，这不会触发更新！必须用setCount。
四、实战：做一个“待办事项”小应用
现在，我们整合所学，做一个简单的 Todo List。
步骤 1：替换 App.jsx 内容
// src/App.jsx
import { useState } from 'react';
function App() {
const [todos, setTodos] = useState([]);
const [input, setInput] = useState('');
const addTodo = () => {
if (input.trim()) {
setTodos([...todos, { id: Date.now(), text: input, done: false }]);
setInput('');
}
};
const toggleTodo = (id) => {
setTodos(
todos.map(todo =>
todo.id === id ? { ...todo, done: !todo.done } : todo
)
);
};
const deleteTodo = (id) => {
setTodos(todos.filter(todo => todo.id !== id));
};
return (
<div style={{ padding: '20px', maxWidth: '500px', margin: '0 auto' }}>
<h1>我的待办清单</h1>
<div style={{ marginBottom: '20px' }}>
<input
type="text"
value={input}
onChange={(e) => setInput(e.target.value)}
placeholder="输入任务..."
style={{ padding: '8px', marginRight: '8px', width: '70%' }}
/>
<button onClick={addTodo} style={{ padding: '8px' }}>
添加
</button>
</div>
<ul>
{todos.map(todo => (
<li key={todo.id} style={{
display: 'flex',
justifyContent: 'space-between',
padding: '8px',
borderBottom: '1px solid #eee'
}}>
<span
onClick={() => toggleTodo(todo.id)}
style={{
cursor: 'pointer',
textDecoration: todo.done ? 'line-through' : 'none',
color: todo.done ? '#888' : '#000'
}}
>
{todo.text}
</span>
<button
onClick={() => deleteTodo(todo.id)}
style={{ color: 'red', background: 'none', border: 'none' }}
>
删除
</button>
</li>
))}
</ul>
</div>
);
}
export default App;
步骤 2：测试功能
- 在输入框输入文字，点击“添加”
- 点击任务文字可标记完成（加删除线）
- 点击“删除”可移除任务
全部功能仅用 60 行代码实现！这就是 React 的威力。
🔧 性能优化小贴士：虽然这个小应用不需要，但未来项目中，如果列表很长，可以用
React.memo或虚拟滚动来提升性能。
五、把代码上传到 GitHub（为运营打基础）
无论你未来是找工作、做开源项目，还是自己创业，GitHub 都是必备技能。它不仅是代码托管平台，更是展示你能力的“技术简历”。
1. 注册 GitHub 账号
访问 https://github.com，注册一个免费账号。
2. 初始化本地仓库
在项目根目录（my-react-app）执行：
git init
git add .
git commit -m "feat: initial commit with todo app"
3. 创建远程仓库
- 在 GitHub 点击右上角
+→ “New repository” - 命名（如
my-first-react-app），不要勾选“Initialize this repository with a README” - 点击 “Create repository”
4. 关联并推送
按页面提示执行（替换你的用户名）：
git remote add origin https://github.com/你的用户名/my-first-react-app.git
git branch -M main
git push -u origin main
现在，你的代码已经安全存放在 GitHub 上了！
💡 运营视角：很多初创团队会把 MVP（最小可行产品）代码开源，吸引早期用户和贡献者。即使你只是学习，公开项目也能让招聘方看到你的动手能力。
六、新手常见问题解答
| 问题 | 解决方案 |
|---|---|
| 页面没更新？ | 检查是否用了 setXXX，而不是直接修改变量 |
报错 Module not found？ |
确保在项目根目录执行 npm install |
| 中文显示乱码？ | 在 index.html 的 <head> 中加入 <meta charset="UTF-8"> |
| 想用 CSS 样式怎么办？ | 直接在 .jsx 文件中写内联样式，或新建 .css 文件 import |
| 如何部署上线？ | 用 npm run build 生成 dist 文件夹，上传到 Vercel、Netlify 等平台 |
七、下一步学习建议 & 避坑指南
学习路径推荐：
- 巩固基础：深入理解
useState、useEffect、props 传递 - 路由管理：学习
react-router-dom实现多页面跳转 - 状态管理：小型项目用 Context，大型项目再学 Redux 或 Zustand
- 项目实战：模仿一个真实网站（如天气预报、博客）
避坑指南（来自我的血泪史）：
- ❌ 不要一上来就学 TypeScript、Webpack 配置——先跑通逻辑
- ❌ 不要盲目追求“最新框架”——React 生态稳定，先掌握核心
- ✅ 多写代码，少看视频——编程是手艺，不是知识
- ✅ 遇到报错，先读错误信息，90% 的问题 Google 一下就有答案
结语：你已经迈出了关键一步
恭喜你，完成了从零到第一个 React 应用的全过程！我当初学的时候，光是环境配置就折腾了三天，而你现在可能只用了半小时。技术在进步，学习门槛在降低，但坚持动手实践永远是最重要的。
这篇文章不仅是一份教程，更是我作为文科生转码路上的一份礼物。如果你觉得有用，不妨把你的 Todo App 上传到 GitHub，发个朋友圈，或者分享给同样想学的朋友。
记住：每一个大神，都曾是连“Hello World”都跑不通的新手。
现在，去写你的第二行代码吧！
评论 0