function Welcome() {
  return <h1>سلام دنیا!</h1>;
}

function Greeting({ name }) {
  return <h1>سلام، {name}!</h1>;
}

function App() {
  return (
    <div>
      <Welcome />
      <Greeting name="توسعه‌دهنده React" />
    </div>
  );
}

function Button() {
  return <button className="primary">روم کلیک کن</button>;
}

function ButtonWithoutJSX() {
  return React.createElement(
    'button',
    { className: 'primary' },
    'روم کلیک کن'
  );
}

function UserCard({ user }) {
  const isOnline = user.lastSeen < Date.now() - 300000; // 5 دقیقه

  return (
    <div className="user-card">
      <h2>{user.name}</h2>
      <p style={{ color: isOnline ? 'green' : 'red' }}>
        {isOnline ? 'آنلاین' : 'آفلاین'}
      </p>
    </div>
  );
}

function BlogPost({ title, content, author, publishDate }) {
  return (
    <article>
      <h1>{title}</h1>
      <div className="meta">
        نویسنده: {author} - تاریخ: {publishDate}
      </div>
      <div className="content">{content}</div>
    </article>
  );
}

function App() {
  return (
    <BlogPost
      title="یادگیری React"
      content="React برای ساخت UI عالیه..."
      author="علی احمدی"
      publishDate="۱۴۰۳/۰۳/۱۵"
    />
  );
}

function Card({ children }) {
  return (
    <div className="card">
      <div className="card-content">
        {children}
      </div>
    </div>
  );
}

function App() {
  return (
    <Card>
      <h2>عنوان کارت</h2>
      <p>این محتوا به عنوان children منتقل میشه</p>
      <button>دکمه عمل</button>
    </Card>
  );
}

function TodoList({ todos }) {
  return (
    <ul>
      {todos.map((todo) => (
        <li key={todo.id}>
          {todo.text}
        </li>
      ))}
    </ul>
  );
}

const todos = [
  { id: 1, text: "یادگیری React" },
  { id: 2, text: "ساخت اپلیکیشن" },
  { id: 3, text: "انتشار در پروداکشن" }
];

function Counter() {
  const [count, setCount] = useState(0);

  // وقتی count تغییر می‌کنه:
  // 1. Virtual DOM جدید ساخته میشه
  // 2. با نسخه قبلی مقایسه میشه
  // 3. فقط متن شمارنده در DOM واقعی تغییر می‌کنه
  return (
    <div>
      <p>شمارنده: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        افزایش
      </button>
    </div>
  );
}

function ContactForm() {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    message: ''
  });

  const handleInputChange = (event) => {
    const { name, value } = event.target;
    setFormData(prev => ({
      ...prev,
      [name]: value
    }));
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('فرم ارسال شد:', formData);
  };

  const handleButtonClick = () => {
    alert('دکمه کلیک شد!');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input name="name" value={formData.name} onChange={handleInputChange} />
      <input name="email" value={formData.email} onChange={handleInputChange} />
      <textarea name="message" value={formData.message} onChange={handleInputChange} />
      <button type="submit">ارسال پیام</button>
      <button type="button" onClick={handleButtonClick}>کلیک کن</button>
    </form>
  );
}

import { useState } from 'react';

