React入门教程：从安装到第一个应用
开篇：React是什么？
你可能听说过“React”这个词，它是一个很流行的前端开发工具。那React到底是干什么的呢？简单来说，React 是由Facebook推出的一个用于构建用户界面（也就是网页上你能看到和操作的部分）的 JavaScript 库。
你可以把 React 想象成一个帮你快速搭建网页界面的积木套装。它最大的特点是“组件化”，也就是说我们可以把整个网页分成一个个小块来开发，就像搭积木一样，一块一块地拼起来。这样写出来的代码更容易理解和维护，也更适合团队合作。
使用 React，你可以做出动态交互的网站，比如社交网络、电商平台，甚至是企业内部系统等等。
在本篇教程中，我们将从头开始，一步一步搭建环境，理解核心概念，并完成一个简单的React应用。即使你没有任何编程经验，也能轻松上手！
环境准备：一步步搭建React开发环境
第一步：安装 Node.js 和 npm
React 项目通常依赖于 Node.js 和它的包管理器 npm。这两个工具不是 React 自带的，所以我们需要先安装它们。
- 打开浏览器，访问 https://nodejs.org
- 点击下载“LTS”版本（稳定版本）
- 安装过程中一路点击“下一步”即可
- 安装完成后，在命令行（Windows是CMD或PowerShell，Mac是Terminal）输入以下命令查看是否安装成功：
node -v
npm -v
如果出现类似 v18.x.x 的版本号，说明安装成功。
第二步：创建第一个React项目
我们使用 Facebook 提供的工具 create-react-app 来创建 React 项目。这个工具会自动配置好所有必要的开发环境，非常适合初学者。
- 在命令行输入以下命令来安装
create-react-app：
npx create-react-app my-first-app
注意：这里的
my-first-app是你项目的文件夹名称，可以改成你喜欢的名字，比如react-demo。
- 安装完成后进入项目目录：
cd my-first-app
- 启动开发服务器：
npm start
几秒钟后，浏览器会自动打开一个页面，显示React默认的欢迎界面：
🎉 Welcome to React!
你现在就可以看到你的第一个React应用运行起来了！接下来我们会慢慢了解它是怎么工作的。
小贴士：关于目录结构
进入你的项目文件夹后，你会看到几个主要的文件和文件夹：
public/：放一些静态资源（如HTML文件、图标等）src/：这是你的代码所在的位置，非常重要package.json：存放项目信息和依赖项README.md：说明文档
我们现在重点来看 src/index.js 和 src/App.js 这两个文件，因为它们是我们写代码的主要地方。
核心概念：用最简单的方式理解React
为了帮助你更好地理解React的工作方式，我们来介绍一下几个最基础的概念：
1. 组件 (Component)
React 中最重要的思想就是“组件”。你可以把一个页面拆成多个小模块，每一个模块就是一个组件。
举个例子：如果你在做一个博客网站，你可能会有一个“标题栏”组件、一个“文章列表”组件，还有一个“评论框”组件。
React 组件就像是积木，你可以组合它们来构建整个网页。
// App.js
function App() {
return (
<div>
<h1>你好，React！</h1>
<p>这是我的第一个组件</p>
</div>
);
}
export default App;
上面这段代码定义了一个叫 App 的组件，返回了一段 HTML 结构（技术上叫 JSX）。这就是React组件的样子。
2. JSX：像HTML一样的语法
你可能注意到了，我们在写组件时用了 <div>、<h1> 这样的标签，这看起来像是 HTML，其实这是 React 使用的一种扩展语法 —— JSX。
JSX 允许你在 JavaScript 中直接写类似 HTML 的结构，这样写组件就更直观了。
例如：
<p>这是一个段落</p>
虽然它看起来像HTML，但本质上还是JavaScript。React最后会将这些结构转换成实际的DOM元素显示在网页上。
3. 状态 (State) 和 props
状态（State）和props（属性）是让组件“动”起来的关键。
Props（传递数据）
你可以把 props 想象成组件之间通信的“信件”。父组件可以把数据通过 props 传给子组件。
例如：
// ParentComponent.js
function ParentComponent() {
return <ChildComponent name="张三" />
}
function ChildComponent(props) {
return <p>欢迎你，{props.name}</p>
}
结果就是显示：欢迎你，张三
State（组件自身的状态）
State 是组件自己控制的数据。当state改变时，React会自动更新页面。
比如我们可以做一个按钮，点击一下数字加一：
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>你点击了 {count} 次</p>
<button onClick={() => setCount(count + 1)}>点击我</button>
</div>
)
}
export default Counter;
这里我们用了 React 提供的 useState 函数来声明一个状态变量 count，并用 setCount 来修改它。每当我们点击按钮，count 就会加1，并且页面也会自动更新。
4. 生命周期（简要介绍）
生命周期是指一个组件从出生（挂载）到消失（卸载）的过程。在这个过程中，我们可以执行一些特定的操作，比如加载数据、清理资源等。
目前你只需要知道一个钩子函数：
useEffect(() => {
console.log("组件加载完成");
}, []);
useEffect 是 React 提供的一个 Hook 函数，常用来处理副作用（比如请求数据、设置定时器等）。这个内容后续还会深入讲解。
实战项目：跟着做第一个React应用 —— 待办事项清单
现在我们来动手写一个简单的React应用：待办事项清单。它可以添加任务，显示任务，并删除已完成的任务。
第一步：创建项目结构
确保你已经按照前面的方法创建好了项目。我们现在要修改 App.js 文件，来实现功能。
// App.js
import React, { useState } from 'react';
import './App.css'; // 默认样式文件
function App() {
const [tasks, setTasks] = useState([]); // 存储所有任务
const [inputValue, setInputValue] = useState(""); // 输入框内容
// 添加任务
const addTask = () => {
if(inputValue.trim()) {
setTasks([...tasks, inputValue]);
setInputValue("");
}
};
// 删除任务
const deleteTask = (index) => {
const newTasks = tasks.filter((task, i) => i !== index);
setTasks(newTasks);
}
return (
<div className="App">
<h1>我的待办事项</h1>
{/* 输入框和按钮 */}
<div>
<input
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
placeholder="输入新任务..."
/>
<button onClick={addTask}>添加</button>
</div>
{/* 显示任务列表 */}
<ul>
{tasks.map((task, index) => (
<li key={index}>
{task}
<button onClick={() => deleteTask(index)}>删除</button>
</li>
))}
</ul>
</div>
);
}
export default App;
第二步：美化一下界面（可选）
你可以在 App.css 文件中添加一些基本样式让页面更好看：
.App {
max-width: 500px;
margin: 50px auto;
padding: 20px;
border: 1px solid #ddd;
border-radius: 8px;
font-family: sans-serif;
}
input {
padding: 10px;
width: 70%;
margin-right: 10px;
}
button {
padding: 10px;
}
ul {
list-style: none;
padding-left: 0;
}
li {
margin-top: 10px;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #f9f9f9;
padding: 10px;
border-radius: 4px;
}
li button {
color: red;
}
第三步：测试你的应用
保存文件后，如果你之前运行过 npm start，应该能直接在浏览器里看到效果：
- 在输入框中输入任务内容
- 点击“添加”按钮，任务会出现在下方列表中
- 点击“删除”按钮，该任务会被移除
恭喜你完成了第一个完整的React应用！
常见问题解答
以下是很多新手学习React时常见的问题，看看有没有你也遇到的困惑吧：
问题1：为什么React要用JSX？
答：JSX 是为了让开发者更容易编写 UI 组件。你可以把它理解为一种“混合语言”，把 HTML 和 JS 写在一起。它最终会被编译成标准的JavaScript，这样浏览器才能认识。
问题2：组件必须以大写字母开头吗？
答：是的。在React中，组件名必须以大写字母开头，否则会被当作普通 HTML 标签（如 div、span）处理。
正确写法：<MyComponent />
错误写法：<mycomponent />
问题3：我写的组件没有显示出来怎么办？
答：检查以下几点：
- 是否在
App.js中调用了这个组件 - 是否导出并导入正确（特别是多文件的情况下）
- 浏览器控制台是否有报错信息
问题4：什么是“Hooks”？为什么要学它？
答：Hooks 是 React 16.8 版本之后引入的新特性，让你可以在不写类组件的情况下使用状态和其他 React 功能。最常见的 Hooks 包括 useState 和 useEffect，它们让函数组件具备更多的能力。
问题5：React是不是比原生HTML/CSS/JS难很多？
答：一开始会觉得复杂，因为它涉及很多新概念。但一旦熟悉了React的开发模式，你会发现它反而更高效，逻辑更清晰，特别是在开发大型项目时优势明显。
下一步学习建议：继续深入React世界
恭喜你完成了React的第一个学习阶段！现在你知道了如何搭建环境、写了第一个组件、了解了核心概念，并做出了一个实用的小应用。
下一步你可以尝试学习以下内容：
✅ 推荐学习路径
| 阶段 | 学习内容 | 目标 |
|---|---|---|
| 初级 | 组件通信、表单处理、条件渲染 | 能独立完成小型交互式页面 |
| 中级 | React Router、Axios请求、Redux状态管理 | 构建完整SPA应用，连接后台API |
| 高级 | TypeScript + React、性能优化、单元测试 | 开发高质量、可维护的企业级应用 |
📚 推荐资源
- 官方文档：React官方文档（中文）
- 练习平台：CodeSandbox、LeetCode、Frontend Mentor
- 视频课程：B站、慕课网、Udemy 上的React课程
- 书籍推荐：《React入门实战（第2版）》、《React设计模式与最佳实践》
💡 温馨提示
学习任何新技术都会遇到困难，React也不例外。不要害怕犯错，也不必追求一次掌握全部内容。只要坚持每天进步一点点，很快你就能写出复杂的React应用啦！
希望这篇教程能帮助你顺利迈入React的世界。如果你有任何疑问，欢迎留言交流。祝你学习愉快，早日成为优秀的前端开发者！🌟
评论 0