ورقة غش React.js

React هي مكتبة جافا سكريبت الشهيرة لبناء واجهات المستخدم القائمة على المكونات المعيارية القابلة لإعادة الاستخدام.

مكونات الدوال وبناء جملة JSX

import React, { useState } from 'react';

export function Greeting({ name, role = "Member" }) {
  return (
    <div className="card">
      <h2>Hello, {name}!</h2>
      <span className="badge">{role}</span>
    </div>
  );
}

خطافات React الأساسية (Core Hooks)

`useState`

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

// تحديث الحالة وظيفيا (يضمن الحصول على أحدث حالة)
setCount((prev) => prev + 1);

`useEffect`

يتعامل مع التأثيرات الجانبية مثل جلب البيانات من الشبكة، الاشتراكات وتعديلات DOM:

useEffect(() => {
  const handleResize = () => setWindowWidth(window.innerWidth);
  window.addEventListener('resize', handleResize);

  // دالة التنظيف تعمل عند إلغاء التحميل أو قبل إعادة تشغيل التأثير
  return () => {
    window.removeEventListener('resize', handleResize);
  };
}, []); // مصفوفة الاعتمادات الفارغة تعني التشغيل مرة واحدة فقط عند التحميل

`useContext`

استهلاك بيانات السياق المشتركة دون الحاجة لتمرير الخصائص عبر طبقات متعددة (Prop Drilling):

const ThemeContext = React.createContext('light');

function Display() {
  const theme = useContext(ThemeContext);
  return <div className={`theme-${theme}`}>Active Theme</div>;
}

`useMemo و useCallback`

تحسينات الأداء للعمليات الحسابية المكلفة وضمان تطابق المراجع:

// حفظ نتيجة عملية حسابية مكلفة
const filteredUsers = useMemo(() => {
  return users.filter((u) => u.score > threshold);
}, [users, threshold]);

// حفظ تعريف دالة رد الاتصال
const handleRemove = useCallback((id) => {
  setItems((prev) => prev.filter((item) => item.id !== id));
}, []);

`useRef`

تخزين قيم قابلة للتغيير عبر مرات إعادة التصيير دون إطلاق إعادة تصيير المكون:

const inputRef = useRef(null);

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

return <input ref={inputRef} />;

الخطافات المخصصة (Custom Hooks)

استخراج منطق الحالة القابل لإعادة الاستخدام في دوال مخصصة تبدأ بكلمة use:

function useOnlineStatus() {
  const [isOnline, setIsOnline] = useState(navigator.onLine);

  useEffect(() => {
    const handleOnline = () => setIsOnline(true);
    const handleOffline = () => setIsOnline(false);

    window.addEventListener('online', handleOnline);
    window.addEventListener('offline', handleOffline);

    return () => {
      window.removeEventListener('online', handleOnline);
      window.removeEventListener('offline', handleOffline);
    };
  }, []);

  return isOnline;
}

البوابات (Portals) والأجزاء (Fragments)

// أجزاء Fragments دون عناصر حاوية إضافية في DOM
return (
  <>
    <Header />
    <MainContent />
  </>
);

// التصيير داخل حاوية DOM خارجية
import { createPortal } from 'react-dom';

function Modal({ children }) {
  return createPortal(
    <div className="modal-overlay">{children}</div>,
    document.getElementById('modal-root')
  );
}