الدرس 1: مقدمة React | المستوى الرابع

🎯 ما ستتعلمه في هذا الدرس

فهم React ولماذا تُستخدم في 90% من مشاريع الويب الحديثة
إنشاء أول مشروع React على جهازك في 5 دقائق
كتابة مكونات React باستخدام JSX
فهم الفرق بين Props و State بأمثلة عملية
تجنب الأخطاء الشائعة التي يقع فيها المبتدئين

📖 ما هو React ولماذا يجب تعلمه؟

React هي مكتبة JavaScript مفتوحة المصدر طورها فريق فيسبوك (Meta حالياً) عام 2013. لكن السؤال المهم: لماذا React تحديداً؟

في بداية مسيرتي كمطور ويب، كنت أبني المواقع باستخدام JavaScript vanilla (الخام). كلما زاد حجم المشروع، زادت صعوبة إدارة الكود. تخيل موقع تجارة إلكترونية يحتوي على 50 صفحة، كل صفحة تحتاج تحديثات متكررة للسلة والأسعار والمخزون. مع JavaScript العادي، تضطر لتعديل DOM يدوياً في كل مرة — وهذه عملية بطيئة وعرضة للأخطاء.

React حلت هذه المشكلة بمفهومين أساسيين:

المكونات (Components): تقسم الواجهة إلى قطع صغيرة مستقلة، كل قطعة مسؤولة عن جزء محدد.
Virtual DOM: تحديث ذكي يغير فقط ما يحتاج تغيير، بدلاً من إعادة رسم الصفحة كاملة.

وفقاً لمسح Stack Overflow 2025، React هي المكتبة الأكثر شيوعاً بين مطوري الويب، تستخدمها شركات عملاقة مثل Netflix و Airbnb و Instagram. تعلم React يعني فتح باب وظائف متعددة ورواتب تبدأ من 15,000 جنيه مصري للمبتدئين.

🎯 6 مميزات تجعل React الخيار الأول للمطورين

1. Virtual DOM — السرعة الحقيقية

DOM (Document Object Model) هو تمثيل شجري لعناصر الصفحة في المتصفح. كل عملية تعديل على DOM الحقيقي تستغرق وقتًا لأن المتصفح يعيد حساب التصميم (Layout) والرسم (Paint).

React تبتكر نسخة افتراضية من DOM في ذاكرة JavaScript. عند تغيير البيانات:

React تنشئ نسخة جديدة من Virtual DOM
تقارنها بالنسخة القديمة باستخدام خوارزمية Diffing
تحدد الحد الأدنى من التغييرات المطلوبة
تطبق هذه التغييرات فقط على DOM الحقيقي

مثال واقعي: تطبيق دردشة يستقبل رسالة جديدة. بدون React، المتصفح يعيد رسم قائمة الرسائل كاملة (100 رسالة). مع React، يضيف الرسالة الجديدة فقط — فرق أداء هائل في التطبيقات الكبيرة.

2. Components — إعادة الاستخدام الذكية

تخيل بناء موقع فيسبوك. الزر "Like" يظهر في المنشورات والتعليقات والصور. بدلاً من كتابة كود الزر 50 مرة، تكتبه مرة واحدة كـ Component وتستخدمه في كل مكان:

// مكون زر Like — قابل لإعادة الاستخدام في أي مكان
function LikeButton({ count, onClick }) {
  return (
    <button className="like-btn" onClick={onClick}>
      ❤️ {count} إعجابات
    </button>
  );
}

// استخدامه في منشور
<LikeButton count={post.likes} onClick={handleLike} />

// استخدامه في تعليق
<LikeButton count={comment.likes} onClick={handleCommentLike} />
        

3. One-way Data Flow — تدفق بيانات واضح

في React، البيانات تتدفق من الأعلى للأسفل (Parent → Child). هذا يجعل تتبع الأخطاء سهلاً. إذا ظهرت بيانات خاطئة، تعرف مصدرها مباشرة — ليس مثل Angular أو Vue حيث البيانات تتدفق في اتجاهين وتسبب صعوبة في التتبع.

4. JSX — HTML داخل JavaScript

JSX ليست HTML، بل هي صيغة (Syntax Extension) تسمح بكتابة شكل يشبه HTML داخل JavaScript. المترجم (Babel) يحول JSX إلى استدعاءات دالة React.createElement().

5. Hooks — إدارة الحالة بدون Classes

قبل 2019، كان المطورون يستخدمون Classes لإدارة الحالة. Hooks (مثل useState و useEffect) سمحت باستخدام State في Functions، مما قلل الكود بنسبة 40% وأبسط التعلم.

6. مجتمع ضخم ونظام بيئي غني

