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

王桂英

2025-06-16 14:22

阅读 593

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

在现代网页开发中，React 是一个非常流行且强大的工具。如果你是前端开发的初学者，可能会听到很多人谈论React，但又不太清楚它到底是什么、有什么用。

简单来说，React 是由 Facebook（现 Meta）开发的一个 JavaScript 库，专门用于构建用户界面（特别是网站的交互部分）。你可以把它想象成一个“乐高积木”工具包，允许你把复杂的页面拆分成一个个小模块，然后轻松地组合起来。这样不仅让开发更高效，也更容易维护和修改。

React 最大的特点就是它的 组件化开发 和高效的 虚拟DOM机制，这意味着你只需要关心数据的变化，React会自动帮你更新屏幕上的内容。因此，很多公司如Facebook、Netflix、Airbnb等都在使用React来构建他们的网站或移动应用。

本篇文章的目标是帮助你从零开始掌握React的基础知识，并完成你的第一个React小项目。即使你对前端一无所知，也不用担心！我们将一步步带你搭建环境、理解概念，并动手写代码。

环境准备：如何搭建React开发环境？

要开始编写React程序，我们需要先准备好开发环境。别担心，这并不复杂，我们一步一步来做。

第一步：安装 Node.js 和 npm

Node.js 是一个基于JavaScript的运行环境，npm 是 Node.js 的一个包管理器，我们可以用它来下载和安装各种库（包括React）。

如何安装：

打开浏览器，访问 https://nodejs.org/
下载适合你系统的版本（建议选 LTS 长期支持版）
双击安装即可（一路默认下一步）

安装完成后，按下 Windows + R 键，输入 cmd 并回车，在命令行中输入以下命令来确认是否安装成功：

node -v
npm -v

如果看到类似下面的输出（版本号可能不同），说明安装成功：

v18.16.0
9.5.1

第二步：安装 Vite + 创建React项目（最简单的创建方式）

现在我们要创建一个React项目。过去常用的是 create-react-app 工具，但现在推荐使用更轻更快的 Vite。

使用 Vite 创建 React 项目：

打开终端（macOS/Linux）或者 cmd/PowerShell（Windows）
输入以下命令创建项目（例如项目名为 my-app）：

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

等待几秒钟后，项目就创建好了。

进入项目文件夹并安装依赖：

cd my-app
npm install

启动开发服务器：

npm run dev

此时你应该能看到一条提示信息，比如：

Local: http://localhost:5173/

打开浏览器访问这个链接，就能看到初始的React页面了！

核心概念：React中最重要的三个术语

在正式开始写代码之前，让我们先了解一些 React 中最基本也是最关键的概念。这些术语听起来可能有些陌生，但我们尽量用通俗的语言来解释它们。

1. 组件（Component）

你可以把组件想象成网页中的一个小积木。每个组件负责一小块界面功能。比如按钮是一个组件，导航栏也是一个组件。

组件的好处是：

可以重复使用
结构清晰
便于维护

React 的核心思想就是：将整个页面拆分成多个独立的小组件，每个组件都可以独立开发和测试。

示例：定义一个最简单的组件

我们在 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>
)

这是程序入口。而 App.jsx 就是我们主组件的文件，通常在里面写主要结构。

我们可以打开 App.jsx 文件，里面可能有类似这样的内容：

function App() {
  return (
    <div>
      <h1>你好，React！</h1>
    </div>
  )
}

export default App

这是一个最基础的函数组件（Function Component），它返回了一段HTML结构。

2. JSX语法（JavaScript XML）

你可能已经注意到了上面代码里的 <div> 和 <h1> 标签，这些看起来像是HTML的东西，其实是 JSX 语法。

JSX 是一种特殊的语法格式，允许你在 JavaScript 中直接写 HTML 结构。它是 React 推荐的方式。

虽然看起来像HTML，但它本质上是一种被编译后的 JavaScript 代码。我们可以把它看作“混合了HTML风格的JavaScript”。

✅ 小贴士：JSX 必须被包裹在一个父元素内。例如：

function App() {
  return (
    <div>
      <h1>标题</h1>
      <p>这是一个段落。</p>
    </div>
  )
}

3. 虚拟DOM（Virtual DOM）

如果你了解原生 JavaScript 编程，应该知道操作真实的 DOM（网页元素）是非常耗性能的。

React 引入了一个叫做 虚拟 DOM 的机制。它会在内存中创建一个虚拟的页面结构副本，每次数据变化时，React 先比较虚拟DOM的变化，然后只更新真实DOM中需要改变的部分。这就大大提高了性能。

你可以不用太深入理解原理，只要知道一点：React 自动处理了页面更新，我们只需关心数据的变化。

实战项目：跟着我做一个“欢迎消息”小程序

为了让你更好地上手实践，我们现在来做一个小项目：显示一个欢迎消息，并提供切换语言的功能。

目标功能：

显示“欢迎你！”这条消息
提供两个按钮：“中文”、“English”
点击按钮可以切换语言

步骤1：新建一个按钮组件

我们可以在 App.jsx 里编写所有内容，但如果想练习组件化的思想，可以把按钮做成一个独立的组件。

在 src 文件夹下新建一个文件：LanguageButton.jsx，内容如下：

function LanguageButton({ language, onClick }) {
  return (
    <button onClick={onClick}>
      {language}
    </button>
  )
}

export default LanguageButton

解释：

props 是组件接收的数据参数（比如 language）
onClick 是点击事件处理函数
这个组件渲染一个按钮，点击后会调用传进来的函数

