菜鸟教程

主题

编写第一个 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 中最基础的概念：组件、状态和事件处理。