React 组件演示

// 这就是一个 React 组件 —— 本质上是一个 JavaScript 函数
function Card({ emoji, color, tag, title, desc, btnText }) {
  return (
    <div className="card">

      {/* 封面区域 */}
      <div className="card-cover" style={{ background: color }}>
        { emoji }
      </div>

      {/* 内容区域 */}
      <div className="card-body">
        <span className="card-tag">{ tag }</span>
        <h2 className="card-title">{ title }</h2>
        <p className="card-desc">{ desc }</p>
        <button className="card-btn">{ btnText }</button>
      </div>

    </div>
  )
}

// 使用这个组件三次，传入不同的数据（props）
function App() {
  return (
    <div className="cards-row">
      <Card
        emoji="⚛️"
        title="什么是组件"
        desc="组件就是一个函数，接收数据，返回界面。"
      />
      <Card
        emoji="🔁"
        title="可以复用"
        desc="同一个组件用不同的数据，就能渲染不同的内容。"
      />
      <Card
        emoji="🧩"
        title="可以组合"
        desc="多个小组件拼在一起，就组成了完整的页面。"
      />
    </div>
  )
}