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

王桂英

2025-06-14 15:53

阅读 497

一、React是什么？它能用来做什么？

在开始学习之前，我们先来了解一下什么是 React。

✅ 用最简单的语言来说：

React 是一个由 Facebook 开发的 JavaScript 库（工具），专门用来帮助程序员更轻松地构建交互式的网页界面。

你可以把它想象成“拼乐高的积木”，每一个小块就是页面的一部分。你只需要把这些小块组合起来，就能搭出一个漂亮的网页。

🧩 它适合开发哪些类型的应用？

网站的前端部分（也就是用户能看到和操作的那一部分）
交互性很强的网站，比如社交媒体、购物平台、在线编辑器等
单页应用（SPA），即整个网站只有一个“页面”，但可以通过点击切换内容，加载更快

简单地说：如果你想做一个现代、漂亮又响应快的网页，React 是个非常好的选择！

二、环境准备：搭建你的第一个React开发环境

在写代码之前，我们需要准备好电脑上的开发环境。不用担心，我们不打算自己从头搭一个复杂的系统。而是使用 Facebook 官方推荐的工具：Create React App（简称 CRA）

Create React App 就像是一套已经帮你装好了所有东西的“编程套装包”，你可以直接开始写代码，不用自己去配置各种复杂的东西。

💻 环境要求：

安装了 Node.js 和 npm（Node.js 的包管理工具）
基本的文本编辑器，比如 VS Code（免费且功能强大）

步骤1：安装 Node.js 和 npm

打开浏览器访问官网：https://nodejs.org/
下载并安装 LTS 版本（长期支持版本）
安装完成后，在命令行中输入以下命令查看是否安装成功：

node -v   # 显示版本号说明 Node.js 安装成功
npm -v    # 显示版本号说明 npm 安装成功

步骤2：使用 Create React App 创建项目

打开命令行工具（Windows 是 CMD 或 PowerShell，Mac 是 Terminal），输入以下命令：

npx create-react-app my-first-app

解释一下这句命令：

npx 是一个运行 npm 包的小工具
create-react-app 是创建 React 项目的命令
my-first-app 是你的项目名，可以换成你喜欢的名字

等待几分钟后，项目就建好了！

步骤3：启动开发服务器

进入项目文件夹，并启动本地服务器：

cd my-first-app
npm start

这时候你会看到一个浏览器自动打开，显示默认的 React 页面，你应该会看到一个旋转的 React 徽标。

🎉 到这里，环境已经全部搭建完成，你可以开始写自己的 React 程序啦！

三、React的核心概念：通俗讲解关键知识点

React 有一些核心概念，虽然听起来专业，但我们一起来看它们究竟是什么。

1️⃣ 组件（Component）

📌 是什么？

组件是 React 的基本单位，就像网页的积木一样。你可以把每个模块单独做成一个组件，然后拼起来。

💡 比如：

导航栏是一个组件
登录按钮是一个组件
新闻卡片是一个组件

📄 示例代码：

function Hello() {
  return <h1>Hello, React!</h1>;
}

这段代码定义了一个叫 Hello 的组件，返回一句话：“Hello, React!”。

2️⃣ JSX语法

📌 是什么？

JSX 是一种可以在 JS 中写 HTML 标签的语法。它是 React 的特色之一。

🔁 不要担心，不是真的HTML！只是长得像而已。

📄 示例代码：

const element = <p>这是一个段落</p>;

看起来是不是很像 HTML？但在 React 里这是 JSX。

3️⃣ props（属性）

📌 是什么？

props 类似于函数参数，让你可以把数据从父组件传给子组件。

📦 类比快递包裹：爸爸把礼物包装好传给小朋友。

📄 示例代码：

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

// 使用方式
<Greeting 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)}>点我加1</button>
    </div>
  );
}

这个组件可以每次点击按钮让数字加1，界面也会实时刷新！

四、实战项目：做一个简单的待办事项列表（To-Do List）

现在，我们来动手做一个小项目：待办事项列表，它可以添加任务、删除任务、标记完成。

我们将一步步来实现。

第一步：创建组件结构

我们要创建如下三个组件：

App：总控组件，包含其他组件
TodoForm：添加任务的表单
TodoList：任务列表
TodoItem：单个任务项

第二步：编写 TodoForm 组件

新建一个文件 components/TodoForm.js，输入以下内容：

