أساسيات React.js

مقدمة إلى React وتطوير الواجهات الحديثة

18 دقيقة الدرس 1 من 40

ما هو React؟

React هي مكتبة JavaScript قوية وتوضيحية لبناء واجهات المستخدم، تم تطويرها وصيانتها بواسطة Facebook (Meta). تم إطلاق React لأول مرة في عام 2013، وقد أحدثت ثورة في كيفية بناء المطورين لتطبيقات الويب الحديثة من خلال تقديم معمارية قائمة على المكونات وعرض فعال من خلال Virtual DOM.

تعريف أساسي: React ليست إطار عمل كامل مثل Angular أو Vue؛ إنها مكتبة تركز بشكل خاص على طبقة العرض ("V" في MVC). هذا النهج المركز يجعل React مرنة ويسمح لك بدمجها مع مكتبات أخرى حسب الحاجة.

تتيح لك React بناء واجهات مستخدم معقدة وتفاعلية من قطع صغيرة ومعزولة من الكود تسمى المكونات. هذه المكونات قابلة لإعادة الاستخدام وسهلة الصيانة ويمكنها إدارة حالتها الخاصة.

مفهوم Virtual DOM

إحدى أكثر ميزات React ابتكاراً هي Virtual DOM (VDOM). فهم هذا المفهوم أمر بالغ الأهمية لتقدير مزايا الأداء في React:

كيف يعمل Virtual DOM: 1. ينشئ React تمثيلاً افتراضياً لواجهة المستخدم في الذاكرة 2. عند تغيير الحالة، ينشئ React شجرة Virtual DOM جديدة 3. يقارن React (diffs) الشجرة الجديدة مع الشجرة السابقة 4. يحسب React الحد الأدنى من التغييرات المطلوبة 5. يحدث React فقط تلك الأجزاء المحددة من DOM الحقيقي
ميزة الأداء: التعامل المباشر مع DOM بطيء لأنه يؤدي إلى إعادة تدفق وإعادة رسم المتصفح. Virtual DOM في React يجمع التغييرات ويقلل من تحديثات DOM الفعلية، مما يؤدي إلى أداء أفضل بكثير.

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

معمارية قائمة على المكونات

يتم بناء تطبيقات React باستخدام المكونات - قطع مستقلة وقابلة لإعادة الاستخدام من واجهة المستخدم. فكر في المكونات كعناصر HTML مخصصة مع منطقها وتصميمها الخاص.

<!-- النهج التقليدي HTML --> <div class="user-card"> <img src="avatar.jpg" alt="User"> <h3>محمد أحمد</h3> <p>مطور برمجيات</p> </div> <!-- نهج مكون React --> <UserCard name="محمد أحمد" role="مطور برمجيات" avatar="avatar.jpg" />

فوائد المعمارية القائمة على المكونات:

  • إعادة الاستخدام: اكتب مرة واحدة، استخدم في كل مكان. يمكن استخدام مكون Button في جميع أنحاء التطبيق.
  • سهولة الصيانة: يدير كل مكون الكود الخاص به، مما يسهل تصحيح الأخطاء والتحديثات.
  • قابلية الاختبار: يمكن اختبار المكونات بشكل منفصل، مما يحسن جودة الكود.
  • قابلية التركيب: يمكن دمج المكونات الصغيرة لإنشاء واجهات مستخدم معقدة.
  • فصل الاهتمامات: يتعامل كل مكون مع جزء محدد من الوظائف.
// مثال: بناء صفحة من المكونات <App> <Header> <Logo /> <Navigation /> <SearchBar /> </Header> <MainContent> <Sidebar> <UserProfile /> <MenuList /> </Sidebar> <ContentArea> <PostList> <Post /> <Post /> <Post /> </PostList> </ContentArea> </MainContent> <Footer /> </App>

نظام React البيئي

React محاطة بنظام بيئي غني من الأدوات والمكتبات التي توسع قدراتها:

نظام React البيئي الأساسي: 1. React DOM: يعرض مكونات React على DOM في المتصفح 2. React Native: بناء تطبيقات الهاتف المحمول لـ iOS و Android 3. Create React App: أداة رسمية لإعداد مشاريع React 4. Next.js: إطار عمل للعرض من جانب الخادم والمواقع الثابتة 5. React Router: التنقل والتوجيه لتطبيقات الصفحة الواحدة 6. Redux/Zustand: مكتبات إدارة الحالة 7. React Query: جلب البيانات والتخزين المؤقت 8. Styled Components/Emotion: حلول CSS-in-JS 9. React Testing Library: أدوات الاختبار 10. Vite: أداة بناء سريعة للغاية
مهم: لا تحتاج إلى تعلم كل هذه الأدوات دفعة واحدة! ابدأ بـ React الأساسية، ثم استكشف تدريجياً أدوات النظام البيئي حسب متطلبات مشاريعك.

