快速上手

欢迎使用 React 文档！这个页面将引导你在 5 分钟内创建你的第一个 React 应用。

你将学到

如何创建新的 React 应用
React 应用的文件结构
如何显示和更新组件
如何添加样式和响应事件

前置要求

你应该对以下内容有基本的了解：

HTML - 网页的基本结构
CSS - 样式和布局
JavaScript - 函数、对象、数组等

小贴士

如果你刚开始学习前端开发，建议先学习 HTML、CSS 和 JavaScript 的基础知识。 React 是基于这些技术构建的。

创建新应用

创建新的 React 应用最快的方法是使用框架。以下是几个流行的选择：

Next.js（推荐）

Next.js 是一个强大的 React 框架，支持服务端渲染、静态生成等功能。

Bash

# 创建新的 Next.js 应用
npx create-next-app@latest my-app
cd my-app
npm run dev

Vite

Vite 是一个快速的构建工具，适合单页应用开发。

Bash

# 创建新的 Vite + React 应用
npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev

注意

如果你是完全的初学者，建议使用 Next.js。它提供了更多的开箱即用功能，并且是 React 团队推荐的框架。

在线体验

如果你不想安装任何东西，可以直接在在线编辑器中尝试 React：

项目结构

打开你的项目，你会看到类似这样的文件结构：

plaintext

my-app/
├── public/           # 静态资源（图片、图标等）
├── src/
│   ├── App.js        # 主应用组件
│   ├── App.css       # 应用样式
│   ├── index.js      # 应用入口
│   └── ...           # 其他文件
├── package.json      # 项目依赖
└── README.md         # 项目说明

重要

不同的框架（Next.js、Vite 等）可能有不同的文件结构。请参考你选择的框架文档。

理解 React

React 是一个用于构建用户界面的 JavaScript 库。它的核心思想是将 UI 拆分为独立的、可复用的组件。

组件示例

这是一个简单的 React 组件：

JavaScript

function Welcome() {
  return (
    <div className="container">
      <h1>欢迎来到 React</h1>
      <p>这是一个简单的组件</p>
    </div>
  );
}

在 React 中，组件是返回 JSX 的函数。JSX 看起来像 HTML，但它在 JavaScript 中提供了更强大的功能。

下一步

现在你已经创建了一个 React 应用，接下来可以学习：

描述 UI

学习 JSX 和如何在 React 中描述 UI

继续学习 →

组件基础

深入了解 React 组件的工作原理

继续学习 →

常见问题

为什么我的应用没有运行？

确保：

你已经安装了 Node.js（版本 18.17 或更高）
你在项目目录中运行了 npm run dev
终端中没有错误信息

我应该使用哪个框架？

对于初学者，我们推荐 Next.js，因为：

它提供了很好的开发体验
支持服务端渲染和静态生成
有优秀的文档和社区支持
是 React 团队推荐的框架