# 编写第一个 React 应用

URL: https://caijiao.org/react/chapter2/first-app
Source: docs/react/chapter2/first-app.md
Description: 本文将指导你如何编写第一个简单的 React 应用，展示 React 的基本使用，包括组件的创建、渲染以及如何通过状态管理实现交互功能。

创建完项目结构后，我们可以开始编写第一个 React 应用。在这个例子中，我们将创建一个显示欢迎信息的简单应用，并展示如何通过 React 状态管理动态更新页面内容。

## 步骤 1: 创建一个新的 React 应用

假设你已经通过 `create-react-app` 创建了一个新的项目。在终端中运行以下命令来创建项目：

```bash
npx create-react-app my-first-app
cd my-first-app
````

## 步骤 2: 编写应用的主组件

在 `src/App.js` 文件中，默认会有一些内容。我们将修改它，编写一个简单的应用，展示如何使用 React 的状态（state）和事件处理。

```js
import React, { useState } from 'react';

function App() {
  // 使用 useState 创建一个状态
  const [message, setMessage] = useState('欢迎来到我的第一个 React 应用！');

  // 点击按钮时更新状态
  const handleClick = () => {
    setMessage('你点击了按钮！');
  };

  return (
    <div className="App">
      <h1>{message}</h1> {/* 显示状态内容 */}
      <button onClick={handleClick}>点击我</button> {/* 事件处理 */}
    </div>
  );
}

export default App;
```

## 步骤 3: 启动应用

回到终端中，使用以下命令启动应用：

```bash
npm start
```

这时，浏览器会自动打开 `http://localhost:3000`，你可以看到页面上显示了欢迎信息和一个按钮。当你点击按钮时，信息会更新为 "你点击了按钮！"。

## 解释代码

* `useState`：这是 React 中的一个 Hook，用来在函数组件中管理状态。`useState('欢迎来到我的第一个 React 应用！')` 初始化了一个名为 `message` 的状态变量，初始值为 `"欢迎来到我的第一个 React 应用！"`。`setMessage` 是更新状态的函数。
* `handleClick`：这是一个事件处理函数，当用户点击按钮时，调用 `setMessage` 更新状态，从而更新页面上的内容。
* `{message}`：在 JSX 中，我们可以通过花括号 `{}` 嵌入 JavaScript 表达式，动态显示 `message` 状态的值。

通过这个简单的应用，你可以理解 React 中最基础的概念：组件、状态和事件处理。