React أم Angular أم Vue؟ دليل شامل لاختيار Framework وتعلم Components وProps وState وHooks

1. أتعلم React ولا Angular؟

جدول مقارنة: React ضد Angular

2. React ولا Vue؟

جدول مقارنة: React ضد Vue

3. Angular ولا React؟ (مقارنة عملية)

متى تختار React؟

• إذا كنت تريد مرونة أكبر في بناء هيكل مشروعك.
• إذا كنت تفضل اختيار الـ Libraries والأدوات التي تناسبك (Mix and Match).
• إذا كنت ترغب في التركيز فقط على الـ UI وتكوين المكونات (Components).
• إذا كنت تستهدف سوق العمل الأوسع الذي يطلب React بكثافة.

متى تختار Angular؟

• إذا كنت تعمل على تطبيقات ضخمة (Enterprise) ومعقدة.
• إذا كنت تفضل Framework متكامل به كل شيء جاهز (Structure واضح).
• إذا كنت تحب العمل بمنظومة منظمة تعتمد بشدة على Dependency Injection و TypeScript و OOP.

4. يعني إيه Component؟

بدل ما تكتب صفحة كبيرة كلها مرة واحدة في ملف واحد، بنقسم الواجهة إلى أجزاء صغيرة (Blocks).

أمثلة على Components:

• Navbar (الشريط العلوي)
• Button (زر)
• Card (بطاقة منتج)
• Footer (نهاية الصفحة)

مثال مبسط لـ Component في React:

// Navbar Component
function Navbar() {
  return (
    <nav>
      <h1>موقعي</h1>
      <ul>
        <li>الرئيسية</li>
        <li>عن الموقع</li>
      </ul>
    </nav>
  );
}

export default Navbar;

هذا الـ Component يمكننا استخدامه (استدعاءه) في أي مكان في التطبيق أكثر من مرة!

5. يعني إيه Props؟

الـ Props تكون Read-Only، يعني الابن لا يمكنه تعديلها، بل يعرضها فقط.

مثال على إنشاء Component يستقبل Props:

function User({ name }) {
  return <h2>Hello {name}</h2>;
}

كيفية إرسال البيانات (Props):

// Parent Component
function App() {
  return (
    <div>
      <User name="Ahmed" />
      <User name="Sara" />
    </div>
  );
}

النتيجة: سيطبع "Hello Ahmed" و "Hello Sara". الكود منظم وقابل لإعادة الاستخدام بسهولة.

6. يعني إيه State؟

مقارنة سريعة بين Props و State

7. يعني إيه Hook؟

لماذا ظهرت؟

في الماضي، كنا نكتب Components باستخدام Classes لتفعيل الـ State. مع إصدار React 16.8، ظهرت الـ Hooks لتسهيل الكود، تقليل حجمه، وتسهيل إعادة استخدام المنطق (Logic).

أمثلة لأشهر الـ Hooks:

• useState: لإدارة الحالة (State).
• useEffect: لتنفيذ تأثيرات جانبية (Side Effects) مثل جلب البيانات.
• useContext: للوصول إلى بيانات عامة في التطبيق بدون تمرير Props.
• useRef: للوصول المباشر لعناصر الـ DOM.
• useMemo و useCallback: لتحسين الأداء (Performance).

يمكنك أيضاً إنشاء Custom Hooks لتغليف وتكرار منطق برمجي خاص بك.

8. إيه هو useState؟

مثال لعمل عداد (Counter) بسيط:

import { useState } from 'react';

function Counter() {
  // تعريف State تبدأ قيمتها بـ 0
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>عدد النقرات: {count}</p>
      {/* عند الضغط، نستدعي دالة setCount لتحديث القيمة */}
      <button onClick={() => setCount(count + 1)}>
        اضغط هنا
      </button>
    </div>
  );
}

شرح الكود:

• count: المتغير الذي يحمل القيمة الحالية (هنا صفر في البداية).
• setCount: الدالة التي نستخدمها لتغيير القيمة (تحديث الـ State).
• 0: القيمة الافتراضية الأولية للـ State.

عند تحديث الـ State بـ setCount، تقوم React فوراً بعمل Re-render للصفحة وتظهر القيمة الجديدة للمستخدم.

9. إيه هو useEffect؟

التركيبة الأساسية (Syntax):

useEffect(() => {
  // الكود الذي سيعمل هنا (Side Effect)
}, []); // مصفوفة التبعيات (Dependency Array)

الفرق بين مصفوفات التبعيات (Dependency Array):

1. بدون مصفوفة:

useEffect(() => {
  // يعمل مع كل Render و Re-render يحدث في الـ Component! (احذر منه)
});

2. مصفوفة فارغة []:

useEffect(() => {
  // يعمل مرة واحدة فقط عند بداية ظهور الـ Component للمرة الأولى (Mount).
}, []);

3. مصفوفة تحتوي على State:

useEffect(() => {
  // يعمل المرة الأولى، ثم يعمل مرة أخرى فقط إذا تغيرت قيمة count
}, [count]);

10. إزاي أجيب Data من API في React؟

الـ Flow الأساسي:

React Component → API Request → Server → Response (JSON) → State Update → UI Update

