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

移动端App

2025-06-27 17:09

阅读 438

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

React 是一个由 Facebook 开发并维护的 JavaScript 库，专门用于构建用户界面。简单来说，它帮助开发者更容易地创建交互式的网页和应用程序。

如果你以前用过 HTML 和 JavaScript 创建网页，那你可能知道，在页面复杂后，控制页面行为变得很麻烦。而 React 帮你把这个问题变得更“有条理”了。

想象一下你要装修一个房子，你可以请一位专业的设计师帮你规划每一个房间的功能和布局，这样整个过程会更高效。React 就像这个设计师，它帮我们更好地组织页面上的每个部分，让代码更清晰、更好维护。

React 特别适合用来做单页应用（SPA），也就是那种不需要每次点击都跳转页面、而是局部更新内容的网站，比如 Instagram、Netflix 的网页版等。

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

在开始学习 React 之前，我们需要先准备好开发环境。不用担心，这一步其实很简单。

步骤 1：安装 Node.js 和 npm

Node.js 是一个可以运行 JavaScript 的工具，npm 是它的包管理器，用来下载各种工具和库。

打开浏览器，访问 https://nodejs.org
点击 “LTS” 或者 “Current” 下载安装包（推荐 LTS）
安装完成后，打开命令行（Windows 用 CMD 或 PowerShell，Mac 用 Terminal），输入：

node -v
npm -v

如果看到类似 v18.17.1 这样的版本号，说明安装成功啦！

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

Vite 是一个现代的前端构建工具，速度非常快，特别适合初学者。

打开命令行，运行下面这条命令来创建新项目：

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

解释：

my-first-react-app 是你的项目名字
--template react 表示我们要创建一个 React 项目

cd my-first-react-app
npm install

启动开发服务器：

npm run dev

现在浏览器会自动打开一个页面，显示 “Welcome to Vite + React”，恭喜你！React 项目已经跑起来了！

三、React 核心概念解析

在写第一个应用之前，我们需要了解几个关键概念。别担心，我会用最通俗易懂的方式解释。

1. 组件（Component）

组件是 React 的基本单位。你可以把它理解成网页中的一块小积木，比如一个按钮、一个导航栏、一段文字等等。

举个例子：

function Welcome() {
  return <h1>欢迎来到我的第一个 React 页面！</h1>;
}

这段代码定义了一个叫 Welcome 的组件，它会在页面上显示一个标题。

2. JSX 语法

上面那段代码中的 <h1> 不是 HTML，也不是普通的字符串，它是 JSX —— 一种允许你在 JavaScript 中写类似 HTML 内容的语法。

也就是说，在 React 中，我们可以直接把 HTML 写进 JS 文件里！

3. 渲染组件

我们有了组件之后，就需要把它“展示”在网页上。

打开你的项目文件夹，找到 src/main.jsx，你会发现它已经写好了渲染组件的内容：

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

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

这段代码的意思是：找到页面中 ID 为 root 的元素（通常是 HTML 的根容器），然后在里面渲染 App 组件。

那什么是 App 呢？来看看 src/App.jsx：

function App() {
  return (
    <div>
      <h1>Vite + React</h1>
      <p>这是默认的 App 组件内容</p>
    </div>
  )
}

export default App

这个就是我们项目的主组件，它被渲染到了网页上。

4. props：给组件传数据

组件之间是可以互相传递信息的。这个信息就叫做 props（属性）。

举个例子：

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

我们在别的地方使用这个组件时，可以这样写：

<Greeting name="小明" />

就能在页面上显示：“你好，小明”。

5. 状态（state）：保存组件内部的数据

状态是组件内部用来保存当前情况的数据。比如一个按钮的状态可以是“已点击”或“未点击”。

看这个例子：

import { useState } from 'react';

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

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div>
      <p>当前计数：{count}</p>
      <button onClick={handleClick}>点我增加</button>
    </div>
  );
}

解释：