مكتبات مثل React Router (للتنقل)، Redux (لإدارة الحالة)، Material-UI (للتصميم) — كلها متاحة مجاناً. أي مشكلة تواجهها، ستجد حلاً على Stack Overflow.

⚡ إنشاء أول مشروع React — خطوة بخطوة

الطريقة الأولى: Create React App (الأسهل للمبتدئين)

# 1. تثبيت أداة إنشاء المشاريع
npx create-react-app my-first-app

# 2. الدخول لمجلد المشروع
cd my-first-app

# 3. تشغيل السيرفر المحلي
npm start

# النتيجة: يفتح المتصفح تلقائياً على http://localhost:3000
        

الطريقة الثانية: Vite (الأسرع للمشاريع الحقيقية)

# Vite أسرع 10 أضعاف في التحميل الأولي
npm create vite@latest my-first-app -- --template react
cd my-first-app
npm install
npm run dev
        

💡 نصيحة من الخبرة: استخدم Create React App للتعلم فقط. في المشاريع الحقيقية، Vite أو Next.js أفضل لأنها أسرع وأخف. Create React App أصبحت بطيئة في المشاريع الكبيرة.

📝 بناء أول مكون React

لنبني مكون "بطاقة ترحيب" بسيطة. هذا المكون يستقبل اسم المستخدم ويعرض رسالة ترحيب:

// App.js — المكون الرئيسي
import React from 'react';

function WelcomeCard({ userName, userRole }) {
  // Props: userName و userRole يأتيان من المكون الأب
  return (
    <div className="welcome-card">
      <img src="/avatar.png" alt="صورة المستخدم" />
      <h2>مرحباً {userName}!</h2>
      <p>دورك: {userRole}</p>
      <button>بدء التعلم</button>
    </div>
  );
}

function App() {
  return (
    <div>
      <WelcomeCard 
        userName="أحمد" 
        userRole="مطور مبتدئ" 
      />
      <WelcomeCard 
        userName="فاطمة" 
        userRole="مصممة واجهات" 
      />
    </div>
  );
}

export default App;
        

🎨 JSX بالتفصيل — قواعد الكتابة الصحيحة

JSX تبدو مثل HTML لكنها ليست HTML. هناك قواعد يجب احترامها:

// ✅ 1. عنصر JSX واحد في return
// يجب أن يحتوي return على عنصر أب واحد (أو Fragment)
function Valid() {
  return (
    <>  // Fragment فارغ
      <h1>عنوان</h1>
      <p>نص</p>
    </>
  );
}

// ✅ 2. تعبيرات JavaScript داخل أقواس معقوفة {}
const user = { name: 'أحمد', age: 25 };
const element = (
  <div>
    <h1>مرحباً {user.name}!</h1>
    <p>عمرك: {user.age} سنة</p>
    <p>السنة القادمة: {user.age + 1}</p>
  </div>
);

// ✅ 3. className بدلاً من class
// (class كلمة محجوزة في JavaScript)
const box = <div className="container main-box">...</div>;

// ✅ 4. for يصبح htmlFor
<label htmlFor="email">البريد الإلكتروني</label>

// ✅ 5. الشروط والحلقات
const isLoggedIn = true;
const messages = ['مرحباً', 'كيف حالك؟'];

const app = (
  <div>
    // شرط if-else
    {isLoggedIn ? (
      <div>
        <h1>مرحباً بك مرة أخرى</h1>
        // حلقة map
        {messages.map((msg, index) => (
          <p key={index}>{msg}</p>
        ))}
      </div>
    ) : (
      <h1>يرجى تسجيل الدخول</h1>
    )}
  </div>
);
        

⚠️ خطأ شائع: لا تنسى خاصية key في الحلقات! React تستخدمها لتحديد العناصر المتغيرة. بدونها، ستظهر تحذيرات في Console وقد يتأثر الأداء.

🔄 Virtual DOM — كيف يعمل تحت الغطاء؟

لنفهم Virtual DOM بمثال عملي. تخبر تطبيق قائمة مهام (To-Do List) يحتوي على 100 مهمة. المستخدم يضيف مهمة جديدة:

بدون React (DOM المباشر):

المتصفح يحذف قائمة المهام كاملة من DOM
يعيد إنشاء 101 عنصر (100 القديمة + 1 الجديدة)
يعيد حساب التصميم (Layout) للصفحة كاملة
يعيد رسم (Paint) كل العناصر
الوقت المستغرق: ~50ms (بطيء على الموبايل)

مع React (Virtual DOM):

React تنشئ Virtual DOM جديد في الذاكرة
تقارن مع Virtual DOM القديم (Diffing Algorithm)
تكتشف: "عنصر واحد جديد فقط"
تطبق تغيير واحد فقط على DOM الحقيقي
الوقت المستغرق: ~2ms (أسرع 25 مرة!)