مثال عملي لجلب مستخدمين:

import { useState, useEffect } from 'react';

function UsersList() {
  const [users, setUsers] = useState([]);      // Data State
  const [loading, setLoading] = useState(true); // Loading State
  const [error, setError] = useState(null);     // Error State

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then(response => {
        if (!response.ok) throw new Error("Network Error!");
        return response.json();
      })
      .then(data => {
        setUsers(data);      // حفظ البيانات
        setLoading(false);   // إيقاف التحميل
      })
      .catch(err => {
        setError(err.message); // حفظ الخطأ
        setLoading(false);
      });
  }, []); // يعمل مرة واحدة فقط

  if (loading) return <p>جاري التحميل...</p>;
  if (error) return <p>حدث خطأ: {error}</p>;

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

11. إزاي أعمل Login في React؟

ملاحظات هامة جداً (Best Practices):

• التحقق (Authentication) الحقيقي يتم في الـ Backend: الـ Front-End وظيفته فقط إرسال البيانات واستقبال الـ Token وعرض الواجهة المناسبة.
• لا تقم بحفظ كلمات المرور (Passwords) في الكود (Front-end)!
• Frontend Validation: تأكد أن الإيميل مكتوب بصيغة صحيحة قبل الإرسال (لتحسين تجربة المستخدم وتقليل الضغط على السيرفر).

الـ Flow الخاص بالـ Login:

1. المستخدم يكتب الإيميل والباسورد في فورم (State).
2. عند الضغط على Submit، يتم عمل POST Request للـ API.
3. الـ API يتأكد من صحة البيانات ويرد بـ Token.
4. نحفظ الـ Token في localStorage ونغير State المستخدم إلى (مسجل الدخول).
5. نوجه المستخدم لصفحة الـ Dashboard المخصصة للأعضاء (Protected Route).

12. إزاي أعمل Routing في React؟

مفاهيم أساسية في React Router (V6):

• Router: الإطار المحيط بالتطبيق لتفعيل ميزة التوجيه.
• Routes / Route: لتحديد أي Component يظهر مع أي رابط.
• Link: يُستخدم بدلاً من وسوم الـ <a> التقليدية للانتقال بدون Refresh.

مثال منطقي للمسارات:

// هيكل توجيه بسيط
<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
  <Route path="/products" element={<Products />} />
  <Route path="/login" element={<Login />} />
  
  {/* Protected Route (مثال لمسار محمي) */}
  <Route path="/dashboard" element={
    isAuthenticated ? <Dashboard /> : <Navigate to="/login" />
  } />
</Routes>

13. إزاي أرفع React Project على Vercel؟

الخطوات العملية:

1. تأكد أن مشروعك يعمل بنجاح على جهازك (بدون Errors).
2. ارفع المشروع على حسابك في GitHub كـ Repository.
3. سجل الدخول في موقع Vercel بحساب GitHub.
4. اضغط على Add New... ثم Project.
5. اختر الـ Repository الخاصة بك واضغط Import.
6. راجع إعدادات الـ Build Settings. (إذا استخدمت Vite، Vercel ستتعرف عليه تلقائياً كـ npm run build والـ Output dist. إذا استخدمت CRA ستكون build).
7. اضغط Deploy، وانتظر ثواني.
8. مبارك! ستحصل على رابط (Domain) مخصص لمشروعك يمكنك مشاركته.

💡 ميزة الـ Continuous Deployment: أي تعديل (Push) تقوم برفعه مستقبلاً على GitHub، ستقوم Vercel بتحديث الموقع تلقائياً!

مشروع React للمبتدئين: User Dashboard

عشان نطبق اللي اتعلمناه، ممكن تبني مشروع عملي شامل: Dashboard لإدارة المستخدمين.

المشروع يحتوي على:

• Routing: صفحات Login, Register, و Dashboard.
• Protected Routes: منع الدخول للـ Dashboard إلا بعد الـ Login.
• Components: تقسيم الواجهة إلى (Navbar, Sidebar, UserCard).
• API Fetching: جلب قائمة مستخدمين وهميين باستخدام API (مثل JSONPlaceholder).
• State & Hooks: استخدام useState لإدارة حالة الـ Loading والأخطاء، و useEffect لجلب البيانات.

الهيكل المقترح للمشروع (Architecture):

src/
├── assets/          # الصور والملفات
├── components/      # المكونات المشتركة (Navbar, Button)
├── pages/           # الصفحات الكاملة (Login, Dashboard)
├── hooks/           # Custom Hooks إن وجدت
├── services/        # ملفات التعامل مع الـ API
├── App.jsx          # الملف الرئيسي والروابط
└── main.jsx         # نقطة البداية

React vs Angular vs Vue – القرار النهائي

إليك هذا الجدول التلخيصي لتسهيل القرار:

الجدول ليس قاعدة ثابتة، بل توصية مبنية على اتجاهات السوق. كمبتدئ، React هي الخيار الأكثر أماناً والأكثر طلباً.

ماذا أتعلم بعد React؟

تعلم الأداة نفسها ليس النهاية، بل هو بداية الطريق لاحتراف الـ Front-End. إليك المسار المقترح:

الأسئلة الشائعة (FAQ)