تعلم مكتبة React JavaScript: دورة مجانية وشاملة مدتها 10 ساعات على يوتيوب

في عالم تطوير الويب سريع التطور، تُعد مكتبة React JavaScript خياراً لا غنى عنه للمطورين الطموحين والمحترفين على حد سواء. تُعرف React، التي طورتها Facebook، بأنها مكتبة مفتوحة المصدر لبناء واجهات المستخدم التفاعلية والفعالة. تتميز بواجهة برمجية (API) بسيطة، ونظام بيئي قوي ومتطور باستمرار، ومجتمع ضخم وداعم.

إذا كنت تتطلع لإتقان React والانطلاق في بناء مشاريعك الخاصة، فقد نشرت قناة freeCodeCamp.org على يوتيوب دورة تدريبية شاملة ومجانية مدتها 10 ساعات، تغطي كل ما تحتاج لمعرفته حول React. هذه الدورة القيمة من إعداد John Smilga من Coding Addict، وهو معلم خبير قام بإنشاء أكثر من 500 برنامج تعليمي في مجال البرمجة.

لماذا React؟ قوة مكتبة JavaScript الرائدة في بناء واجهات المستخدم

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

ماذا ستتعلم في هذه الدورة الشاملة؟

تهدف هذه الدورة إلى تزويدك بفهم عميق وشامل لمكتبة React، بدءاً من الأساسيات وصولاً إلى المفاهيم المتقدمة. بنهاية هذه الدورة، ستكون قادراً على استخدام React بثقة في مشروعك القادم.

أساسيات React ومفاهيمها الجوهرية

• فهم بنية React وكيفية عملها.
• التعرف على مفهوم المكونات (Components) وكيفية إنشائها.
• قواعد JSX وكيفية دمج HTML و JavaScript بكفاءة.

التعمق في React Hooks

• استكشاف Hooks مثل useState و useEffect لإدارة الحالة والآثار الجانبية في المكونات الوظيفية.
• فهم القواعد العامة لاستخدام Hooks.

فهم Context API لإدارة الحالة

• تعلم كيفية استخدام Context API لتمرير البيانات عبر شجرة المكونات دون الحاجة إلى تمرير الخصائص (props) يدوياً في كل مستوى (Prop Drilling).

توجيه التطبيقات باستخدام React Router

• إعداد التوجيه (Routing) في تطبيقات React لإنشاء صفحات متعددة وتحديد المسارات.
• التعامل مع الأخطاء وتحديد الروابط ومعلمات URL.

بناء Custom Hooks لتعزيز قابلية إعادة الاستخدام

• تطوير Custom Hooks خاصة بك لتجريد منطق المكونات وجعله قابلاً لإعادة الاستخدام عبر تطبيقك.

المحاور الرئيسية للدورة: رحلة متكاملة في عالم React

تغطي هذه الدورة الشاملة مجموعة واسعة من المواضيع، مصممة لتأخذك خطوة بخطوة في رحلتك لتعلم React:

• التحضير وبيئة التطوير

  • مقدمة عن React وأهداف الدورة وهيكلها.
  • متطلبات الدورة وإعداد بيئة التطوير.
  • إعداد محرر النصوص (Text Editor Setup).
  • أساسيات سطر الأوامر (Command Line Basics).
  • أساسيات NPM.

• بناء المكونات الأولى في React

  • تثبيت Create-React-App.
  • فهم بنية مجلد Create-React-App.
  • تنظيف القالب الأساسي (Clean Boilerplate).
  • إنشاء المكون الأول (First Component).
  • شرح مفصل للمكون الأول.
  • قواعد JSX والمكونات المتداخلة (Nested Components).

• التعامل مع الأنماط والخصائص (CSS & Props)

  • أساسيات CSS.
  • تطبيق CSS و JavaScript داخل JSX.
  • مفهوم الخصائص (Props) وتفكيكها (Props Destructuring).
  • التعامل مع Props - Children.
  • إنشاء قائمة بسيطة وقائمة منظمة.
  • استخدام Key Prop و Spread Operator.

