React入门教程：从安装到第一个应用

开篇：React是什么，能用来做什么？

React 是一个由 Facebook 推出的 JavaScript 库，用于构建用户界面。你可以把它想象成一套帮你快速搭建网页的“乐高积木”。你不需要从头开始画按钮、输入框、菜单，而是用 React 提供的一些“组件”来拼接你的网页。

它特别适合开发单页应用（SPA），比如我们常用的微信小程序、知乎、微博等现代网页应用。React 让开发者更高效地管理页面内容、响应用户操作，并且更容易维护和扩展项目。

对于初学者来说，学习 React 的最大优势是它的 组件化设计思想 和 活跃的社区支持，这意味着你可以边学边做，而且遇到问题能找到很多现成的答案。

---

环境准备：搭建开发环境

要开始使用 React，我们需要先准备好开发工具。整个过程非常简单，跟着下面一步步做即可。

第一步：安装 Node.js 和 npm

• Node.js 是运行 JavaScript 的环境。
• npm（Node Package Manager） 是用来下载和管理 JavaScript 工具包的工具。

操作步骤：

1. 打开官网 https://nodejs.org
2. 下载并安装 LTS 版本（推荐新手使用）
3. 安装完成后，打开终端或命令行，输入以下命令检查是否安装成功：

node -v  # 查看 Node.js 版本
npm -v   # 查看 npm 版本

如果显示了版本号，说明安装成功！

---

第二步：创建 React 应用

我们可以使用一个叫做 Vite 的工具来快速搭建一个 React 项目。Vite 是目前最主流的现代化前端构建工具之一。

使用 Vite 创建 React 项目：

1. 打开终端，执行以下命令：

npm create vite@latest my-react-app --template react

解释一下这段命令：

• npm create vite@latest 表示使用最新版的 Vite 来创建项目；
• my-react-app 是你要创建的项目名称；
• --template react 指定使用 React 模板。

2. 等待安装完成后，进入项目目录并安装依赖：

cd my-react-app
npm install

3. 启动本地开发服务器：

npm run dev

这时候浏览器会自动打开一个新的页面，显示 "Hello Vite + React" 这样的文字，代表你的第一个 React 项目已经跑起来了！

---

核心概念：React 的几个关键点

接下来我们介绍几个 React 中的核心概念，这些概念是理解 React 的基础。

1. 组件（Component）

在 React 中，一切皆组件。组件就像是一个个可重用的小模块，比如一个按钮、一个输入框、一段提示信息，都可以写成一个组件。

例子：一个简单的 Hello 组件

function Hello() {
  return <h1>你好，React！</h1>;
}

然后在入口文件 main.jsx 或 App.jsx 中调用它：

import ReactDOM from 'react-dom/client';
import Hello from './Hello';

ReactDOM.createRoot(document.getElementById('root')).render(<Hello />);

🧠 小提示：<Hello /> 这种语法叫做 JSX，它是 JavaScript 的一种扩展语法，让你可以像写 HTML 一样写 React 组件。

---

2. JSX：让 HTML 和 JS 结合的语法糖

JSX 允许你在 JavaScript 文件中直接写 HTML 标签风格的代码。虽然看起来像是 HTML，但它其实是 JavaScript 的一部分。

例：在组件中返回 HTML 内容

function Greeting() {
  return (
    <div>
      <p>欢迎来到 React 教程</p>
      <button>点击我</button>
    </div>
  );
}

⚠️ 注意：每个组件只能返回一个根元素（如 <div>），不能并列多个顶级标签。

---

3. Props：传递数据给组件

组件之间可以互相传递数据，这种数据叫做 props（属性），就像函数的参数一样。

例：向组件传递名字

function UserCard(props) {
  return <h2>你好，{props.name}</h2>;
}

然后在父组件中这样调用它：

<UserCard name="小明" />

渲染结果就是：你好，小明

---

4. State：组件内部的状态管理

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 是 React 提供的一个 Hook 函数，用来定义状态变量；
• 当点击按钮时，setCount 会更新状态，并自动重新渲染组件。

