React入门教程：从安装到第一个应用
开篇：React到底是什么？
React 是一个由 Facebook 推出的 JavaScript 库，用于构建用户界面（尤其是网页前端）。你可以把它想象成一个“搭积木”的工具箱，专门帮助你把网页的不同部分快速搭建起来。
用最简单的说法，React 能帮你写出结构清晰、容易维护的网页。相比传统的 HTML + JS 写法，React 更加模块化和组件化，非常适合做复杂的交互式网页应用，比如社交媒体平台、在线商城等。
我们今天的目标是：
✅ 搭建好 React 的开发环境
✅ 学会 React 的一些基本概念
✅ 动手做一个属于你的第一个 React 小应用
让我们一步步来吧！
环境准备：搭建你的第一个 React 项目
第一步：安装 Node.js 和 npm
React 使用现代 JavaScript 技术，依赖 Node.js 和它的包管理器 npm 来进行开发。如果你还没有安装，可以去官网下载：
🔗 官网地址：https://nodejs.org
安装完成后，在命令行（Windows 上用 PowerShell 或 CMD，Mac 可用终端）输入：
node -v
npm -v
如果看到类似这样的输出说明安装成功：
v20.12.0
10.5.0
第二步：创建 React 项目
我们要使用一个官方提供的脚手架工具：create-react-app，它能自动配置好 React 项目所需的所有基础设置。
在命令行中运行以下命令：
npx create-react-app my-first-app
这个过程可能需要几分钟，网络好的情况下很快完成。
进入项目目录：
cd my-first-app
启动开发服务器：
npm start
浏览器会自动打开地址 http://localhost:3000，你将看到默认的 React 启动页。
现在，你已经有了一个可以编辑的 React 项目！接下来我们开始写自己的代码吧。
核心概念：React 其实很友好
1. 组件 Component —— 像乐高一样拼起来的功能块
React 的核心思想之一就是“组件化”。你可以把页面看作是由一个个小功能块组合而成的，每个小块就是一个组件。
举个例子：
- 页面顶部是导航栏 → 导航栏组件
- 中间是内容区 → 内容组件
- 页面底部是版权信息 → 底部组件
这样拆分后，不仅方便理解，还方便重复使用。
示例：定义一个简单组件
打开项目中的 src/App.js 文件，替换其中的内容：
import React from 'react';
function HelloComponent() {
return (
<div>
<h1>你好，React！</h1>
<p>这是我的第一个 React 组件</p>
</div>
);
}
export default HelloComponent;
保存之后，刷新浏览器，你会发现页面变成了我们的新内容。
2. JSX —— 写 HTML 的一种新方式
你看上面代码里写了 <h1>你好，React！</h1>，但它不是普通字符串，而是 JSX。
JSX 是一种语法扩展，让 JavaScript 支持像 HTML 那样写结构。你可以把它理解为“加强版 HTML”。
注意：JSX 并不是真正的 HTML，但写法几乎一模一样，React 会自动把它变成网页能识别的结构。
3. props —— 组件之间传递数据的通道
有时候我们需要在不同组件之间传值。例如，想让一个标题组件显示不同的名字。
示例：使用 props 传参
我们新增一个文件 src/components/HelloUser.js：
import React from 'react';
function HelloUser(props) {
return <h2>你好，{props.name}！</h2>;
}
export default HelloUser;
然后修改 App.js：
import React from 'react';
import HelloUser from './components/HelloUser';
function App() {
return (
<div>
<HelloUser name="张三" />
<HelloUser name="李四" />
</div>
);
}
export default App;
你会看到两行问候语，分别是“你好，张三！”和“你好，李四！”
实战项目：做个天气小应用
我们来做个小应用，展示一个天气提示信息，并加上按钮切换温度单位。
第一步：定义初始结构组件
新建两个组件：
WeatherDisplay.js：显示天气信息TemperatureSwitch.js：切换温度单位（℃ / ℉）
先写 WeatherDisplay.js：
import React from 'react';
function WeatherDisplay({ temperature, unit }) {
return (
<div style={{ padding: 20 }}>
<h2>当前天气</h2>
<p>温度：{temperature} {unit}</p>
</div>
);
}
export default WeatherDisplay;
再写 TemperatureSwitch.js：
import React from 'react';
function TemperatureSwitch({ isCelsius, onToggle }) {
return (
<button onClick={onToggle}>
切换单位（当前：{isCelsius ? '℃' : '℉'}）
</button>
);
}
export default TemperatureSwitch;
然后修改 App.js 把这两个组件整合起来：
import React, { useState } from 'react';
import WeatherDisplay from './components/WeatherDisplay';
import TemperatureSwitch from './components/TemperatureSwitch';
function App() {
const [isCelsius, setIsCelsius] = useState(true);
const temperature = isCelsius ? 22 : 72;
return (
<div>
<WeatherDisplay temperature={temperature} unit={isCelsius ? '℃' : '℉'} />
<TemperatureSwitch
isCelsius={isCelsius}
onToggle={() => setIsCelsius(!isCelsius)}
/>
</div>
);
}
export default App;
保存后刷新页面，你应该能看到一个天气提示框，点击按钮可以在 Celsius（摄氏度）和 Fahrenheit（华氏度）之间切换。
恭喜你完成了第一个完整的 React 应用！
常见问题解答：新手常问的几个坑
Q1：我写了 JSX，为什么浏览器不显示？
请检查：
- 是否保存了
.js或.jsx文件？ - 是否启动了服务（
npm start）？ - 浏览器有没有报错？可以用快捷键 F12 打开开发者工具看看控制台 Console 中的信息。
Q2：组件名为什么要大写开头？
因为在 React 中，以小写字母开头的组件会被当作 HTML 标签处理（如 div、span），而自定义组件必须以大写字母开头。
所以，请始终以 PascalCase（首字母大写）命名组件。
Q3：函数组件 VS 类组件？
初学者建议使用函数组件 + Hooks，它更简洁、更容易上手。
类组件虽然也能实现相同功能，但写法相对复杂，适合进阶学习阶段掌握。
学习建议：下一步你可以学什么？
学完本教程后，你已经掌握了 React 的三大件：组件、JSX、props。下面是你下一步可以深入的方向：
🧩 进阶知识点推荐
| 知识点 | 描述 |
|---|---|
| State（状态） | 让组件记住自己当前的状态 |
| useEffect | 处理副作用（如数据加载） |
| 路由（React Router） | 构建多页面网站（首页、详情页等） |
| 表单与事件 | 处理用户输入（比如登录表单） |
🔗 推荐学习资源
- ✅ React 官方中文文档
- ✅ React 教程中文社区版
- ✅ MDN Web Docs（学习 JS 和 HTML 基础非常好）
总结一下
今天我们一步步做了这些事：
- 搞清楚 React 是什么、用来做什么
- 搭好了开发环境，跑起了 React 项目
- 理解了组件、JSX、props 这三个核心概念
- 动手完成了第一个 React 小项目：天气切换应用
- 解答了新手常见的一些疑问
- 给出了后续学习路线图
别忘了动手多练习！前端开发最好的学习方式就是“边写边学”。
祝你早日成为 React 高手！🔥
如果你觉得这篇文章对你有帮助，欢迎关注并收藏，后续还会持续更新更多 React 相关的零基础教程！
评论 0