0
0
0

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

生产环境勿扰
2025-06-28 02:53
阅读 704

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

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

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

简单来说，React 是一个用来构建网页的工具。它是由 Facebook 团队开发并维护的开源框架（准确地说是一个 JavaScript 库），专门用来帮开发者快速创建用户交互界面（UI），比如你经常在网站上看到的按钮、表单、列表这些内容。

React 的目标是让开发前端页面变得更简单、更高效、更易于维护。你可以把它想象成“搭积木”的工具——每个部分都可以独立设计和修改，组合起来就能做出功能丰富的网页。

✅ React 能做啥？

  • 构建响应式的网页界面
  • 开发复杂的单页应用（如社交平台、管理后台）
  • 移动端也可以用 React（叫 React Native）
  • 搭配其他工具能做更强大的功能（比如数据请求、状态管理等）

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

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

如果你以前写过 HTML、CSS、JavaScript，那学 React 就更容易了。不过即使你是完全的新手，也别担心，我们一步步来！

步骤1：安装 Node.js 和 npm

React 项目通常需要使用 npm 来管理依赖包。而 npm 需要先安装 Node.js。

👉 前往官网下载 https://nodejs.org
选择 "LTS" 版本（稳定版）

安装完成后，在命令行中输入：

node -v
npm -v

如果显示出了版本号（如 v20.14.0），说明安装成功啦！

步骤2：使用 Vite 创建 React 项目（推荐方式）

现在最简单的做法是使用 Vite 工具来创建 React 项目。它比传统的 Create React App 更快、更轻量。

  1. 打开命令行工具（Windows 用 CMD 或 PowerShell，Mac 用终端）
  2. 输入下面的命令：
npm create vite@latest my-react-app --template react

这会创建一个名为 my-react-app 的文件夹，并在里面初始化一个 React + Vite 的项目。

  1. 进入项目目录并安装依赖：
cd my-react-app
npm install
  1. 启动本地服务器：
npm run dev

然后在浏览器中打开提示的网址（通常是 http://localhost:5173），你应该能看到 Vite 的欢迎页面。

步骤3：认识项目结构

进入你刚刚创建的 my-react-app 文件夹，你会看到这些主要文件：

my-react-app/
├── index.html        // 主页面文件
├── src/              // 所有 React 组件都放这里
│   ├── main.jsx      // 入口文件
│   └── App.jsx       // 默认组件文件
├── package.json      // 项目的配置信息和依赖包

我们现在只需要关心 src/App.jsx 和 src/main.jsx，这是我们写代码的地方。

三、React 核心概念讲解（通俗易懂）

三、React 核心概念讲解（通俗易懂）

接下来我们要介绍几个 React 的重要概念，但我会用最简单的语言来讲清楚。

1️⃣ 什么是组件（Component）？

在 React 中，一切皆组件。你可以把组件理解为一个个可重复使用的“小部件”或“模块”。

比如：

  • 一个按钮是一个组件
  • 一个登录表单是一个组件
  • 一个导航栏是一个组件

每个组件都可以包含自己的 HTML 结构、样式和行为（JS逻辑），它们可以互相嵌套、复用。

示例：一个简单的按钮组件

// src/components/MyButton.jsx

export default function MyButton() {
  return (
    <button>点我呀！</button>
  );
}

2️⃣ JSX 是什么？

你会发现我们在组件中写的不是纯 HTML，而是类似这样的代码：

return <button>点我呀！</button>;

这种语法叫做 JSX（JavaScript XML），它是 React 专有的扩展语法，让你可以在 JavaScript 中直接写 HTML 结构。看起来像 HTML，其实是 JS。

✅ 注意：

  • JSX 中可以写变量和表达式，例如 {user.name}
  • 标签必须闭合，如 <img /> 而不是 <img>

3️⃣ props 是什么？（组件之间的“传话筒”）

假设你想给按钮加文字，比如“保存”、“提交”……这时候就需要通过 props 来传递参数。

示例：带标题的按钮组件

// src/components/MyButton.jsx

export default function MyButton(props) {
  return (
    <button>{props.text}</button>
  );
}

使用这个按钮时，你就可以这样传值：

import MyButton from './MyButton';

function App() {
  return (
    <div>
      <MyButton text="保存" />
      <MyButton text="取消" />
    </div>
  );
}

这样两个按钮的文字不同，却用了同一个组件，是不是很灵活？

4️⃣ state 是什么？（组件内部的“记忆系统”）

有时你需要组件自己记住一些数据，比如按钮是否被点击过。这时候就要用到 state。

React 提供了一个 Hook 叫 useState，它可以帮你记住组件的状态。

示例：计数器按钮

import { useState } from 'react';

function CounterButton() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      点击次数：{count}
    </button>
  );
}