لماذا تختار React؟

أصبحت React واحدة من أكثر مكتبات الواجهة الأمامية شعبية لعدة أسباب مقنعة:

1. البرمجة التوضيحية

تستخدم React نهجاً توضيحياً - تصف كيف يجب أن تبدو واجهة المستخدم، وتتعامل React مع الكيفية:

// حتمي (JavaScript التقليدي) const button = document.createElement('button'); button.textContent = 'انقر هنا'; button.addEventListener('click', handleClick); document.body.appendChild(button); // توضيحي (React) <button onClick={handleClick}> انقر هنا </button>

2. مجتمع كبير وسوق العمل

  • أكثر من 200,000+ حزمة متعلقة بـ React على npm
  • تستخدمها Facebook و Instagram و Netflix و Airbnb و Uber والآلاف غيرها
  • طلب كبير على مطوري React في سوق العمل
  • وثائق شاملة ودروس وإجابات على Stack Overflow

3. تعلم مرة واحدة، اكتب في أي مكان

يعمل نموذج مكونات React عبر منصات مختلفة:

  • الويب: React DOM لتطبيقات الويب التقليدية
  • الهاتف المحمول: React Native لتطبيقات iOS و Android
  • سطح المكتب: Electron مع React لتطبيقات سطح المكتب
  • الواقع الافتراضي: React 360 لتجارب الواقع الافتراضي

4. دعم قوي من الشركات

تستخدم Facebook (Meta) React في الإنتاج لمليارات المستخدمين يومياً. هذا يضمن:

  • التطوير والتحسينات المستمرة
  • كود مختبر في المعارك على نطاق ضخم
  • الاستقرار والدعم على المدى الطويل
  • تحديثات وتصحيحات أمنية منتظمة
نصيحة مهنية: مهارات React قابلة للنقل بشكل كبير. بمجرد إتقانك لـ React، يصبح تعلم أطر عمل أخرى مثل Vue أو Angular أسهل بكثير بسبب المفاهيم المشتركة مثل المكونات والحالة والخصائص.

مبادئ React الأساسية

تم بناء React على عدة مبادئ أساسية توجه تصميمها:

1. تدفق البيانات أحادي الاتجاه

تتدفق البيانات في اتجاه واحد: من المكونات الأصلية إلى المكونات الفرعية من خلال الخصائص. هذا يجعل تدفق البيانات يمكن التنبؤ به وأسهل في تصحيح الأخطاء.

<ParentComponent> ↓ (تدفق الخصائص للأسفل) <ChildComponent /> ↓ (تدفق الخصائص للأسفل) <GrandchildComponent /> </ParentComponent>

2. تركيب المكونات

قم ببناء واجهات مستخدم معقدة من خلال تركيب مكونات صغيرة ومركزة بدلاً من إنشاء مكونات كبيرة ومتجانسة.

3. عدم القابلية للتغيير

لا تعدل الحالة مباشرة أبداً. قم دائماً بإنشاء نسخ جديدة بقيم محدثة. هذا يمكّن React من اكتشاف التغييرات بكفاءة.

// ❌ خطأ: تعديل الحالة مباشرة this.state.items.push(newItem); // ✅ صحيح: إنشاء مصفوفة جديدة بقيمة محدثة setItems([...items, newItem]);

4. فصل الاهتمامات

يجب أن يكون لكل مكون مسؤولية واحدة. إذا كان المكون يفعل الكثير، قسمه إلى مكونات أصغر.

React مقابل أطر العمل الأخرى

React مقابل Vue مقابل Angular: React: + أكثر مرونة، مكتبة وليست إطار عمل + أكبر مجتمع وسوق عمل + صيغة JSX (شبيهة بـ HTML في JavaScript) + يتطلب مكتبات إضافية للتوجيه والحالة - منحنى تعلم أكثر حدة لـ JSX Vue: + الأسهل في التعلم + صيغة قائمة على القوالب (مثل HTML) + توجيه وإدارة حالة مدمجة + وثائق رائعة - سوق عمل أصغر مقارنة بـ React Angular: + إطار عمل كامل مع كل شيء مدمج + TypeScript افتراضياً + مدعوم من Google + الأفضل لتطبيقات المؤسسات الكبيرة - منحنى تعلم أكثر حدة - أكثر رأياً وصلابة
لا يوجد إطار عمل "أفضل": يعتمد إطار العمل "الأفضل" على احتياجات مشروعك وخبرة فريقك وتفضيلاتك. تجعل مرونة React مناسبة للمشاريع بجميع الأحجام، من الأدوات الصغيرة إلى التطبيقات الضخمة.

