React: مقدمة إلى React

// A typical product list page — jQuery code
function updateProductList(category) {
  // Manual DOM operation
  $('#product-list').empty()
  $('#loading-spinner').show()
  
  $.get('/api/products?category=' + category, function(data) {
    $('#loading-spinner').hide()
    data.forEach(function(product) {
      // Concatenate HTML strings line by line
      var html = '<div class="product-card">' +
        '<h3>' + product.name + '</h3>' +
        '<p>' + product.price + '</p>' +
        '<button onclick="addToCart(' + product.id + ')">Add to Cart</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>
  )
}

// Imperative: tell the browser what to do at each step
const div = document.createElement('div')
div.className = 'alert'
div.textContent = 'Hello'
document.body.appendChild(div)

// Declarative: tell React what result you want
function Alert({ message }) {
  return <div className="alert">{message}</div>
}
// React automatically creates and updates the DOM

// Component-based: page broken into independent components
function Page() {
  return (
    <div>
      <Header />        {/* Header navigation */}
      <Sidebar />       {/* Sidebar */}
      <MainContent />   {/* Main content area */}
      <Footer />        {/* Footer copyright */}
    </div>
  )
}

// ============================================
// Example：use  React Build a "Like" Button
// Features：Demonstrating Declarative Programming + Component-based + Core Concepts of State Management
// ============================================

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

// 1. Define a "Like" button component
function LikeButton() {
  // Usage useState Manage Like Status
  const [liked, setLiked] = React.useState(false)
  const [count, setCount] = React.useState(0)

  // Handling Click Events
  function handleClick() {
    if (liked) {
      setLiked(false)
      setCount(count - 1)
    } else {
      setLiked(true)
      setCount(count + 1)
    }
  }

  // Declarative UI：Render different appearances based on state
  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 ? '❤️ Liked' : '🤍 Like'} ({count})
    </button>
  )
}

// 2. Add components to the page
function App() {
  return (
    <div style={{ textAlign: 'center', padding: '50px' }}>
      <h1>React Examples of Likes</h1>
      <p>Click the button to experience declarative programming UI：Just keep an eye on the status，No action required DOM</p>
      <LikeButton />
      <LikeButton /> {/* Component Reusability！*/}
    </div>
  )
}

// 3. Render to page
const root = createRoot(document.getElementById('root'))
root.render(<App />)

// ============================================
// Example：use  React The component tree displays the page structure
// Features：Simulate the component tree of a blog homepage，Demonstrating a Component-Based Approach
// ============================================

// Leaf Component：Article Card
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>
  )
}

// Composite Components：List of Articles
function ArticleList({ articles }) {
  return (
    <div>
      <h2>Latest Articles</h2>
      {articles.map(article => (
        <ArticleCard key={article.id} title={article.title} excerpt={article.excerpt} />
      ))}
    </div>
  )
}

// Composite Components：Sidebar
function Sidebar() {
  return (
    <div style={{ backgroundColor: '#fafafa', padding: '16px', borderRadius: '8px' }}>
      <h3>Categories</h3>
      <ul style={{ listStyle: 'none', padding: 0 }}>
        <li>React Tutorial (12)</li>
        <li>TypeScript (8)</li>
        <li>Node.js (5)</li>
      </ul>
    </div>
  )
}

// Root Component：Blog Home
function BlogHome() {
  const articles = [
    { id: 1, title: 'React Getting Started Guide', excerpt: 'Study React Core Concepts and Best Practices...' },
    { id: 2, title: 'Understanding the Virtual DOM', excerpt: 'Virtual DOM How to Improve React Application Performance...' },
    { id: 3, title: 'Component Design Patterns', excerpt: 'Master React Techniques for Combining and Reusing Components...' }
  ]

  return (
    <div style={{ maxWidth: '960px', margin: '0 auto', padding: '20px' }}>
      <header style={{ textAlign: 'center', marginBottom: '24px' }}>
        <h1>📝 My Tech Blog</h1>
        <nav>
          <a href="#" style={{ margin: '0 12px' }}>Home</a>
          <a href="#" style={{ margin: '0 12px' }}>About</a>
          <a href="#" style={{ margin: '0 12px' }}>Contact</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>
  )
}

// Component tree Structure：
// BlogHome
// ├── header (Navigation Bar)
// └── div.grid
//     ├── ArticleList
//     │   ├── ArticleCard × 3
//     └── Sidebar
//         └── Category List