React入门教程：从安装到第一个应用
开篇：React是什么？能用来做什么？
你可能听说过网页开发、前端技术，甚至听过像“JavaScript”、“HTML”、“CSS”这样的关键词。那么React到底是什么呢？
React 是一个由 Facebook 开发并维护的 JavaScript 库，专门用于构建用户界面（也就是网页中用户看到和交互的部分）。你可以把它看作是一个“网页组件工厂”，可以快速、高效地创建复杂的交互式网页。
React 的最大特点就是：
- 组件化开发：把网页拆成一个个小块（组件），分别编写、调试，再组合在一起。
- 声明式编程：你告诉 React 想要什么状态，而不是一步步怎么改变页面，这样更容易理解和维护。
- 响应速度快：React 使用了一种叫“虚拟DOM”的机制，让页面更新更快。
一句话总结：React 是写网页的强大工具，适合现代网页开发。
环境准备：搭建你的第一个 React 开发环境
在正式开始写代码之前，我们需要先准备好开发环境。如果你是新手，不用担心，我们会一步步来。
1. 安装 Node.js 和 npm
Node.js 是一个运行 JavaScript 的平台，npm 是它的包管理器，我们后面会用它来安装 React 相关工具。
✅ 步骤：
- 打开 https://nodejs.org
- 下载 LTS 版本（推荐）
- 双击安装，一路下一步即可
- 安装完成后打开命令行（Windows 是 CMD 或 PowerShell；Mac 是 Terminal）输入：
如果显示版本号，说明安装成功！node -v npm -v
2. 创建你的第一个 React 应用
我们使用一个叫做 create-react-app 的脚手架工具来快速创建 React 项目。它帮你自动配置好所有需要的文件和工具，你不需要自己去折腾各种细节。
✅ 创建项目：
npx create-react-app my-first-react-app
这一步可能会花几分钟，请耐心等待。
✅ 进入项目目录并启动：
cd my-first-react-app
npm start
浏览器会自动打开，默认地址是 http://localhost:3000，你会看到 React 的默认欢迎页面：
恭喜你！你的第一个 React 应用已经跑起来了！
核心概念：什么是 React 的核心思想？
现在我们已经创建了一个 React 项目，接下来我们要了解它的核心概念。
1. 组件（Component）
组件是 React 的基本单位。就像搭积木一样，我们可以用多个组件拼出一个完整的页面。
举个例子，一个网页可以分成这几个组件：
- 顶部导航栏（Nav Component）
- 主体内容区域（Content Component）
- 侧边栏（Sidebar Component）
- 底部页脚（Footer Component）
✅ 示例代码：
新建一个组件很简单，只要写一个函数或者类，返回一段 HTML 结构即可。
// 文件名：HelloWorld.js
import React from 'react';
function HelloWorld() {
return (
<div>
<h1>你好，世界！</h1>
<p>这是我第一个 React 组件。</p>
</div>
);
}
export default HelloWorld;
然后，在主文件中使用它：
// 文件名：App.js
import React from 'react';
import HelloWorld from './HelloWorld';
function App() {
return (
<div className="App">
<HelloWorld />
</div>
);
}
export default App;
刷新页面后你应该能看到：“你好，世界！”。
📌 小提示：组件的名字一般以大写字母开头，方便 React 区分它是组件还是普通 HTML 标签。
2. JSX：一种看起来像 HTML 的语法
你可能注意到了上面的代码里有用 <div>、<h1> 这样的标签，但不是真正的 HTML，而是 React 中的 JSX。
JSX 是 JavaScript 的扩展语法，让你可以在 JS 中直接写类似 HTML 的结构。
✅ 例如：
const element = <h1>这是一个 JSX 元素</h1>;
虽然看起来像 HTML，但它其实是 JavaScript。
3. 数据绑定（Props 和 State）
React 中的数据可以分为两类：
- props：从父组件传递给子组件的“参数”
- state：组件内部的“状态”，可以变化
✅ Props 示例：
// 子组件
function Greeting(props) {
return <h1>你好，{props.name}</h1>;
}
// 父组件使用
<Greeting name="李明" />
输出结果：你好，李明
✅ State 示例：
使用 useState 钩子函数来创建状态：
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>你点击了 {count} 次</p>
<button onClick={() => setCount(count + 1)}>点我增加</button>
</div>
);
}
📌 小提示：每次 setCount 改变数值，React 会自动重新渲染组件。
实战项目：做一个简单的“待办事项列表”
我们通过一个简单的项目来巩固所学内容 —— 制作一个“待办事项列表”。
这个应用的功能包括：
- 输入新任务并添加
- 显示所有任务
- 删除某个任务
第一步：创建两个组件
我们将创建两个组件：
TodoInput：负责输入和添加新任务TodoList：负责展示所有任务
✅ TodoInput 组件：
// TodoInput.js
import React, { useState } from 'react';
function TodoInput({ onAdd }) {
const [text, setText] = useState('');
function handleAdd() {
if (text.trim() !== '') {
onAdd(text);
setText('');
}
}
return (
<div>
<input
type="text"
value={text}
onChange={(e) => setText(e.target.value)}
placeholder="请输入任务..."
/>
<button onClick={handleAdd}>添加</button>
</div>
);
}
export default TodoInput;
✅ TodoList 组件：
// TodoList.js
import React from 'react';
function TodoList({ todos, onDelete }) {
return (
<ul>
{todos.map((todo, index) => (
<li key={index}>
{todo}
<button onClick={() => onDelete(index)}>删除</button>
</li>
))}
</ul>
);
}
export default TodoList;
第二步：将组件组合起来
现在我们把这些组件放到 App.js 中整合：
// App.js
import React, { useState } from 'react';
import TodoInput from './TodoInput';
import TodoList from './TodoList';
function App() {
const [todos, setTodos] = useState([]);
function addTodo(text) {
setTodos([...todos, text]);
}
function deleteTodo(index) {
const newTodos = todos.filter((_, i) => i !== index);
setTodos(newTodos);
}
return (
<div className="App">
<h1>我的待办事项</h1>
<TodoInput onAdd={addTodo} />
<TodoList todos={todos} onDelete={deleteTodo} />
</div>
);
}
export default App;
成果展示：
- 输入框输入任务
- 点击添加，任务会出现在下方列表中
- 每条任务都有一个“删除”按钮
🎉 恭喜你完成了第一个功能完整的小型 React 应用！
常见问题解答：初学者常问的问题
Q1：React 是不是必须得懂 JavaScript 才能学？
答：是的，React 是基于 JavaScript 的，所以你需要掌握基础的 JavaScript 知识，比如变量、函数、数组等。建议先学习 JavaScript 基础再学 React。
Q2：React 和 Vue 哪个更好？
答：两者都是优秀的前端框架/库，React 更加成熟，社区庞大，就业需求高；Vue 上手更简单，适合中小型项目。选哪个都可以，关键是多练习。
Q3：为什么我的组件不更新？
答：在 React 中，不能直接修改 state（如：count = count + 1），要用 setState（或 useState 返回的 setter 函数）来更新状态，否则 React 不知道发生了变化，就不会重新渲染。
Q4：Key 属性的作用是什么？
答：在循环渲染列表时，React 需要一个唯一的 key 来识别每个元素，帮助它正确更新、插入或删除 DOM 节点。一般可以用索引 index，但在实际开发中最好有唯一 ID。
学习建议：下一步该学什么？
恭喜你已经完成了 React 的入门学习！接下来你可以考虑以下几条学习路径：
1. 深入理解 React 生态
- 学习 React Router：实现页面跳转
- 掌握 Redux / Context API：状态管理工具
- 研究 useEffect 钩子：处理副作用
2. 学习与后端交互
- 使用 axios 发送 HTTP 请求
- 学会如何与服务器通信（GET / POST）
3. UI 设计进阶
- 学习 CSS-in-JS 技术（如 styled-components）
- 使用 UI 框架（如 Material-UI、Ant Design）
4. 构建真实项目
尝试开发一些实用项目，比如：
- 天气查询 App
- 记账小工具
- 在线聊天室
结语
你已经完成了一个完整的 React 入门旅程！从安装环境到写一个功能齐全的待办事项应用，每一步你都亲手实践过，这就是最好的学习方式。
记住，学习编程就像学骑自行车，光看没用，一定要自己上去试！
继续加油，未来的 Web 开发高手就是你 🚀
评论 0