由于当前环境限制无法创建文件，我将直接在此输出这篇文章的内容：

什么是 React 组件？核心概念与实战解析

React 组件（Component）是 React 应用的基石。你可以将组件想象成乐高积木，通过组合一个个独立、可复用的代码片段，最终构建出复杂的用户界面。

1. 核心概念

1.1 函数式组件 (Functional Components)

现代 React 开发主流采用函数式组件。它本质上就是一个普通的 JavaScript 函数，接收参数（Props）并返回通过 JSX 描述的界面。

jsx
// 一个简单的函数式组件
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}

1.2 JSX (JavaScript XML)

JSX 是一种语法扩展，允许你在 JavaScript 中编写类似 HTML 的代码。它最终会被编译为标准的 JavaScript 对象。
* 规则：必须有一个根元素包裹；标签必须闭合；使用 className 代替 class。

1.3 Props (属性)

Props 是组件的输入。它们是从父组件传递给子组件的数据。
* 特性：Props 是只读的（Immutable）。组件不应该修改自己的 props。

1.4 State (状态)

State 是组件的内部记忆。它是组件私有的数据，当 State 发生变化时，React 会自动重新渲染组件以更新 UI。
* 用法：在函数式组件中，使用 useState Hook 来管理状态。

2. 实战解析：构建一个交互式计数器

下面我们通过一个包含状态、事件处理和样式绑定的完整示例，来演示组件的运作机制。

“`jsx
import React, { useState } from ‘react’;

// 1. 定义组件
function Counter() {
// 2. 声明状态 (State)
// count: 当前数值, setCount: 更新数值的函数, 0: 初始值
const [count, setCount] = useState(0);

// 3. 定义交互逻辑
const increment = () => setCount(count + 1);
const decrement = () => setCount(count – 1);

// 4. 返回 UI (JSX)
return (

  <div style={{ display: 'flex', gap: '10px' }}>
    <button onClick={decrement}>减少 (-)</button>
    <button onClick={increment}>增加 (+)</button>
  </div>

  {/* 条件渲染示例 */}
  {count > 5 && <p style={{ color: 'red' }}>数值很大了！</p>}
</div>