React: React 简介

// 一个商品列表页面的典型 jQuery 代码
function updateProductList(category) {
  // 手动操作 DOM
  $('#product-list').empty()
  $('#loading-spinner').show()
  
  $.get('/api/products?category=' + category, function(data) {
    $('#loading-spinner').hide()
    data.forEach(function(product) {
      // 逐条拼接 HTML 字符串
      var html = '<div class="product-card">' +
        '<h3>' + product.name + '</h3>' +
        '<p>' + product.price + '</p>' +
        '<button onclick="addToCart(' + product.id + ')">加入购物车</button>' +
        '</div>'
      $('#product-list').append(html)
    })
  })
}

function ProductList({ category }) {
  const [products, setProducts] = React.useState([])
  const [loading, setLoading] = React.useState(true)

  React.useEffect(() => {
    fetch('/api/products?category=' + category)
      .then(res => res.json())
      .then(data => {
        setProducts(data)
        setLoading(false)
      })
  }, [category])

  if (loading) return <Spinner />
  
  return (
    <div className="product-grid">
      {products.map(product => (
        <ProductCard key={product.id} product={product} />
      ))}
    </div>
  )
}

// 命令式：告诉浏览器每一步怎么做
const div = document.createElement('div')
div.className = 'alert'
div.textContent = 'Hello'
document.body.appendChild(div)

// 声明式：告诉 React 你想要什么结果
function Alert({ message }) {
  return <div className="alert">{message}</div>
}
// React 会自动创建和更新 DOM

// 组件化：一个页面被拆分成独立组件
function Page() {
  return (
    <div>
      <Header />        {/* 头部导航 */}
      <Sidebar />       {/* 侧边栏 */}
      <MainContent />   {/* 主内容区 */}
      <Footer />        {/* 底部版权 */}
    </div>
  )
}

// ============================================
// 示例：用 React 构建一个点赞按钮
// 功能：展示声明式编程 + 组件化 + 状态管理的核心概念
// ============================================

import React from 'react'
import { createRoot } from 'react-dom/client'

// 1. 定义一个点赞按钮组件
function LikeButton() {
  // 使用 useState 管理点赞状态
  const [liked, setLiked] = React.useState(false)
  const [count, setCount] = React.useState(0)

  // 处理点击事件
  function handleClick() {
    if (liked) {
      setLiked(false)
      setCount(count - 1)
    } else {
      setLiked(true)
      setCount(count + 1)
    }
  }

  // 声明式 UI：根据状态渲染不同外观
  return (
    <button
      onClick={handleClick}
      style={{
        padding: '10px 20px',
        fontSize: '16px',
        backgroundColor: liked ? '#ff4757' : '#f1f2f6',
        color: liked ? '#fff' : '#333',
        border: 'none',
        borderRadius: '5px',
        cursor: 'pointer'
      }}
    >
      {liked ? '❤️ 已点赞' : '🤍 点赞'} ({count})
    </button>
  )
}

// 2. 组合组件到页面
function App() {
  return (
    <div style={{ textAlign: 'center', padding: '50px' }}>
      <h1>React 点赞示例</h1>
      <p>点击按钮体验声明式 UI：只需关注状态，不用操作 DOM</p>
      <LikeButton />
      <LikeButton /> {/* 组件可复用！*/}
    </div>
  )
}

// 3. 渲染到页面
const root = createRoot(document.getElementById('root'))
root.render(<App />)

// ============================================
// 示例：用 React 组件树展示页面结构
// 功能：模拟一个博客首页的组件树，展示组件化思维
// ============================================

// 叶子组件：文章卡片
function ArticleCard({ title, excerpt }) {
  return (
    <div style={{ border: '1px solid #eee', borderRadius: '8px', padding: '12px', marginBottom: '12px' }}>
      <h3 style={{ margin: '0 0 8px 0' }}>{title}</h3>
      <p style={{ color: '#666', margin: 0, fontSize: '14px' }}>{excerpt}</p>
    </div>
  )
}

// 组合组件：文章列表
function ArticleList({ articles }) {
  return (
    <div>
      <h2>最新文章</h2>
      {articles.map(article => (
        <ArticleCard key={article.id} title={article.title} excerpt={article.excerpt} />
      ))}
    </div>
  )
}

// 组合组件：侧边栏
function Sidebar() {
  return (
    <div style={{ backgroundColor: '#fafafa', padding: '16px', borderRadius: '8px' }}>
      <h3>分类</h3>
      <ul style={{ listStyle: 'none', padding: 0 }}>
        <li>React 教程 (12)</li>
        <li>TypeScript (8)</li>
        <li>Node.js (5)</li>
      </ul>
    </div>
  )
}

// 根组件：博客首页
function BlogHome() {
  const articles = [
    { id: 1, title: 'React 入门指南', excerpt: '学习 React 的核心概念和最佳实践...' },
    { id: 2, title: '理解虚拟 DOM', excerpt: '虚拟 DOM 如何提升 React 应用性能...' },
    { id: 3, title: '组件设计模式', excerpt: '掌握 React 组件的组合与复用技巧...' }
  ]

  return (
    <div style={{ maxWidth: '960px', margin: '0 auto', padding: '20px' }}>
      <header style={{ textAlign: 'center', marginBottom: '24px' }}>
        <h1>📝 我的技术博客</h1>
        <nav>
          <a href="#" style={{ margin: '0 12px' }}>首页</a>
          <a href="#" style={{ margin: '0 12px' }}>关于</a>
          <a href="#" style={{ margin: '0 12px' }}>联系</a>
        </nav>
      </header>
      <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: '24px' }}>
        <ArticleList articles={articles} />
        <Sidebar />
      </div>
      <footer style={{ textAlign: 'center', marginTop: '24px', color: '#999', fontSize: '13px' }}>
        <p>© 2026 web-tutorial.com</p>
      </footer>
    </div>
  )
}

// 组件树结构：
// BlogHome
// ├── header (导航栏)
// └── div.grid
//     ├── ArticleList
//     │   ├── ArticleCard × 3
//     └── Sidebar
//         └── 分类列表