js react

// 示例代码：使用 React 和 JSX 创建一个简单的计数器组件

import React, { useState } from 'react';

function Counter() {
  // 使用 useState 钩子来定义状态变量 count 和更新函数 setCount
  const [count, setCount] = useState(0);

  // 返回 JSX，包含一个按钮和一个显示当前计数的段落
  return (
    <div>
      <p>当前计数: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        点击增加计数
      </button>
    </div>
  );
}

export default Counter;

解释说明：

1. 导入依赖：import React, { useState } from 'react'; 导入了 React 和 useState 钩子。
2. 定义组件：function Counter() 定义了一个名为 Counter 的函数组件。
3. 状态管理：const [count, setCount] = useState(0); 使用 useState 钩子来创建一个名为 count 的状态变量，并提供一个更新该状态的函数 setCount。初始值为 0。
4. JSX 结构：返回的 JSX 包含一个段落 <p> 显示当前计数值，以及一个按钮 <button>，点击按钮时调用 setCount 来增加计数值。
5. 导出组件：export default Counter; 将组件导出以便在其他地方使用。

这个示例展示了如何使用 React 和 JSX 创建一个简单的交互式组件。