الخلاصة: Virtual DOM ليست "سحر" — بل هي خوارزمية ذكية تقلل العمليات البطيئة على DOM. في التطبيقات الكبيرة (مثل فيسبوك أو تويتر)، هذا الفرق يعني تجربة مستخدم سلسة بدون تقطيع.

⚙️ Props vs State — الفرق الأساسي

هذا الفرق يُربك 80% من المبتدئين. دعنا نوضحه بمثال واقعي:

مثال: تطبيق متجر إلكتروني

// ProductCard.js — المكون يستقبل بيانات المنتج
function ProductCard({ product, onAddToCart }) {
  // Props: بيانات تأتي من الخارج (ثابتة)
  const { name, price, image } = product;
  
  // State: بيانات داخلية يمكن تغييرها
  const [quantity, setQuantity] = React.useState(1);

  return (
    <div className="product-card">
      <img src={image} alt={name} />
      <h3>{name}</h3>
      <p>{price} جنيه</p>
      
      <div className="quantity">
        <button onClick={() => setQuantity(q => q - 1)}>-</button>
        <span>{quantity}</span>
        <button onClick={() => setQuantity(q => q + 1)}>+</button>
      </div>
      
      <button onClick={() => onAddToCart(product, quantity)}>
        أضف للسلة
      </button>
    </div>
  );
}
        

الخاصية	Props	State
المصدر	من المكون الأب (Parent)	داخل المكون نفسه
قابلية التعديل	❌ ثابتة (Read-only)	✅ قابلة للتغيير
التأثير على الرسم	تغيير Props يعيد رسم المكون	تغيير State يعيد رسم المكون
مثال	اسم المنتج، السعر، الصورة	الكمية، حالة التحميل، نص البحث

🌟 لماذا React هي المهارة الأكثر طلباً في 2026؟

بعد 13 سنة من إطلاقها، React لا تزال تتصدر. السبب ليس "الموضة" — بل الأرقام:

وظائف: 40,000+ وظيفة شاغرة على LinkedIn تتطلب React
رواتب: في مصر، مطور React مبتدئ يبدأ من 12,000-18,000 جنيه. محترف: 30,000+
مرونة: React Native تستخدم نفس المفاهيم لتطبيقات الموبايل (iOS + Android)
Next.js: إطار عمل مبني على React يضيف Server-Side Rendering وSEO — يستخدمه TikTok وNetflix

من تجربتي الشخصية: أول مشروع React عملته كان موقع لعرض منتجات. استغرقت 3 أيام للتعلم وأسبوع للبناء. المشروع كان بسيط — لكنه فتح لي باب أول وظيفة كمطور Frontend. المفتاح: لا تتعلم React نظرياً فقط، بل ابدأ بمشروع حقيقي حتى لو صغير.

🚀 تمرين عملي: بناء بطاقة ملف شخصي

قبل الانتقال للدرس التالي، جرب بناء هذا المكون بنفسك:

// التحدي: أنشئ مكون ProfileCard يعرض:
// - صورة المستخدم
// - الاسم والوظيفة (Props)
// - عدد المتابعين (State — يبدأ من 0)
// - زر "متابعة" يزيد العدد

function ProfileCard({ name, job }) {
  const [followers, setFollowers] = React.useState(0);
  
  return (
    <div className="profile-card">
      // اكتب الكود هنا...
    </div>
  );
}
        

📝 تلميح: استخدم onClick={() => setFollowers(f => f + 1)} للزيادة. لا تكتب setFollowers(followers + 1) مباشرة — استخدم دالة لضمان القيمة الصحيحة.

📚 الخلاصة والخطوات التالية

في هذا الدرس تعلمت:

✅ React هي مكتبة (ليس إطار عمل) لبناء واجهات المستخدم
✅ Virtual DOM يجعل التحديثات سريعة وذكية
✅ Components تقسم الواجهة إلى قطع صغيرة قابلة لإعادة الاستخدام
✅ JSX تسمح بكتابة HTML داخل JavaScript مع قواعد خاصة
✅ Props ثابتة (من الأب) وState ديناميكية (داخل المكون)

الدرس القادم: سنتعمق في Hooks (useState, useEffect) ونبني مكونات تفاعلية حقيقية مثل عداد زمني وقائمة مهام. حضّر مشروعك الصغير — أفضل طريقة للتعلم هي التطبيق!

🎯 مهمة قبل الدرس القادم: أنشئ مشروع React باستخدام Vite، وابنِ مكون WelcomeCard يستقبل اسمك ووظيفتك كـ Props. شاركه معنا على واتساب 01229068356 وسنراجع الكود معك!

⚛️ مقدمة في React: بناء واجهات المستخدم التفاعلية