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

温柔导师

2025-06-24 14:00

阅读 647

一、React 是什么？

你可能听说过“React”这个词，它听起来像是某种高科技产品。其实，React 是一个非常流行且强大的 前端 JavaScript 库，专门用来构建网页的用户界面（UI）。你可以把它看作是一个搭建网站“外表”的工具。

简单来说：

前端开发：指的是浏览器里看到的东西——比如按钮、导航栏、表单等。
React 的作用：帮助我们更高效地创建这些界面组件，并让它们之间能够方便地互相通信和更新内容。

React 由 Facebook 创建并维护，被广泛应用于大型项目（如 Instagram 和 Airbnb），也适合初学者使用。它的核心思想是把整个页面拆分成很多小的部分（称为“组件”），然后一个个来管理和编写。

🎯 本教程目标：
通过一步步的操作，你将学会：

如何在你的电脑上安装 React 开发环境
了解 React 的几个关键概念（比如组件、状态、props 等）
动手做出一个自己的 React 小项目
掌握一些常见问题的解决方法

准备好了吗？我们开始吧！

二、环境准备：搭建 React 开发环境

React 需要一些基础的开发工具来运行。别担心，这些工具都免费可用。我们会使用一种叫做 Vite + React 模板的方式来快速搭建一个 React 项目。这种方式速度快，配置少，非常适合新手。

🧰 所需工具清单：

Node.js（包含 npm）：JavaScript 运行环境
Vite：现代前端开发工具
VS Code：代码编辑器（推荐）

🔧 步骤一：安装 Node.js 和 npm

Node.js 是一个让 JavaScript 可以在电脑上运行的程序，npm 是它的包管理器（可以理解为 App Store）。

✅ 下载地址：https://nodejs.org
选择 LTS 版本（稳定版）

安装完成后，打开命令行工具（Windows 上是 cmd 或 PowerShell，Mac 上是 Terminal），输入以下命令检查是否安装成功：

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

如果出现了版本号（例如 v18.x.x），说明安装成功！

🧱 步骤二：用 Vite 创建 React 项目

Vite 是一个现代化的前端构建工具，速度快、配置少，非常适合做教学使用。

让我们使用 Vite 来创建一个新的 React 项目：

✅ 第一步：运行命令创建项目

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

my-react-app 是你项目的文件夹名称，可以改成你喜欢的名字。

执行完这个命令后，会问你两个问题：

? Do you want to proceed? (Y/n) → 按下 Y 回车
? Add TypeScript? (Y/n) → 输入 n 回车（暂时不使用 TypeScript）

等待一会儿，项目就创建完成啦！

✅ 第二步：进入项目目录并安装依赖

cd my-react-app
npm install

这一步是安装 React 相关的库和其他必要的插件。

✅ 第三步：启动本地服务器运行项目

npm run dev

稍等几秒钟，你会看到类似下面的提示：

VITE v3.0.9 ready in 2s
→ Local: http://localhost:5173/

现在打开浏览器，在地址栏中输入：http://localhost:5173/
你应该能看到一个默认的欢迎页面！

🎉 成功了！你现在拥有了一个 React 开发环境！

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

虽然你已经跑通了一个 React 项目，但还不知道它是怎么工作的对吧？下面我们来解释几个最核心的概念，每个都会配上简单的例子让你看得更明白。

1️⃣ 组件（Component）

在 React 中，一切都可以看作是“组件”。你可以把组件想象成积木块，每一个组件就是一块积木，我们可以拼起来组成整个页面。

比如一个“按钮组件”，就是一个带点击功能的按钮；一个“用户信息卡组件”，就可以展示用户名、头像等信息。

示例：写一个最简单的组件

打开你的项目中的 src/App.jsx 文件（或者你创建的文件名类似），你会看到里面已经有默认的内容。我们可以先清空内容，自己写一个组件试试。

// src/App.jsx
import React from 'react'

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

export default Greeting

然后修改 src/main.jsx 文件，让它显示这个新组件：

// src/main.jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)

保存后刷新浏览器，你会看到页面上多了一行标题：“Hello, React!”

🔍 知识点总结：

<h1> 是 HTML 标签，表示一级标题
function Greeting() 是一个函数式组件，返回 JSX 内容
export default 表示导出这个组件供其它文件引用

2️⃣ JSX（JavaScript XML）

你刚才看到的 <h1>Hello, React!</h1> 不是普通字符串，而是一种叫 JSX 的语法。它看起来像 HTML，但实际上是你写的 JavaScript 代码的一部分。

在 React 中，JSX 是书写 UI 的方式。我们可以像写 HTML 一样写它，甚至可以在其中插入变量。

示例：在 JSX 中显示变量

function Greeting() {
  const name = "Tom"
  return <h1>Hello, {name}!</h1>
}

刷新页面你会看到："Hello, Tom!"

📌 注意：花括号 {} 是你在 JSX 中嵌入 JavaScript 表达式的方式。

3️⃣ Props（属性）

在真实项目中，组件通常需要接收外部数据。这时候我们就需要用到 props（性质）。