---

实战项目：做一个简易任务列表

现在我们来做一个实战小项目——任务清单（Todo List）。这不仅能练习前面的知识，也能体验 React 做动态交互的方便性。

步骤一：搭建结构

首先，在 App.jsx 中写一个基本框架：

export default function App() {
  return (
    <div>
      <h2>我的任务清单</h2>
      <input type="text" placeholder="输入新任务..." />
      <button>添加</button>
      <ul>
        <li>示例任务</li>
      </ul>
    </div>
  );
}

刷新页面后，你会看到一个带输入框的任务列表界面。

---

步骤二：添加任务功能

我们想要实现的功能是：

1. 用户输入内容后，点击“添加”按钮，任务出现在列表中；
2. 输入框清空。

我们来引入 state 并绑定事件：

import { useState } from 'react';

export default function App() {
  const [tasks, setTasks] = useState(['示例任务']);
  const [inputValue, setInputValue] = useState('');

  const addTask = () => {
    if (inputValue.trim()) {
      setTasks([...tasks, inputValue]);
      setInputValue('');
    }
  };

  return (
    <div>
      <h2>我的任务清单</h2>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        placeholder="输入新任务..."
      />
      <button onClick={addTask}>添加</button>
      <ul>
        {tasks.map((task, index) => (
          <li key={index}>{task}</li>
        ))}
      </ul>
    </div>
  );
}

解释一下：

• tasks 是任务数组，初始值里有个“示例任务”；
• inputValue 是输入框的内容；
• onChange 监听输入框的变化；
• map() 方法遍历数组，把每个任务生成一个 <li>；
• key 是 React 要求的唯一标识符，防止出错。

刷新页面试试吧！输入内容，点击“添加”按钮，就能看到任务加进列表里啦！

---

常见问题解答：新手容易遇到的问题

1. ❓React 和 Vue、Angular 有什么区别？

它们都是前端框架/库，用来帮助我们开发网页。React 最大的特点是灵活、生态丰富、社区庞大，是学习前端的首选技术之一。

2. ❓写 React 必须用 JSX 吗？

不是必须的，但 JSX 是最方便的方式。它让 HTML 和 JS 更容易结合在一起。

3. ❓如何调试 React 程序？

可以在浏览器安装 React Developer Tools 插件，它可以帮助你查看组件结构、props 和 state。

插件地址：

• Chrome: https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofisikimnpfhogeajmgeibd
• Firefox: https://addons.mozilla.org/firefox/addon/react-devtools/

4. ❓项目启动失败怎么办？

常见原因包括网络问题导致依赖没下全、Node.js 或 npm 版本过低。可以尝试删除 node_modules 并重新执行：

rm -rf node_modules
npm install
npm run dev

---

学习建议：下一步该学什么？

学完这个教程，你已经可以自己写出一个小的 React 应用了！下一步你可以继续深入以下几个方向：

✅ 推荐继续学习的内容：

主题	简介
React Router	实现多页面跳转，打造完整的 SPA
React Hooks	如何使用 useEffect、useReducer 等高级功能
状态管理	Redux / Zustand / Context API
构建与部署	如何打包项目上线
TypeScript 集成	用更安全、智能的方式开发 React

📚 学习资源推荐：

• 官方文档（中文版）：https://zh-hans.reactjs.org
• Vite 文档：https://cn.vitejs.dev/guide/
• React 教程视频（B站搜索“React 入门”）
• GitHub 示例项目：搜索 “react-todo-list”、“react-counter”

---

总结

通过本文，我们完成了如下目标：

• 了解了 React 是什么，以及它解决了哪些问题；
• 搭建了自己的 React 开发环境；
• 学习了组件、JSX、props、state 等核心概念；
• 动手完成了一个简单的任务列表应用；
• 解决了一些新手常见的疑问；
• 了解了后续的学习路径。

如果你之前没有任何编程经验，现在你已经跨入了 React 的大门！继续保持动手实践的习惯，相信很快你就能独立开发出属于你自己的 React 应用了。

加油，未来的前端工程师！🚀