function TodoForm({ addTodo }) {
  const [value, setValue] = useState('');

  function handleSubmit(e) {
    e.preventDefault();
    if (value.trim()) {
      addTodo(value);
      setValue('');
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        value={value}
        onChange={e => setValue(e.target.value)}
        placeholder="输入新任务"
      />
      <button type="submit">添加</button>
    </form>
  );
}

用户交互流程图-1

第三步：编写 TodoItem 组件

新建 components/TodoItem.js：

function TodoItem({ text, remove }) {
  return (
    <li>
      {text}
      <button onClick={remove}>删除</button>
    </li>
  );
}

第四步：编写 TodoList 组件

新建 components/TodoList.js：

function TodoList({ todos, deleteTodo }) {
  return (
    <ul>
      {todos.map((todo, index) => (
        <TodoItem key={index} text={todo} remove={() => deleteTodo(index)} />
      ))}
    </ul>
  );
}

第五步：整合到 App.js

修改 App.js 文件，引入上面这些组件：

import React, { useState } from 'react';
import TodoForm from './components/TodoForm';
import TodoList from './components/TodoList';

function App() {
  const [todos, setTodos] = useState([]);

  function addTodo(text) {
    setTodos([...todos, text]);
  }

  function deleteTodo(index) {
    const newTodos = [...todos];
    newTodos.splice(index, 1);
    setTodos(newTodos);
  }

  return (
    <div style={{ padding: 20 }}>
      <h1>我的待办清单</h1>
      <TodoForm addTodo={addTodo} />
      <TodoList todos={todos} deleteTodo={deleteTodo} />
    </div>
  );
}

export default App;

成果预览：

当你运行 npm start 并打开浏览器，就可以：

输入任务名称
点击“添加”按钮新增任务
删除某一项任务

✅ 一个完整的互动型 React 应用就这样完成了！

五、常见问题解答（FAQ）

❓1. React 是不是必须用 JSX？能直接写 HTML 吗？

不能直接写 HTML，React 使用的是 JSX。不过，它的写法和 HTML 非常像，所以你学会了就能上手。

❓2. 我学过 HTML/CSS/JavaScript，能不能直接跳过基础？

如果你已经掌握了基础，那恭喜你！React 是基于 JavaScript 的框架，有了基础会让你学得更快。你可以重点放在 React 本身的特性和实践上。

❓3. React 和 Vue、Angular 有什么不同？

React 是一个库，Vue 和 Angular 更偏向于完整框架。React 更灵活自由，也更容易上手。很多公司和开发者都选择 React 来构建现代 Web 应用。

❓4. React 怎么部署上线？

React 默认使用 npm run build 命令生成打包好的静态资源，你可以上传到任何静态托管服务，例如 GitHub Pages、Vercel、Netlify、阿里云 OSS 等。

❓5. 为什么有时候组件不更新？

可能是没有使用 React 的 useState 更新状态的方法导致界面没反应。记得更新数据一定要通过 React 提供的状态管理方法。

六、下一步学习建议

学会了 React 基础之后，你还可以继续学习以下进阶主题：

📚 推荐的学习路径：

学习阶段	推荐内容
初级巩固	状态管理（useState）、生命周期（useEffect）
进阶提升	路由（React Router）、CSS 模块化、Axios 数据请求
高级技能	Redux/MobX 状态管理、性能优化、与后端对接（REST API / GraphQL）
实战项目	构建完整的博客系统、商城系统、聊天室等

也可以尝试一些线上课程或文档：

结语：开启你的 React 编程之旅吧！

React 不只是一个工具，它代表了一种新的思维方式——组件化开发。它将复杂的 UI 分解成可复用的小模块，让开发更高效、代码更容易维护。

这篇文章带你从零开始，搭建了开发环境，了解了核心概念，还亲手完成了一个实用小项目。希望你已经感受到 React 的魅力！

继续加油，前端的世界等着你探索更多精彩！🚀

本文共约 2901 字，阅读时间预计 8～10 分钟。

标签:React实战经验

最热最新

暂无评论

为你推荐

暂无相关推荐

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

一、React是什么？它能用来做什么？

✅ 用最简单的语言来说：

🧩 它适合开发哪些类型的应用？

二、环境准备：搭建你的第一个React开发环境

💻 环境要求：

步骤1：安装 Node.js 和 npm

步骤2：使用 Create React App 创建项目

步骤3：启动开发服务器

三、React的核心概念：通俗讲解关键知识点

1️⃣ 组件（Component）

📌 是什么？

💡 比如：

📄 示例代码：

2️⃣ JSX语法

📌 是什么？

🔁 不要担心，不是真的HTML！只是长得像而已。

📄 示例代码：

3️⃣ props（属性）

📌 是什么？

📦 类比快递包裹：爸爸把礼物包装好传给小朋友。

📄 示例代码：

4️⃣ state（状态）

📌 是什么？

⚙️ 可以理解为组件的“记忆能力”。

📄 示例代码：

四、实战项目：做一个简单的待办事项列表（To-Do List）

第一步：创建组件结构

第二步：编写 TodoForm 组件

第三步：编写 TodoItem 组件

第四步：编写 TodoList 组件

第五步：整合到 App.js

成果预览：

五、常见问题解答（FAQ）

❓1. React 是不是必须用 JSX？能直接写 HTML 吗？

❓2. 我学过 HTML/CSS/JavaScript，能不能直接跳过基础？

❓3. React 和 Vue、Angular 有什么不同？

❓4. React 怎么部署上线？

❓5. 为什么有时候组件不更新？

六、下一步学习建议

📚 推荐的学习路径：

结语：开启你的 React 编程之旅吧！

评论 0

为你推荐

相关推荐

精选内容