举个例子：我们想做一个“打招呼”的组件，每次显示不同的名字。

示例：用 props 显示名字

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>
}

export default function App() {
  return (
    <div>
      <Greeting name="Alice" />
      <Greeting name="Bob" />
    </div>
  )
}

这样你就能在页面中看到：

Hello, Alice!
Hello, Bob!

📌 总结：

props 是父组件传递给子组件的数据
每个组件可以根据不同的 props 显示不同的内容

4️⃣ State（状态）

有些时候，我们需要组件自己记住一些信息。比如一个计数器按钮，点击一次数字加一。这个时候就要用到 state（状态）了。

React 提供了一个叫做 useState 的 Hook 函数来帮你记录状态。

示例：写一个计数器按钮

import React, { useState } from 'react'

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

  return (
    <div>
      <p>当前数字：{count}</p>
      <button onClick={() => setCount(count + 1)}>点击+1</button>
    </div>
  )
}

📌 解释一下：

useState(0) 表示初始值为 0 的状态值
setCount 是用于修改这个状态的方法
onClick 是点击事件处理函数

四、实战项目：制作一个 TodoList（待办事项列表）

光说不练假把式，我们来做一个简单的待办事项小程序，把前面学到的知识综合运用起来。

项目目标：

创建一个网页，可以：

添加新的待办事项
显示所有待办事项
删除某一项

第一步：创建基本结构

新建一个文件 TodoList.jsx，然后写入以下代码：

import React, { useState } from 'react'

export default function TodoList() {
  const [todos, setTodos] = useState([])
  const [input, setInput] = useState("")

  function handleAdd() {
    if (input.trim()) {
      setTodos([...todos, input])
      setInput("")
    }
  }

  function handleDelete(index) {
    const newTodos = todos.filter((_, i) => i !== index)
    setTodos(newTodos)
  }

  return (
    <div style={{ padding: '20px' }}>
      <h2>我的待办事项</h2>

      <input
        value={input}
        onChange={(e) => setInput(e.target.value)}
        placeholder="输入任务内容"
      />
      <button onClick={handleAdd}>添加</button>

      <ul>
        {todos.map((todo, index) => (
          <li key={index}>
            {todo}
            <button onClick={() => handleDelete(index)}>删除</button>
          </li>
        ))}
      </ul>
    </div>
  )
}

前端开发工具界面-1

然后在 App.jsx 中引入它：

import React from 'react'
import TodoList from './TodoList'

export default function App() {
  return (
    <div>
      <TodoList />
    </div>
  )
}

保存之后，刷新浏览器，你应该看到一个可以添加和删除的任务列表！

项目解析：

我们用了 useState 来管理待办事项列表 (todos) 和输入框的值 (input)
点击“添加”按钮时，我们将输入内容加入到 todos 数组中
使用 map 遍历数组生成列表项
点击“删除”时，通过 filter 方法过滤掉指定索引的事项

🎉 恭喜你完成人生第一个 React 项目！

五、新手常见问题解答

刚开始学习 React，总会遇到一些困惑的地方。下面是几个常见的问题和解决办法。

❓ Q1：我点击了按钮但没有任何反应怎么办？

可能原因1：事件没有正确绑定函数，比如忘了写 () 或者错误地加了参数。
解决方法：检查 onClick={函数名} 是否拼写正确，是否有报错。

❓ Q2：为什么我的状态值没变化？

可能原因1：直接修改 state（如 state.push(...)），而不是使用 setState
解决方法：永远不要直接修改状态，要用 setState 来更新

✅ 正确：

setCount(count + 1)

❌ 错误：

count += 1

❓ Q3：如何查看控制台错误信息？

在浏览器中按 F12（开发者工具）或右键点击网页选择“检查”
切换到 “Console” 标签页，看看有没有红色报错

❓ Q4：我应该先学原生 JS 还是直接学 React？

如果你是刚接触编程的新手，建议先学一点 HTML、CSS、JS 基础
但是只要掌握了基础的变量、函数、对象和数组，你就可以尝试 React

六、下一步学习建议

响应式布局概念图-2

恭喜你完成了《React 入门教程》！接下来你可以沿着以下几个方向继续深入学习：

📚 官方文档：

React 官网：https://react.dev
React Hooks 文档：https://react.dev/reference/react/hooks

📦 深入学习模块：

表单处理 & 受控组件
条件渲染和循环
React Router（页面跳转）
Redux / Context API（状态管理）
组件通信与生命周期

🎯 项目推荐练习：

天气查询应用
微博评论区
番茄钟计时器
个人博客系统

总结

本篇教程带领你从零开始搭建 React 环境，介绍了核心概念，并亲手实现了一个 TodoList 项目。希望你能通过这篇教程建立起信心，并愿意继续探索 React 的世界。

👉 记住一句话：任何复杂的 React 项目，都是由最基础的小组件一步步搭起来的。

祝你在学习 React 的道路上越走越远，成为一名优秀的前端开发者！

如有疑问，欢迎随时留言交流 😊

标签:代码人生ReactGo

最热最新

暂无评论

为你推荐

暂无相关推荐