步骤2：修改主组件 App.jsx 来使用新按钮组件

打开 App.jsx，将其改写为如下内容：

import { useState } from 'react'
import LanguageButton from './LanguageButton.jsx'

function App() {
  const [language, setLanguage] = useState('zh')

  const messages = {
    zh: '欢迎你！',
    en: 'Welcome!'
  }

  const handleLanguageChange = (lang) => {
    setLanguage(lang)
  }

  return (
    <div>
      <h1>{messages[language]}</h1>

      <LanguageButton language="中文" onClick={() => handleLanguageChange('zh')} />
      <LanguageButton language="English" onClick={() => handleLanguageChange('en')} />
    </div>
  )
}

export default App

功能解析：

useState 是 React 的一个 钩子函数（Hook），用来保存状态
我们通过点击按钮触发 handleLanguageChange 函数来更改当前语言
messages[language] 会根据语言键值动态显示不同的文字

现在刷新你的浏览器，你应该能看到如下效果：

欢迎你！
[中文] [English]

点击英文按钮，页面内容变为 “Welcome!”，点击中文按钮恢复为中文。

🎉 太棒了！这就是你人生中的第一个 React 小应用！

常见问题：新手容易遇到的问题及解决方法

刚开始学习React，肯定会遇到一些疑惑甚至错误。下面是几个常见问题及其解决方法：

Q1：为什么我的按钮点不动？没有反应怎么办？

可能是你忘记给按钮添加 onClick 事件处理函数，或者函数名拼写错误。

✅ 解决办法：检查代码中的 onClick 是否正确绑定函数。例如：

<button onClick={handleClick}>点击我</button>

确保 handleClick 函数已经被定义。

Q2：组件不显示？页面空白？

可能是由于组件没有正确导出或导入。

✅ 解决办法：

检查是否写了 export default App
确保导入路径正确（如 /src/App.jsx）

Q3：控制台报错：“Cannot read property 'setState' of undefined”

这个错误通常出现在类组件中，如果你没有使用 this.setState 或者 constructor 方法初始化 state。

✅ 解决办法：

类组件中要使用 this.state 存储状态
使用 constructor(props) 初始化 state
或改用函数组件 + useState，更简单易懂！

Q4：为什么我的页面没更新？明明数据变了！

可能是你在修改状态时用了错误的方式。

✅ 解决办法：

不要直接修改 state，而是要用 setState() 或 useState 返回的函数
举个反例 ❌：

count += 1 // ❌ 不应直接修改

正确 ✅：

setCount(count + 1)

学习建议：学完React基础之后，接下来该学什么？

恭喜你完成了《React入门教程》！你已经学会了如何创建React项目、如何使用组件、以及如何用状态控制页面内容。

接下来，建议你继续深入以下几个方向：

1. 学习 React Hooks

除了 useState，React 还提供了其它强大的 Hook，比如：

useEffect：处理副作用（如请求数据、定时器）
useContext：跨组件传递数据
useReducer：处理复杂的状态逻辑

2. 学习 React Router

如果你打算做多页面的应用，就需要学会用路由（URL跳转）。react-router 是 React 的官方推荐路由库。

3. 接触前端状态管理方案

当项目越来越复杂时，单纯靠本地状态不够用了，可以尝试学习：

Redux / Toolkit
Zustand
Context API

4. 学习部署和打包

当你完成开发后，最终要发布到网上。可以学习使用：

Vercel
Netlify
GitHub Pages

5. 项目实战进阶

试着做一些完整的项目练手，例如：

待办事项清单（Todo List）
计数器
博客系统
电商商品展示页

你也可以去 CodeSandbox 上在线编辑和运行React项目。

总结

在本篇教程中，我们从0开始，搭建了React开发环境，介绍了组件、JSX、状态等基本概念，并动手实现了一个实用的小例子。我们还列举了一些常见问题，方便你在后续学习中快速排查错误。

React 是一个功能强大但学习曲线适中的框架，随着项目的增多，你会越来越熟练。只要你坚持练习，持续构建项目，很快就能够独立开发完整的前端应用。

祝你学习顺利，写出更多酷炫的React作品！

如果你喜欢这篇文章，欢迎点赞、收藏、分享，让更多人一起加入React的世界 ❤️

标签:综合Javascript

最热最新

暂无评论

为你推荐

暂无相关推荐

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

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

环境准备：如何搭建React开发环境？

第一步：安装 Node.js 和 npm

如何安装：

第二步：安装 Vite + 创建React项目（最简单的创建方式）

使用 Vite 创建 React 项目：

核心概念：React中最重要的三个术语

1. 组件（Component）

示例：定义一个最简单的组件

2. JSX语法（JavaScript XML）

3. 虚拟DOM（Virtual DOM）

实战项目：跟着我做一个“欢迎消息”小程序

目标功能：

步骤1：新建一个按钮组件

步骤2：修改主组件 App.jsx 来使用新按钮组件

功能解析：

常见问题：新手容易遇到的问题及解决方法

Q1：为什么我的按钮点不动？没有反应怎么办？

Q2：组件不显示？页面空白？

Q3：控制台报错：“Cannot read property 'setState' of undefined”

Q4：为什么我的页面没更新？明明数据变了！

学习建议：学完React基础之后，接下来该学什么？

1. 学习 React Hooks

2. 学习 React Router

3. 接触前端状态管理方案

4. 学习部署和打包

5. 项目实战进阶

总结

评论 0

为你推荐

精选内容