import React from 'react';

// مكون وظيفي بسيط
function Greeting({ name }) {
  return <h1>مرحبًا، {name}!</h1>;
}

// مكون وظيفي باستخدام سهم الدالة
const Button = ({ text, onClick }) => {
  return (
    <button onClick={onClick}>
      {text}
    </button>
  );
};

// تصدير المكونات
export { Greeting, Button };

import React, { Component } from 'react';

// مكون فئة بسيط
class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }
  
  increment = () => {
    this.setState({ count: this.state.count + 1 });
  }
  
  render() {
    return (
      <div>
        <p>العدد: {this.state.count}</p>
        <button onClick={this.increment}>زيادة</button>
      </div>
    );
  }
}

export default Counter;

import React, { Fragment } from 'react';

// استخدام Fragment بشكل صريح
function Table() {
  return (
    <table>
      <tbody>
        <tr>
          <Fragment>
            <td>بند 1</td>
            <td>بند 2</td>
          </Fragment>
        </tr>
      </tbody>
    </table>
  );
}

// استخدام الصيغة المختصرة للـ Fragment
function ListItems() {
  return (
    <>
      <li>العنصر الأول</li>
      <li>العنصر الثاني</li>
      <li>العنصر الثالث</li>
    </>
  );
}

import React from 'react';
import ReactDOM from 'react-dom';

function Modal({ children, isOpen, onClose }) {
  if (!isOpen) return null;
  
  // إنشاء portal يضيف المحتوى إلى عنصر خارج التسلسل الهرمي للمكون
  return ReactDOM.createPortal(
    <div className="modal-overlay">
      <div className="modal-content">
        <button onClick={onClose}>إغلاق</button>
        {children}
      </div>
    </div>,
    // تحديد عنصر DOM الهدف الذي سيتم إرسال المحتوى إليه
    document.getElementById('modal-root')
  );
}

<!-- في ملف HTML -->
<div id="root"></div> 
<div <            "root"></div> 
<div id="modal-root"></div> 

import React, { useState } from 'react';

function Counter() {
  // تهيئة متغير state مع قيمة أولية 0
  const [count, setCount] = useState(0);
  
  // زيادة العداد
  const increment = () => {
    setCount(count + 1);
  };
  
  // زيادة العداد باستخدام الدالة التحديثية (للقيم المعتمدة على الحالة السابقة)
  const safeIncrement = () => {
    setCount(prevCount => prevCount + 1);
  };
  
  return (
    <div>
      <p>العدد: {count}</p>
      <button onClick={increment}>زيادة</button>
      <button onClick={safeIncrement}>زيادة آمنة</button>
    </div>
  );
}

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

function DataFetcher() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  
  // يتم تنفيذه بعد الرندر واستكمال التغييرات على DOM
  useEffect(() => {
    // محاكاة طلب API
    const fetchData = async () => {
      try {
        const response = await fetch('https://api.example.com/data');
        const result = await response.json();
        setData(result);
      } catch (error) {
        console.error('Error fetching data:', error);
      } finally {
        setLoading(false);
      }
    };
    
    fetchData();
    
    // وظيفة التنظيف - تنفذ عند إزالة المكون (componentWillUnmount)
    return () => {
      // إلغاء الطلبات أو تنظيف الموارد
      console.log('تنظيف الموارد');
    };
  }, []); // مصفوفة التبعيات فارغة - تنفيذ useEffect مرة واحدة فقط
  
  if (loading) return <p>جاري التحميل...</p>;
  
  return (
    <div>
      <h2>البيانات:</h2>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

import React, { createContext, useContext, useState } from 'react';

// إنشاء السياق
const ThemeContext = createContext();

// مكون المزود - يوفر القيم للمكونات الفرعية
function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');
  
  const toggleTheme = () => {
    setTheme(theme === 'light' ? 'dark' : 'light');
  };
  
  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

// مكون فرعي يستخدم السياق
function ThemedButton() {
  // استخدام useContext للوصول إلى قيم السياق
  const { theme, toggleTheme } = useContext(ThemeContext);
  
  return (
    <button
      onClick={toggleTheme}
      style={{
        backgroundColor: theme === 'light' ? '#fff' : '#333',
        color: theme === 'light' ? '#333' : '#fff',
        padding: '10px',
        borderRadius: '4px'
      }}
    >
      تبديل النمط ({theme})
    </button>
  );
}

// استخدام المكونات
function App() {
  return (
    <ThemeProvider>
      <div>
        <h1>استخدام Context</h1>
        <ThemedButton />
      </div>
    </ThemeProvider>
  );
}

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

function TextInputWithFocusButton() {
  // إنشاء مرجع لعنصر input
  const inputRef = useRef(null);
  
  // تركيز حقل الإدخال عند النقر على الزر
  const focusInput = () => {
    inputRef.current.focus();
  };
  
  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={focusInput}>تركيز الإدخال</button>
    </div>
  );
}