ما ستتعلمه في هذا البرنامج التعليمي

سيأخذك هذا البرنامج التعليمي الشامل لـ React من مبتدئ إلى مطور React واثق:

خارطة طريق البرنامج التعليمي: الأساسيات (الدروس 1-10): - إعداد React وبيئة التطوير - صيغة وتعبيرات JSX - المكونات (الوظيفية والفئة) - الخصائص وتواصل المكونات - الحالة ودورة الحياة - معالجة الأحداث - العرض الشرطي - القوائم والمفاتيح - النماذج والمكونات المتحكم فيها متوسط (الدروس 11-20): - الخطافات (useState, useEffect, useContext) - خطافات مخصصة - Context API لإدارة الحالة - أساليب تصميم المكونات - React Router للتنقل - استدعاءات API وجلب البيانات - معالجة الأخطاء - تحسين الأداء متقدم (الدروس 21-30): - خطافات متقدمة (useReducer, useMemo, useCallback) - تقسيم الكود والتحميل الكسول - أساسيات العرض من جانب الخادم - اختبار مكونات React - TypeScript مع React - أفضل الممارسات والأنماط - بناء تطبيقات جاهزة للإنتاج
التمرين 1: استكشف React في البرية

قم بزيارة هذه المواقع وحاول تحديد مكونات واجهة المستخدم المختلفة (الأزرار، البطاقات، أشرطة التنقل، إلخ). كلها مبنية باستخدام React:

  • Facebook.com - منصة تواصل اجتماعي
  • Instagram.com - مشاركة الصور
  • Netflix.com - بث الفيديو
  • Airbnb.com - حجز السفر

المهمة: افتح أدوات المطور في المتصفح (F12)، انتقل إلى علامة تبويب Components (يتطلب امتداد React DevTools)، واستكشف شجرة المكونات.

التمرين 2: أسئلة بحثية

قبل الانتقال إلى الدرس التالي، ابحث واكتب إجابات موجزة لهذه الأسئلة:

  1. ما هو الفرق الرئيسي بين المكتبة وإطار العمل؟
  2. لماذا يعتبر التعامل المباشر مع DOM بطيئاً؟
  3. اذكر ثلاث شركات كبرى تستخدم React في الإنتاج.
  4. ماذا تعني "البرمجة التوضيحية" في سياق React؟
التمرين 3: النموذج العقلي

ارسم مخططاً بسيطاً يوضح:

  • صفحة ويب مقسمة إلى 5 مكونات على الأقل (مثل Header, Sidebar, Content, Footer)
  • كيف يمكن أن تكون هذه المكونات متداخلة داخل بعضها البعض
  • أي المكونات يمكن إعادة استخدامها عدة مرات

يساعد هذا التمرين على تطوير نهج تفكير قائم على المكونات قبل أن تبدأ في البرمجة.

التحضير للرحلة

قبل الغوص في كود React في الدروس التالية، إليك ما يجب أن تكون مرتاحاً معه بالفعل:

المتطلبات الأساسية:
  • JavaScript: ميزات ES6+ (الدوال السهمية، التفكيك، عامل الانتشار، الوحدات)
  • HTML/CSS: فهم قوي لأساسيات الويب
  • DOM: فهم أساسي لنموذج كائن المستند
  • مديري الحزم: معرفة أساسية بـ npm أو yarn
  • سطر الأوامر: مريح في تشغيل أوامر الطرفية الأساسية
استراتيجية التعلم: قد تشعر بالإرهاق من React في البداية، خاصة مع صيغة JSX. لا تقلق! التزم بها خلال الدروس الخمسة أو الستة الأولى، وستبدأ المفاهيم في الوضوح. تدرب من خلال بناء مشاريع صغيرة أثناء التعلم.

الملخص

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

  • React هي مكتبة JavaScript لبناء واجهات المستخدم بمعمارية قائمة على المكونات
  • Virtual DOM يمكّن من العرض الفعال من خلال تقليل تحديثات DOM الحقيقية
  • المكونات هي قطع قابلة لإعادة الاستخدام ومستقلة من واجهة المستخدم يمكن تركيبها معاً
  • React لديها نظام بيئي ضخم ودعم مجتمعي قوي
  • React تستخدم البرمجة التوضيحية وتدفق البيانات أحادي الاتجاه
  • الاختيار بين React و Vue و Angular يعتمد على متطلبات المشروع

في الدرس التالي، سنقوم بإعداد بيئة تطوير React الخاصة بك وإنشاء أول تطبيق React لك!

العودة للدورة تطوير الويب الشامل
الدرس التالي إعداد بيئة تطوير React
العودة للدورة