function ShoppingCart() {
  const [items, setItems] = useState([]);
  const [total, setTotal] = useState(0);

  const addItem = (item) => {
    setItems(prev => [...prev, item]);
    setTotal(prev => prev + item.price);
  };

  const removeItem = (itemId) => {
    const item = items.find(i => i.id === itemId);
    setItems(prev => prev.filter(i => i.id !== itemId));
    setTotal(prev => prev - item.price);
  };

  return (
    <div>
      <h2>سبد خرید</h2>
      <p>مجموع: {total} تومان</p>
      <ul>
        {items.map(item => (
          <li key={item.id}>
            {item.name} - {item.price} تومان
            <button onClick={() => removeItem(item.id)}>حذف</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

function LoginForm() {
  const [credentials, setCredentials] = useState({
    username: '',
    password: ''
  });

  const handleChange = (event) => {
    const { name, value } = event.target;
    setCredentials(prev => ({
      ...prev,
      [name]: value
    }));
  };

  return (
    <form>
      <input
        type="text"
        name="username"
        value={credentials.username}
        onChange={handleChange}
        placeholder="نام کاربری"
      />

      <input
        type="password"
        name="password"
        value={credentials.password}
        onChange={handleChange}
        placeholder="رمز عبور"
      />
    </form>
  );
}

const [count, setCount] = useState(0);
setCount(count + 1);

function reducer(state, action) {
  if (action.type === "add") return state + 1;
  return state;
}

const [state, dispatch] = useReducer(reducer, 0);
dispatch({ type: "add" });

const user = useContext(UserContext);

const inputRef = useRef(null);
inputRef.current.focus();

useEffect(() => {
  document.title = "سلام!";
}, []);

const sorted = useMemo(() => heavySort(data), [data]);

const handleClick = useCallback(() => console.log("clicked"), []);

import { useState, useEffect, useRef, useMemo, useCallback } from 'react';

function OptimizedComponent({ items }) {
  const [filter, setFilter] = useState('');
  const [count, setCount] = useState(0);
  const inputRef = useRef(null);

  // useEffect برای side effects
  useEffect(() => {
    document.title = `شمارنده: ${count}`;
  }, [count]);

  // useMemo برای محاسبات گران
  const filteredItems = useMemo(() => {
    return items.filter(item =>
      item.name.toLowerCase().includes(filter.toLowerCase())
    );
  }, [items, filter]);

  // useCallback برای ارجاعات پایدار تابع
  const handleItemClick = useCallback((item) => {
    console.log('آیتم کلیک شد:', item);
  }, []);

  const focusInput = () => {
    inputRef.current?.focus();
  };

  return (
    <div>
      <input
        ref={inputRef}
        type="text"
        value={filter}
        onChange={(e) => setFilter(e.target.value)}
        placeholder="فیلتر آیتم‌ها..."
      />
      <button onClick={focusInput}>فوکوس روی Input</button>

      <p>شمارنده: {count}</p>
      <button onClick={() => setCount(c => c + 1)}>افزایش</button>

      <ul>
        {filteredItems.map(item => (
          <li key={item.id} onClick={() => handleItemClick(item)}>
            {item.name}
          </li>
        ))}
      </ul>
    </div>
  );
}

import { useState, useEffect } from 'react';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);   // ذخیره اطلاعات کاربر
  const [loading, setLoading] = useState(true); // وضعیت بارگذاری
  const [error, setError] = useState(null);     // خطاها

  useEffect(() => {
    async function fetchUser() {
      try {
        setLoading(true);
        const response = await fetch(`/api/users/${userId}`);
        if (!response.ok) throw new Error('دریافت کاربر ناموفق');

        const userData = await response.json();
        setUser(userData);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    }

    fetchUser();
  }, [userId]);
  // ❗ این Effect فقط وقتی userId تغییر کند اجرا می‌شود

  useEffect(() => {
    const timer = setInterval(() => {
      console.log('چک کردن برای آپدیت...');
    }, 30000);

    return () => {
      clearInterval(timer); // حذف تایمر در هنگام خروج
    };
  }, []);

import { useRef, useEffect, useState } from 'react';

function VideoPlayer({ src }) {
  const videoRef = useRef(null);
  const [isPlaying, setIsPlaying] = useState(false);

  useEffect(() => {
    videoRef.current?.focus(); // فوکوس بعد از mount
  }, []);

  const togglePlayPause = () => {
    const video = videoRef.current;
    if (!video) return;

    if (isPlaying) video.pause();
    else video.play();

    setIsPlaying(!isPlaying);
  };

  const handleTimeUpdate = () => {
    const video = videoRef.current;
    if (video) {
      console.log(`زمان فعلی: ${video.currentTime}`);
    }
  };

  return (
    <div>
      <video
        ref={videoRef}
        src={src}
        onTimeUpdate={handleTimeUpdate}
        width="100%"
      />
      <button onClick={togglePlayPause}>
        {isPlaying ? 'توقف' : 'پخش'}
      </button>
    </div>
  );
}

const ThemeContext = createContext();
const UserContext = createContext();

function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme(prev => prev === 'light' ? 'dark' : 'light');
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

function Header() {
  const { theme, toggleTheme } = useContext(ThemeContext);
  const { user, logout } = useContext(UserContext);

  return (
    <header className={`header ${theme}`}>
      <h1>اپلیکیشن من</h1>
      <button onClick={toggleTheme}>
        تغییر به حالت {theme === 'light' ? 'تاریک' : 'روشن'}
      </button>

      {user ? (
        <div>
          سلام، {user.name}!
          <button onClick={logout}>خروج</button>
        </div>
      ) : (
        <button>ورود</button>
      )}
    </header>
  );
}

import { createPortal } from 'react-dom';
import { useState } from 'react';

function Modal({ isOpen, onClose, children }) {
  if (!isOpen) return null;

  return createPortal(
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
        <button className="modal-close" onClick={onClose}>
          ×
        </button>
        {children}
      </div>
    </div>,
    document.body
  );
}

function App() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  return (
    <div className="app">
      <h1>اپلیکیشن من</h1>
      <button onClick={() => setIsModalOpen(true)}>باز کردن Modal</button>

      <Modal
        isOpen={isModalOpen}
        onClose={() => setIsModalOpen(false)}
      >
        <h2>محتوای Modal</h2>
        <p>این modal خارج از درخت DOM اپ رندر شده!</p>
      </Modal>
    </div>
  );
}

import { Suspense, lazy } from 'react';

const LazyComponent = lazy(() => import('./LazyComponent'));

function LoadingSpinner() {
  return (
    <div className="loading-spinner">
      <div className="spinner"></div>
      <p>در حال بارگذاری...</p>
    </div>
  );
}

function App() {
  return (
    <div>
      <h1>اپلیکیشن من</h1>

      <Suspense fallback={<LoadingSpinner />}>
        <LazyComponent />
      </Suspense>

      <Suspense fallback={<div>بارگذاری اطلاعات کاربر...</div>}>
        <UserProfile userId="123" />
      </Suspense>
    </div>
  );
}

import { Component } from 'react';

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true, error };
  }

  componentDidCatch(error, errorInfo) {
    console.error('خطا توسط boundary گرفته شد:', error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return (
        <div className="error-boundary">
          <h2>مشکلی پیش اومده!</h2>
          <p>لطفاً صفحه را reload کنید.</p>
          <button onClick={() => this.setState({ hasError: false, error: null })}>
            دوباره امتحان کن
          </button>
        </div>
      );
    }

    return this.props.children;
  }
}

function ProblematicComponent({ user }) {
  if (!user) {
    throw new Error('اطلاعات کاربر ضروریه');
  }

  return <div>سلام، {user.name}!</div>;
}

function App() {
  return (
    <ErrorBoundary>
      <ProblematicComponent user={null} />
    </ErrorBoundary>
  );
}