当你多次点击按钮时，数字就会自动递增啦！

四、实战项目：做一个 Todo List 待办事项列表

四、实战项目：做一个 Todo List 待办事项列表

现在我们来动手做一个完整的小项目 —— 待办事项列表（Todo List）。

这是我们最终想实现的效果：

  • 页面上有输入框和添加按钮
  • 输入后点击按钮，任务会被加到下方的列表里
  • 每个任务前有个复选框，勾选表示完成

第一步：创建组件结构

我们将创建以下几个组件：

  • App.jsx：主组件，负责整体布局
  • TodoInput.jsx：输入框+添加按钮
  • TodoList.jsx：展示任务列表
  • TodoItem.jsx：每一个任务条目

我们先在 src/components 文件夹中新建这些文件。

第二步：编写输入框组件

// src/components/TodoInput.jsx

export default function TodoInput({ onAdd }) {
  function handleSubmit(e) {
    e.preventDefault();
    const text = e.target.task.value;
    if (text.trim() !== '') {
      onAdd(text);
      e.target.reset(); // 清空输入框
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="task" placeholder="输入你的任务..." />
      <button type="submit">添加</button>
    </form>
  );
}

第三步：编写任务条目组件

// src/components/TodoItem.jsx

export default function TodoItem({ item, onToggle }) {
  return (
    <li>
      <input 
        type="checkbox" 
        checked={item.completed} 
        onChange={() => onToggle(item.id)} 
      />
      <span style={{ textDecoration: item.completed ? 'line-through' : 'none' }}>
        {item.text}
      </span>
    </li>
  );
}

第四步：编写任务列表组件

// src/components/TodoList.jsx

export default function TodoList({ items, onToggle }) {
  return (
    <ul>
      {items.map(item => (
        <TodoItem key={item.id} item={item} onToggle={onToggle} />
      ))}
    </ul>
  );
}

第五步：整合到 App.jsx

// src/App.jsx

import { useState } from 'react';
import TodoInput from './components/TodoInput';
import TodoList from './components/TodoList';

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

  function handleAdd(text) {
    const newTodo = {
      id: Date.now(),
      text: text,
      completed: false
    };
    setTodos([...todos, newTodo]);
  }

  function handleToggle(id) {
    setTodos(todos.map(todo =>
      todo.id === id ? { ...todo, completed: !todo.completed } : todo
    ));
  }

  return (
    <div>
      <h1>我的待办事项</h1>
      <TodoInput onAdd={handleAdd} />
      <TodoList items={todos} onToggle={handleToggle} />
    </div>
  );
}

第六步：运行效果查看

确保你已经启动了开发服务器：

npm run dev

打开浏览器，访问指定地址，你应该可以看到完整的 Todo List 功能啦！

五、常见问题解答

❓1. 我的组件不显示怎么办？

  • 检查是否正确导入组件，是否有拼写错误
  • 查看控制台有没有报错信息（Chrome 浏览器按 F12）
  • 确保组件被返回渲染了，如写在 return 里面

❓2. 出现 Warning: Each child in a list should have a unique “key” prop.

这是因为你在 map() 中渲染的元素没有写 key 属性，记得每个列表项加上唯一的 key，比如 id。

items.map(item => (
  <div key={item.id}>{item.text}</div>
))

❓3. 修改 state 不生效？

请不要直接修改 state：

❌ 错误写法：

todos[0].completed = true;

✅ 正确做法：

setTodos(todos.map(...));

因为 React 要通过 setState 才能检测状态变化并更新页面。

六、下一步学习建议

恭喜你完成了 React 的第一个项目！你已经掌握了以下技能：

  • 安装 React 开发环境
  • 使用 JSX 编写组件
  • 使用 state 和 props
  • 构建一个小项目

接下来你可以尝试以下几个方向继续学习：

🔹 学习更多核心知识：

  • React 生命周期方法（或 Function Component 中的 useEffect）
  • 表单处理与验证
  • 路由（React Router）
  • Redux / Context API 状态管理
  • TypeScript 支持（类型检查神器）

🔹 实战练习：

  • 记账 App
  • 博客系统
  • 天气查询 App

🔹 学习资源推荐：

结语

React 并不神秘，也不是只有大神才能学会的东西。只要你坚持练习、多写代码、多思考，就一定可以掌握它。

希望这篇教程能帮你顺利迈出第一步，加油，未来的 React 开发者 🚀！

🎉 文章完，总字数约：2600 字

标签:爬虫前端实战经验项目

评论 0

最热最新
暂无评论

为你推荐

暂无相关推荐
匿名用户Lv.1
0
影响力
0
文章
0
粉丝

相关推荐

暂无相关推荐

精选内容

暂无精选内容