React 入门教程：从安装到第一个应用
开篇：什么是 React？它可以用来做什么？
React 是一个由 Facebook 开发并维护的前端 JavaScript 库，用于构建用户界面。你可以把它想象成一个“搭建网页的乐高积木箱”。你只需要把一个个小部件（组件）组合起来，就能快速做出漂亮的网页。
简单来说，React 帮我们更方便地写出结构清晰、可维护性强的网页。它广泛用于现代 Web 开发中，尤其适合单页面应用（SPA）的开发。
环境准备：搭建你的第一个 React 开发环境
在开始写代码之前，我们需要准备好开发环境。我们将使用 Vite 来创建我们的第一个 React 项目，因为它是目前最轻量、最快的工具之一。
步骤一：安装 Node.js 和 npm
- 访问 https://nodejs.org，下载并安装 LTS 版本。
- 安装完成后，在终端输入以下命令检查是否安装成功：
node -v
npm -v
如果显示了版本号，说明安装成功。
步骤二：创建一个新的 React 项目（使用 Vite）
- 打开终端（Mac/Linux）或命令提示符/PowerShell（Windows）
- 输入以下命令来创建项目：
npm create vite@latest my-react-app --template react
- 进入项目目录并安装依赖：
cd my-react-app
npm install
- 启动开发服务器：
npm run dev
- 打开浏览器，访问
http://localhost:5173（具体端口号可能会不同），你会看到欢迎页面。
现在你的 React 项目已经跑起来了！
核心概念：React 中的几个关键概念解释
学习 React 的过程中，你一定会遇到一些新名词。别担心，下面我用生活中的例子来解释这些概念。
1. 组件（Component）
比喻：就像拼乐高积木，每个积木是一个组件，比如按钮、标题、卡片等。
代码示例：
function Hello() {
return <h1>Hello, React!</h1>;
}
这个函数就是一个组件，返回了一个 <h1> 标签。
2. JSX 语法
这是 React 使用的一种类似 HTML 的语法格式。你可以把它理解为增强版的 HTML。
示例：
return <div>这是一个 div 元素</div>;
虽然看起来像 HTML，但其实它最终会被 React 转换为普通的 JavaScript 函数调用。
3. 状态（State）
状态就是页面上的数据，可以随着用户操作而变化的东西。
例如，点击按钮增加数字：
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>你点了我 {count} 次</p>
<button onClick={() => setCount(count + 1)}>点我</button>
</div>
);
}
在这个例子中，useState 用于保存和更新状态。
4. props（属性）
组件之间传递信息的方式，类似于给函数传参数。
父组件：
function App() {
return <Greeting name="张三" />;
}
子组件：
function Greeting({ name }) {
return <p>你好，{name}</p>;
}
实战项目：做一个简单的待办事项应用（Todo List）
接下来我们来动手做个实用的小项目：一个简单的待办事项列表。
第一步：创建 App 组件
打开 src/main.jsx 文件，修改内容如下：
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>
);
然后打开 src/App.jsx 文件，开始编写我们的 Todo 列表逻辑。
第二步：写一个完整的 Todo 应用
import { useState } from 'react';
function App() {
const [todos, setTodos] = useState([
{ id: 1, text: '学习 React', completed: false },
{ id: 2, text: '做练习题', completed: false }
]);
const [newTodo, setNewTodo] = useState('');
const addTodo = () => {
if (newTodo.trim()) {
const newId = todos.length > 0 ? todos[todos.length - 1].id + 1 : 1;
setTodos([...todos, { id: newId, text: newTodo, completed: false }]);
setNewTodo('');
}
};
const toggleComplete = (id) => {
const updatedTodos = todos.map(todo =>
todo.id === id ? { ...todo, completed: !todo.completed } : todo
);
setTodos(updatedTodos);
};
return (
<div style={{ padding: 20 }}>
<h1>待办事项</h1>
<input
type="text"
value={newTodo}
onChange={(e) => setNewTodo(e.target.value)}
placeholder="添加新任务"
/>
<button onClick={addTodo}>添加</button>
<ul>
{todos.map(todo => (
<li key={todo.id}>
<span style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}>
{todo.text}
</span>
<button onClick={() => toggleComplete(todo.id)}>
{todo.completed ? '未完成' : '已完成'}
</button>
</li>
))}
</ul>
</div>
);
}
export default App;
这段代码实现了一个可以添加、标记完成状态的任务清单。
第三步：运行查看效果
再次执行：
npm run dev
然后刷新浏览器页面，你应该可以看到一个可以交互的待办事项应用。
常见问题解答（FAQ）
Q1：React 是不是必须学 TypeScript？
A：不是必须的。
虽然很多公司使用 TypeScript，但作为初学者完全可以先从 JavaScript 学起，掌握了基础之后再学习 TypeScript 更容易。
Q2：为什么我的 JSX 报错了？
A：可能的原因有几个：
- 没有引入 React（注意：虽然新版 React 不强制，但早期版本仍需引入）
- 组件没有正确导出/导入
- 书写了非法的 HTML 标签（如忘记闭合标签）
建议多使用 VSCode 配合 React 插件帮助检测错误。
Q3：怎么查看我在浏览器中渲染的元素？
A：按 F12 打开开发者工具 → Elements 或 Components（如果有 React DevTools）面板即可查看。
React DevTools 是一个非常好用的调试插件，强烈推荐安装。
Q4：React 和 Vue 哪个更好？
A：两者都很优秀。
React 是最早流行起来的框架，社区庞大；Vue 上手更快，学习曲线平缓。选择哪个取决于你的学习目标和团队需求。
学习建议：下一步该学什么？
恭喜你完成了第一个 React 应用！接下来你可以尝试以下几个方向：
✅ 必修课（继续深入）
- 掌握 React Hook（如 useEffect）
- 学习 React Router（路由管理）
- 使用 Redux 或 Context API 管理全局状态
- 异步请求与 API 接口交互
- React 表单处理（如 Formik / React Hook Form）
🧩 工具链扩展
- 学习如何使用 ESLint、Prettier 优化代码风格
- 使用 GitHub 管理你的 React 项目
- 部署上线（如 Netlify、Vercel）
💡 小技巧
- 多模仿别人的作品，自己改一改试试看
- 动手写笔记 + 写 demo 是最快的学习方式
- 参与开源项目或技术论坛（如 GitHub、Stack Overflow）
结语
通过这篇文章，你应该已经了解了 React 的基本概念，完成了开发环境的搭建，并做出了一个属于自己的小应用。希望你在学习 React 的道路上越走越远，写出越来越棒的项目！
如果你觉得这篇教程对你有帮助，不妨收藏它，随时回来复习哦！
本文共约2061字，包含详细步骤、代码示例与常见问题解答，适合完全零基础的初学者入门 React。
评论 0