React入门教程：从安装到第一个应用
大家好，我是前端团队的培训负责人，过去五年里带过上百位应届生入门前端开发。很多同学刚接触 React 时一脸懵——“JSX 是什么？”“为什么组件要大写？”“npm、npx 又有什么区别？”——这些我都经历过。
我当初学的时候，也是一边查文档一边敲代码，踩过无数坑。 所以今天，我想用最平实的语言，带你一步步搭建环境、理解概念，并亲手做出你的第一个 React 应用。哪怕你连 HTML 都不太熟，也没关系——只要你愿意动手，就能走通这条路。
这篇文章不仅教你 React，还会顺带聊聊 代码人生 的起点、如何把作品传到 GitHub，甚至提一嘴 爬虫 和前端的关系（别急，后面会解释）。
一、React 是什么？能用来做什么？
React 是由 Facebook（现 Meta）开发的一个 JavaScript 库，专门用来构建用户界面（UI）。你可以把它想象成“搭积木”：每个积木是一个“组件”，比如按钮、导航栏、商品卡片，然后把这些组件拼在一起，就组成了完整的网页。
✅ React 的核心思想：把 UI 拆分成独立、可复用的小块（组件），数据变化时自动更新页面。
React 广泛用于大型网站（如 Instagram、Airbnb）、后台管理系统、甚至移动端（通过 React Native）。学会它，你就踏上了现代前端开发的大门。
二、环境准备：5 分钟搞定开发工具
在写代码前，我们需要安装几个工具。别担心，只要跟着步骤来就行。
第一步：安装 Node.js
React 项目依赖 Node.js（一个运行 JavaScript 的环境）。
👉 访问 https://nodejs.org，下载 LTS 版本（长期支持版，更稳定）。
安装完成后，在终端（Mac 用 Terminal，Windows 用 PowerShell 或 CMD）输入：
node -v
npm -v
如果看到类似 v18.17.0 和 9.6.7 的版本号，说明安装成功！
💡 小知识：
npm是 Node.js 自带的包管理工具，用来安装第三方代码库（比如 React）。
第二步：创建你的第一个 React 项目
我们使用官方推荐的脚手架工具 Vite（比 Create React App 更快）。
在终端中执行以下命令（一行一行复制）：
# 创建项目（my-react-app 是项目名，可自定义）
npm create vite@latest my-react-app -- --template react
# 进入项目目录
cd my-react-app
# 安装依赖
npm install
# 启动开发服务器
npm run dev
启动成功后，你会看到类似这样的提示：
Local: http://localhost:5173/
打开浏览器，访问这个地址，就能看到一个旋转的 React Logo！🎉
⚠️ 注意：不要手动创建文件夹再运行命令，
npm create vite会自动新建项目文件夹。
三、核心概念：用“人话”解释 React 关键词
现在，我们来看看项目里的关键文件。打开 my-react-app 文件夹，重点关注 src/App.jsx。
1. 什么是组件（Component）？
组件就是 可复用的 UI 单元。在 React 中，一个组件就是一个 JavaScript 函数。
// src/App.jsx
function App() {
return (
<div>
<h1>你好，React！</h1>
</div>
);
}
export default App;
- 函数名
App必须首字母大写（这是 React 的规则）。 return里写的是 JSX —— 一种看起来像 HTML 的 JavaScript 语法。
🌟 JSX 小贴士：
- 用
{}插入 JavaScript 表达式，比如<p>当前时间：{new Date().toLocaleTimeString()}</p>- 所有标签必须闭合，如
<img />而不是<img>
2. 什么是状态（State）？
状态是组件的“记忆”。比如点击按钮，数字加 1 —— 这个数字就是状态。
修改 App.jsx：
import { useState } from 'react';
function App() {
// 声明一个叫 count 的状态，默认值是 0
const [count, setCount] = useState(0);
return (
<div>
<h1>你点击了 {count} 次</h1>
<button onClick={() => setCount(count + 1)}>
点我加 1
</button>
</div>
);
}
export default App;
useState是 React 提供的 Hook（钩子），用来管理状态。setCount是更新状态的函数，调用它会重新渲染组件。
💡 我当初学的时候，总忘记
setCount是异步的，不能立刻读取新值。记住：状态更新后，下一次渲染才会生效。
四、实战项目：做一个“GitHub 用户查询器”
光看例子不够，我们来做一个小应用：输入 GitHub 用户名，显示其头像和简介。
🤔 为什么选 GitHub？
因为它是程序员的“社交名片”，而且它的 API 免费、公开。顺便说一句，爬虫通常指自动抓取网页数据，但 GitHub 提供了官方 API，我们就不用写爬虫了——直接调用即可！
步骤 1：搭建基础结构
替换 App.jsx 内容：
import { useState } from 'react';
function App() {
const [username, setUsername] = useState('');
const [user, setUser] = useState(null);
const [loading, setLoading] = useState(false);
const handleSubmit = async (e) => {
e.preventDefault();
if (!username.trim()) return;
setLoading(true);
try {
const res = await fetch(`https://api.github.com/users/${username}`);
const data = await res.json();
setUser(data);
} catch (err) {
alert('用户不存在或网络错误');
} finally {
setLoading(false);
}
};
return (
<div style={{ padding: '20px', maxWidth: '600px', margin: '0 auto' }}>
<h1>GitHub 用户查询器</h1>
<form onSubmit={handleSubmit}>
<input
type="text"
value={username}
onChange={(e) => setUsername(e.target.value)}
placeholder="输入 GitHub 用户名"
style={{ padding: '8px', width: '200px', marginRight: '10px' }}
/>
<button type="submit" disabled={loading}>
{loading ? '加载中...' : '查询'}
</button>
</form>
{user && (
<div style={{ marginTop: '20px', textAlign: 'center' }}>
<img
src={user.avatar_url}
alt={user.login}
style={{ width: '100px', borderRadius: '50%' }}
/>
<h2>{user.name || user.login}</h2>
<p>{user.bio || '暂无简介'}</p>
<p>粉丝数：{user.followers}</p>
</div>
)}
</div>
);
}
export default App;
步骤 2：运行并测试
保存文件后，回到浏览器。你应该能看到一个输入框。
试试输入 octocat（GitHub 官方吉祥物），点击“查询”——头像和信息就会出现！
🔍 技术点解析：
fetch：浏览器内置的 API，用于发送网络请求。async/await：让异步代码看起来像同步，更易读。- 表单提交用
onSubmit，避免页面刷新。
五、新手常见问题 FAQ
| 问题 | 解答 |
|---|---|
| 为什么我的代码没生效？ | 检查是否保存了文件（Ctrl+S / Cmd+S），Vite 会自动刷新页面。 |
| 报错：React is not defined | 确保文件扩展名是 .jsx 而不是 .js，Vite 需要识别 JSX 语法。 |
| 怎么改端口号？ | 在 package.json 的 dev 脚本后加 --port 3000，或修改 vite.config.js。 |
| 能用中文吗？ | 当然可以！JSX 支持中文，但记得文件保存为 UTF-8 编码。 |
| 和爬虫有什么关系？ | 爬虫是抓取网页 HTML 内容，而我们这里是调用 GitHub 的 API（结构化数据），更规范、高效。 |
六、把代码上传到 GitHub（开启你的代码人生）
完成项目后，建议你把它上传到 GitHub——这是程序员的“作品集”。
上传步骤：
- 在 GitHub 网站上新建一个仓库（比如叫
my-first-react-app） - 在项目根目录执行：
git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/你的用户名/my-first-react-app.git
git push -u origin main
💡 小提醒：第一次推送可能需要登录 GitHub 账号。建议配置 SSH 密钥，更安全便捷。
从此，你的 代码人生 就有了第一个里程碑！
七、下一步学习建议
恭喜你完成了第一个 React 应用！接下来，我建议你：
✅ 巩固基础
- 学习
useEffect（处理副作用，如数据获取） - 理解组件通信（props、状态提升）
✅ 动手实践
- 尝试做一个待办事项（Todo List）
- 用
react-router实现多页面跳转
✅ 避坑指南
- 不要一上来就学 Redux（状态管理太早）
- 别死记 API，多查 React 官方文档
🌱 最后送你一句话：
“编程不是记住所有语法，而是学会解决问题。”
你写的每一行代码，都在塑造你的 代码人生。
现在，关掉这篇教程，打开你的编辑器——
开始敲吧，你的第一个 React 组件正在等你！
评论 0