function Counter() {
  const [count, setCount] = useState(0);
  
  // استخدام useRef لتخزين متغير لا يتسبب في إعادة الرندر عند تغييره
  const renderCount = useRef(1);
  
  useEffect(() => {
    // زيادة عدد مرات الرندر بعد كل تحديث
    renderCount.current = renderCount.current + 1;
  });
  
  return (
    <div>
      <p>العدد: {count}</p>
      <p>عدد مرات الرندر: {renderCount.current}</p>
      <button onClick={() => setCount(c => c + 1)}>زيادة</button>
    </div>
  );
}

import React, { useMemo, useState } from 'react';

function ExpensiveCalculation({ list, filter }) {
  // حساب مكلف - تطبيق فلتر على قائمة كبيرة
  const filteredList = useMemo(() => {
    console.log('تنفيذ الحساب المكلف...');
    
    return list.filter(item => item.includes(filter));
  }, [list, filter]); // إعادة الحساب فقط عند تغير القائمة أو الفلتر
  
  return (
    <div>
      <p>القائمة المفلترة:</p>
      <ul>
        {filteredList.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

function MemoExample() {
  const [filter, setFilter] = useState('');
  const [count, setCount] = useState(0);
  
  // قائمة كبيرة افتراضية
  const largeList = new Array(1000)
    .fill()
    .map((_,i) => `عنصر ${i + 1}`);
  
  return (
    <div>
      <input
        type="text"
        value={filter}
        onChange={e => setFilter(e.target.value)}
        placeholder="تصفية..."
      />
      
      <button onClick={() => setCount(c => c + 1)}>
        زيادة العداد: {count}
      </button>
      
      <ExpensiveCalculation list={largeList} filter={filter} />
    </div>
  );
}

import React, { useState, useCallback } from 'react';

// مكون فرعي يعتمد على دالة callback
const ChildComponent = React.memo(({ onClick }) => {
  console.log('تم رندر المكون الفرعي');
  return <button onClick={onClick}>انقر هنا</button>;
});

function ParentComponent() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('');
  
  // بدون useCallback: سيتم إنشاء هذه الدالة في كل مرة يتم رندر المكون
  // const handleClick = () => {
  //   console.log('تم النقر!');
  // };
  
  // مع useCallback: يتم إعادة استخدام نفس الدالة طالما لم تتغير المتغيرات المستخدمة فيها
  const handleClick = useCallback(() => {
    setCount(c => c + 1);
  }, []); // مصفوفة تبعيات فارغة - الدالة لا تعتمد على أي متغيرات خارجية
  
  return (
    <div>
      <p>العدد: {count}</p>
      <input
        value={text}
        onChange={e => setText(e.target.value)}
        placeholder="تغيير هذا لن يعيد إنشاء handleClick"
      />
      <ChildComponent onClick={handleClick} />
    </div>
  );
}

import { useState, useEffect } from 'react';

// Hook مخصص لاسترجاع البيانات من API
function useFetch(url) {
    const [data, setData] = useState(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);
  
    useEffect(() => {
      let isMounted = true;
      
      const fetchData = async () => {
        setLoading(true);
        
        try {
          const response = await fetch(url);
          
          if (!response.ok) {
            throw new Error(`فشل الطلب: ${response.status}`);
          }
          
          const result = await response.json();
          
          if (isMounted) {
            setData(result);
            setError(null);
          }
        } catch (err) {
          if (isMounted) {
            setError(err.message);
            setData(null);
          }
        } finally {
          if (isMounted) {
            setLoading(false);
          }
        }
      };
      
      fetchData();
      
      return () => {
        isMounted = false;
      };
    }, [url]);
    
    return { data, loading, error };
  }
  
  // Hook مخصص لإدارة حالة النموذج
  function useForm(initialValues = {}) {
    const [values, setValues] = useState(initialValues);
    const [errors, setErrors] = useState({});
    
    const handleChange = (e) => {
      const { name, value } = e.target;
      setValues(prevValues => ({
        ...prevValues,
        [name]: value
      }));
    };
    
    const reset = () => {
      setValues(initialValues);
      setErrors({});
    };
    
    return { values, errors, setErrors, handleChange, reset };
  }
  
  // مثال على استخدام الـ Hooks المخصصة
  function UserProfile({ userId }) {
    const { data, loading, error } = useFetch(`https://api.example.com/users/${userId}`);
    
    if (loading) return <p>جاري التحميل...</p>;
    if (error) return <p>خطأ: {error}</p>;
    
    return (
      <div>
        <h2>{data.name}</h2>
        <p>البريد الإلكتروني: {data.email}</p>
      </div>
    );
  }

import Link from 'next/link';
  
  function Navigation() {
    return (
      <nav>
        <ul>
          <li>
            <Link href="/">الرئيسية</Link>
          </li>
          <li>
            <Link href="/about">من نحن</Link>
          </li>
          <li>
            <Link href="/blog">المدونة</Link>
          </li>
          <li>
            <Link
              href={`/products/${productId}`}
              scroll={false} // إلغاء التمرير التلقائي للأعلى
              prefetch={false} // إلغاء التحميل المسبق
            >
              المنتج
            </Link>
          </li>
        </ul>
      </nav>
    );
  }

import Image from 'next/image';
  
  function ProductCard({ product }) {
    return (
      <div className="product-card">
        // استخدام مكون Image بدلًا من الـ img العادي
        <Image
          src={product.imageUrl}
          alt={product.name}
          width={500}
          height={300}
          quality={75} // جودة الصورة (افتراضي: 75)
          placeholder="blur" // إظهار نسخة مشوشة أثناء التحميل
          blurDataURL={product.blurDataUrl} // بيانات الصورة المشوشة
          priority={product.isFeatured} // أولوية التحميل للصور المهمة
        />
        <h3>{product.name}</h3>
        <p>{product.price}</p>
      </div>
    );
  }
  
  // استخدام الصور المستضافة خارجيًا
  function ExternalImage() {
    return (
      <Image
        src="https://example.com/image.jpg"
        alt="وصف الصورة"
        width={800}
        height={600}
        unoptimized // لتجاوز التحسين للصور الخارجية
      />
    );
  }

// في Pages Router (الطريقة القديمة)
  import Head from 'next/head';
  
  function ProductPage({ product }) {
    return (
      <>
        <Head>
          <title>{product.name} - متجرنا</title>
          <meta name="description" content={product.description} />
          <meta property="og:title" content={`${product.name} - متجرنا`} />
          <meta property="og:image" content={product.imageUrl} />
          <link rel="canonical" href={`https://example.com/products/${product.id}`} />
        </Head>
        <div>
          // محتوى الصفحة
        </div>
      </>
    );
  }
  
  // في App Router (الطريقة الجديدة)
  import { Metadata } from 'next';
  
  // تحديد metadata للصفحة (يتم تنفيذه على الخادم)
  export async function generateMetadata({ params }) {
    const product = await getProduct(params.id);
    
    return {
      title: `${product.name} - متجرنا`,
      description: product.description,
      openGraph: {
        title: `${product.name} - متجرنا`,
        images: [product.imageUrl],
      },
    };
  }
  
  export default function ProductPage({ params }) {
    // محتوى الصفحة
  }

import Script from 'next/script';
  
  function AnalyticsPage() {
    return (
      <>
        // تحميل Google Analytics
        <Script
          src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"
          strategy="afterInteractive" // تحميل بعد جعل الصفحة تفاعلية
          onLoad={() => console.log('تم تحميل Google Analytics')}
        />
        
        // تنفيذ كود inline
        <Script id="analytics-config" strategy="afterInteractive">
          {`
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', 'GA_MEASUREMENT_ID');
          `}
        </Script>
        
        // محتوى الصفحة
        <div>
          <h1>الصفحة الرئيسية</h1>
        </div>
      </>
    );
  }

// app/page.tsx - الصفحة الرئيسية "/"
  export default function HomePage() {
    return <h1>الصفحة الرئيسية</h1>;
  }
  
  // app/blog/page.tsx - صفحة المدونة "/blog"
  export default function BlogPage() {
    return <h1>المدونة</h1>;
  }
  
  // app/blog/[slug]/page.tsx - صفحة مقال محدد "/blog/article-1"
  export default function BlogPostPage({ params }) {
    return <h1>مقال: {params.slug}</h1>;
  }
  
  // app/dashboard/layout.tsx - تخطيط مشترك لكل صفحات لوحة التحكم
  export default function DashboardLayout({ children }) {
    return (
      <div className="dashboard-layout">
        <nav>قائمة لوحة التحكم</nav>
        <main>{children}</main>
      </div>
    );
  }

// pages/index.js - الصفحة الرئيسية "/"
  export default function HomePage() {
    return <h1>الصفحة الرئيسية</h1>;
  }
  
  // pages/blog/index.js - صفحة المدونة "/blog"
  export default function BlogPage() {
    return <h1>المدونة</h1>;
  }
  
  // pages/blog/[slug].js - صفحة مقال محدد "/blog/article-1"
  export default function BlogPostPage({ query }) {
    const { slug } = query;
    return <h1>مقال: {slug}</h1>;
  }
  
  // pages/_app.js - مكون التخطيط العام لكل الصفحات
  export default function MyApp({ Component, pageProps }) {
    return (    <div className="main-layout">
    <header>الترويسة العامة</header>
    <Component {...pageProps} />
    <footer>التذييل العام</footer>
  </div>
);
}

import { useRouter } from 'next/router'; // للاستخدام مع Pages Router
import { useRouter } from 'next/navigation'; // للاستخدام مع App Router
import Link from 'next/link';

function NavigationExample() {
const router = useRouter();

// التنقل البرمجي
const handleNavigate = () => {
  router.push('/dashboard');
};

const handleNavigateWithQuery = () => {
  router.push({
    pathname: '/products',
    query: { category: 'electronics', sort: 'price' },
  });
};

const handleBackNavigation = () => {
  router.back();
};

return (
  <div>
    // تنقل بواسطة المستخدم باستخدام Link
    <nav>
      <Link href="/">الرئيسية</Link>
      <Link href="/about">من نحن</Link>
    </nav>
    
    // أزرار للتنقل البرمجي
    <button onClick={handleNavigate}>
      الانتقال إلى لوحة التحكم
    </button>
    
    <button onClick={handleNavigateWithQuery}>
      عرض المنتجات الإلكترونية
    </button>
    
    <button onClick={handleBackNavigation}>
      العودة
    </button>
  </div>
);
}

// في App Router: app/dashboard/layout.tsx
export default function DashboardLayout({
children, // محتوى الصفحات الفرعية
}) {
return (
  <div className="dashboard-container">
    <aside className="sidebar">
      <nav>
        <ul>
          <li><Link href="/dashboard">الرئيسية</Link></li>
          <li><Link href="/dashboard/analytics">التحليلات</Link></li>
          <li><Link href="/dashboard/settings">الإعدادات</Link></li>
        </ul>
      </nav>
    </aside>
    
    <main className="content">
      {children}
    </main>
  </div>
);
}