异常教程
React 创建第一个项目（保姆级教程）
💡一则或许对你有用的小广告
欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论
- 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于
Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;- 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;
截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观
前言：为什么选择 React？
在前端开发领域，React 无疑是目前最受欢迎的 JavaScript 库之一。它由 Facebook 开发并维护，凭借其高效的组件化架构和直观的声明式语法，成为构建复杂 Web 应用的首选工具。无论是初学者还是资深开发者，React 都能提供友好的学习曲线和强大的功能支持。通过本文，我们将一步步指导你如何创建第一个 React 项目，理解核心概念，并构建一个简单的交互式应用。
环境准备：搭建 React 开发环境
安装 Node.js 和 npm
React 项目依赖 Node.js 运行环境。首先，访问 Node.js 官网 下载并安装最新 LTS 版本。安装完成后，通过命令行验证安装：
node -v
npm -v
这两个命令会分别显示 Node.js 和 npm（Node 包管理器）的版本号。确保版本号符合 React 的最低要求（通常 Node.js 16+ 和 npm 8+ 即可）。
使用 Create React App 快速初始化项目
Facebook 官方提供的 create-react-app 是创建 React 项目的最佳工具。它封装了复杂的配置，让开发者可以专注于代码逻辑。运行以下命令创建项目：
npx create-react App my-first-react-project
执行后，系统会询问是否选择默认配置（如 CSS 预处理器等），直接按回车接受默认选项即可。等待安装完成后，进入项目目录：
cd my-first-react-project
启动开发服务器：
npm start
浏览器会自动打开 http://localhost:3000，显示默认的 React 欢迎页面。此时，你的第一个 React 项目已成功启动！
项目结构解析：理解 React 项目的文件组织
在 my-first-react-project 目录中，主要文件结构如下：
| 文件/文件夹 | 作用描述 |
|---|---|
public | 包含静态资源（如 index.html） |
src | 存放源代码 |
App.js | 主组件文件 |
index.js | 应用入口文件 |
package.json | 项目配置及依赖管理 |
关键文件详解
index.js：这是 React 应用的入口点。它将App组件挂载到 HTML 中的#root容器（位于public/index.html）。App.js：主组件，通常作为应用的顶层容器。你可以在这里定义组件结构或引入其他子组件。package.json：记录项目依赖和脚本命令。例如"start"脚本对应npm start。
组件编写：从简单到复杂
什么是组件？
React 的核心概念是组件。你可以将组件想象为可复用的“积木块”，每个组件负责渲染特定功能的 UI。例如，一个按钮组件、一个列表项组件或一个表单组件。
示例：创建第一个组件
在 src 目录下新建文件 HelloWorld.js，编写以下代码：
// HelloWorld.js
function HelloWorld() {
return <h1>你好，React！</h1>;
}
export default HelloWorld;
然后在 App.js 中引入并使用它：
// App.js
import HelloWorld from './HelloWorld';
function App() {
return (
<div>
<HelloWorld />
</div>
);
}
export default App;
刷新浏览器，你会看到新增的标题。这展示了组件的基本工作流程：定义 → 导出 → 引入 → 渲染。
状态管理：让组件“活”起来
静态内容只能展示基础信息，而真实应用需要动态交互。React 通过**状态（State）**实现这一点。
状态的比喻：状态如同可变的“黑板”
想象一个黑板，你可以随时擦除并写入新的内容。在 React 中，状态就像这块黑板，通过 useState 钩子管理：
// Counter.js
import { useState } from 'react';
function Counter() {
// 定义初始状态为 0
const [count, setCount] = useState(0);
return (
<div>
<p>当前计数：{count}</p>
<button onClick={() => setCount(count + 1)}>+1</button>
<button onClick={() => setCount(count - 1)}>-1</button>
</div>
);
}
export default Counter;
useState返回一个数组，第一个元素是当前状态值，第二个是更新状态的方法。- 每次调用
setCount，组件会重新渲染，显示最新的count值。
属性（Props）：组件间的数据传递
组件间通信是通过**属性（Props）**实现的。Props 可以看作是父组件传递给子组件的“指令”。
示例：通过 Props 传递消息
在 App.js 中定义一个父组件：
function App() {
const message = "欢迎来到 React 世界！";
return (
<div>
<MessageDisplay message={message} />
</div>
);
}
然后创建子组件 MessageDisplay.js：
// MessageDisplay.js
function MessageDisplay({ message }) {
return <p>接收到的消息：{message}</p>;
}
export default MessageDisplay;
此时，父组件通过 message 属性将数据传递给子组件。Props 是单向流动的，子组件不能直接修改父组件传递的 Props。
进阶技巧：条件渲染与列表渲染
条件渲染：根据状态显示不同内容
function Greeting() {
const [isLoggedIn, setIsLoggedIn] = useState(false);
return (
<div>
{isLoggedIn ? (
<p>欢迎回来，用户！</p>
) : (
<p>请登录</p>
)}
<button onClick={() => setIsLoggedIn(!isLoggedIn)}>
切换登录状态
</button>
</div>
);
}
使用三元表达式或 && 运算符，可以轻松实现条件渲染。
列表渲染：从数组生成组件列表
function TaskList() {
const tasks = ["学习 React", "编写代码", "部署应用"];
return (
<ul>
{tasks.map((task, index) => (
<li key={index}>{task}</li>
))}
</ul>
);
}
key属性是 React 识别列表项的唯一标识，推荐使用唯一值而非索引。map方法遍历数组，将每个元素转换为列表项。
部署项目：将你的应用分享给世界
完成开发后，可通过以下步骤部署应用：
- 构建生产版本：运行
npm run build，生成优化后的静态文件在build/目录。 - 选择托管平台：选择 GitHub Pages、Netlify 或 Vercel 等平台上传
build/文件。 - 配置域名（可选）：通过 DNS 设置将自定义域名指向托管服务。
结论：下一步行动指南
通过本文，你已掌握了从零到一创建 React 项目的全流程。建议继续深入以下方向：
- 学习更多钩子：如
useEffect（处理副作用）、useContext（全局状态）等。 - 探索路由系统：使用 React Router 实现多页面应用。
- 代码优化：学习组件拆分、性能优化技巧。
记住，实践是掌握 React 的最佳途径。尝试将本文示例扩展为一个完整的待办事项应用，或尝试接入 API 获取数据。你也可以访问 React 官方文档 获取更详细的技术参考。
通过循序渐进地构建项目，你将逐渐理解 React 的设计理念，并为未来开发复杂应用打下坚实基础。现在，是时候动手实践，让代码“跑起来”吧！