• إدارة الأحداث والقوائم

  • أساسيات الأحداث (Event Basics).
  • عبارات الاستيراد والتصدير (Import And Export Statements).
  • استضافة مجانية (Free Hosting).

• مفاهيم متقدمة في إدارة الحالة (useState & useEffect)

  • مقدمة متقدمة والحصول على المشروع المبدئي.
  • نظرة عامة على المشروع المبدئي.
  • استخدام useState: حالة استخدام بسيطة وأساسيات.
  • القواعد العامة لـ Hooks.
  • أمثلة على useState مع المصفوفات والكائنات.
  • استخدام useState مع قيم حالة متعددة.
  • عداد بسيط (Simple Counter) وتحديث وظيفي (Functional Update).
  • مشروع مطابقة النماذج (Form Matching Project).
  • أساسيات useEffect: الاستخدام الشرطي، قائمة التبعيات، دالة التنظيف.
  • استخدام useEffect لجلب البيانات (Fetch Data).
  • التعامل مع العوائد المتعددة (Multiple Returns) وجلب البيانات.
  • تقييم الدائرة القصيرة (Short-Circuit Evaluation) والمشغل الثلاثي (Ternary Operator).
  • إظهار/إخفاء المكون (Show/Hide Component).

• التعامل مع النماذج (Forms)

  • أساسيات النماذج (Form Basics).
  • المدخلات المتحكم بها (Controlled Inputs).
  • إضافة عناصر إلى القائمة.
  • المدخلات المتعددة (Multiple Inputs).

• إدارة الحالة المعقدة باستخدام useRef و useReducer

  • استخدام useRef.
  • إعداد useReducer مع useState.
  • إعادة هيكلة useReducer.
  • إضافة وإزالة العناصر باستخدام useReducer.

• تجاوز Prop Drilling عبر Context API و Custom Hooks

  • مشكلة Prop Drilling وحلها باستخدام Context API / useContext.
  • إنشاء Custom Hooks - useFetch.

• التحقق من أنواع الخصائص باستخدام PropTypes

  • إعداد PropTypes.
  • التحقق من PropTypes للصور والقيم الافتراضية.

• التوجيه المتقدم في React Router

  • مقدمة إلى React Router.
  • إعداد React Router الأساسي.
  • مكونات Error And Switch في React Router.
  • الروابط (Links) في React Router.
  • معلمات URL والعناصر النائبة (URL Params And Placeholder).

• تحسين أداء تطبيقات React

  • تحذير تحسين React.
  • استخدام React.memo.
  • استخدام useCallback.
  • استخدام useMemo.
  • مثال على useCallback - Fetch.

يمكنك مشاهدة الدورة التدريبية الكاملة على قناة freeCodeCamp.org على يوتيوب (مدتها 10 ساعات).

مع تحيات Beau Carnes، معلم ومطور في freeCodeCamp.org، ومدير قناة freeCodeCamp.org على يوتيوب. إذا وجدت هذا المقال مفيداً، فلا تتردد في مشاركته.

تُقدم freeCodeCamp منهجاً مفتوح المصدر ساعد أكثر من 40,000 شخص في الحصول على وظائف كمطورين. ابدأ رحلتك الآن!

الخلاصة التقنية

تُعد هذه الدورة المجانية من freeCodeCamp.org كنزاً حقيقياً لكل من يرغب في إتقان React. تغطي الدورة بشكل منهجي وشامل جميع الجوانب الأساسية والمتقدمة للمكتبة، بدءاً من إعداد بيئة التطوير وصولاً إلى تحسين الأداء وإدارة الحالة المعقدة باستخدام Hooks و Context API. إن التركيز على الأمثلة العملية والمشاريع الصغيرة يضمن فهماً عميقاً للمفاهيم، مما يجعلها نقطة انطلاق ممتازة للمطورين الجدد في React أو لأولئك الذين يسعون لتعزيز مهاراتهم. إن جودة المحتوى المقدم من John Smilga وخبرته الطويلة في التدريس تجعل هذه الدورة مرجعاً لا غنى عنه في رحلة تعلم React.