useState(0)：表示初始值为 0 的状态
setCount()：是一个函数，用来修改状态值
每次点击按钮，调用 setCount 来更新状态，页面就会重新显示最新的数字

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

现在我们来做一个简单的任务清单（To-do List），练习前面学到的知识。

第一步：新建组件

在 src/ 目录下新建一个文件：TodoList.jsx

// TodoList.jsx
import { useState } from 'react';

function TodoList() {
  const [tasks, setTasks] = useState([]);
  const [inputValue, setInputValue] = useState('');

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

  return (
    <div>
      <h2>我的待办事项</h2>
      <input 
        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>
  );
}

export default TodoList;

第二步：在 App.jsx 中使用这个组件

修改 src/App.jsx，替换原来的内容为：

import TodoList from './TodoList';

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

export default App;

刷新浏览器，你会看到一个可以添加任务的页面！

五、新手常见问题解答

Q1：React 是不是必须学 JavaScript？

是的，React 是基于 JavaScript 的。建议先掌握 JavaScript 基础知识，比如变量、函数、数组这些内容，再去学 React 会更容易理解。

Q2：JSX 是不是 HTML？

不是！JSX 是 React 提供的一种语法糖，虽然看起来像 HTML，但本质是 JavaScript 的语法扩展。React 把它翻译成真正的 DOM 操作命令。

Q3：为什么组件名要大写？

因为 React 区分原生标签（如 <div>）和自定义组件（如 <MyComponent />）。自定义组件必须以大写字母开头，否则会被当作普通 HTML 标签处理。

Q4：报错说 `ReferenceError: React is not defined` 怎么办？

这是因为旧版 React 要求你手动导入 React。不过新版（从 React 17 开始）已经不再需要了。如果你还在报这个错，请确保你用的是最新版本的 React 和 Vite。

Q5：React 是不是比 jQuery 更难？

对于简单的项目，jQuery 可能更轻量；但对于大型项目，React 提供了更好的结构和可维护性。随着你不断练习，会发现 React 的思维方式其实很直观。

六、学习建议：下一步怎么学？

恭喜你完成了第一个 React 应用！接下来你还可以继续深入学习以下内容：

结语

React 是前端开发的一个重要工具，掌握它可以让你开发出功能强大又好看的网页和应用。希望本篇教程能为你打开 React 世界的大门，接下来就是多写代码、多练习，你会越来越熟练！

加油，未来的 React 工程师！💡

标签:技术分享PythonReact

最热最新

暂无评论

为你推荐

暂无相关推荐

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

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

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

步骤 1：安装 Node.js 和 npm

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

三、React 核心概念解析

1. 组件（Component）

2. JSX 语法

3. 渲染组件

4. props：给组件传数据

5. 状态（state）：保存组件内部的数据

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

第一步：新建组件

第二步：在 App.jsx 中使用这个组件

五、新手常见问题解答

Q1：React 是不是必须学 JavaScript？

Q2：JSX 是不是 HTML？

Q3：为什么组件名要大写？

Q4：报错说 `ReferenceError: React is not defined` 怎么办？

Q5：React 是不是比 jQuery 更难？

六、学习建议：下一步怎么学？

推荐学习路径：

推荐资源：

结语

评论 0

为你推荐

精选内容

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

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

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

步骤 1：安装 Node.js 和 npm

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

三、React 核心概念解析

1. 组件（Component）

2. JSX 语法

3. 渲染组件

4. props：给组件传数据

5. 状态（state）：保存组件内部的数据

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

第一步：新建组件

第二步：在 App.jsx 中使用这个组件

五、新手常见问题解答

Q1：React 是不是必须学 JavaScript？

Q2：JSX 是不是 HTML？

Q3：为什么组件名要大写？

Q4：报错说 ReferenceError: React is not defined 怎么办？

Q5：React 是不是比 jQuery 更难？

六、学习建议：下一步怎么学？

推荐学习路径：

推荐资源：

结语

评论 0

为你推荐

相关推荐

精选内容

Q4：报错说 `ReferenceError: React is not defined` 怎么办？