تصميم المواقع باستخدام رياكت

مكتبة إنشاء واجهات المستخدم UI

تطوير الويب4.3(91)9 ساعات و42 دقيقة34 درسا6 أقسام

ماذا ستتعلم؟

  • فهم ما هي React
  • تثبيت الأدوات وإنشاء أول مشروع
  • استخدام JSX والمترجم Babel
  • إنشاء المكونات Components
  • التعامل مع Props
  • استخدام Map Method وArrow Function
  • التحكم في العرض بالشروط
  • إدارة الحالة باستخدام UseState Hook
  • التحكم في الأحداث والتعامل مع الـ Form
  • تنفيذ مشروع نهائي

عن الدورة

يشرح هذا الكورس تصميم المواقع باستخدام رياكت React JS، وهي مكتبة JavaScript لبناء واجهات المستخدم التفاعلية لتطبيقات الويب. يبدأ الكورس بتعريف React وتثبيت الأدوات وإنشاء أول مشروع واستخدام أداة Code SandBox. بعد ذلك تتعلم JSX والمترجم Babel، والتعامل مع القيم والستايل والخصائص، ثم المكونات Component والتعامل مع الموديل وImport وExport. ثم تشرح الـ Props والـ Map Method والـ Arrow Function والتحكم في العرض من خلال الشروط. وتتعلم الـ State وUseState Hook والتحكم في الأحداث والتعامل مع الـ Form. وفي النهاية تنفذ مشروعا نهائيا على عدة مراحل وتحمل ملفاته. يناسب الكورس كل من يريد تعلم بناء واجهات المواقع الحديثة، ويفضل أن تعرف أساسيات HTML وJavaScript قبل البدء. وبعده ستكون قادرا على بناء مكونات قابلة لإعادة الاستخدام وإنشاء تطبيق ويب تفاعلي بنفسك. الشرح عملي ومتدرج، وتتبع الدروس بالترتيب لتنتقل من الفكرة إلى التطبيق خطوة بعد خطوة.

نتائج متوقعة من الدورة

  • فهم عميق لمفاهيم React وممارستها عمليًا.
  • القدرة على إنشاء تطبيقات ويب تفاعلية وحديثة.
  • إتقان استخدام أدوات مثل JSX، Hooks، والمكونات.
  • إنشاء مشروع نهائي يعكس المهارات المكتسبة خلال الدورة.

تقييمات المتدربين

التقييمات هنا من المتدربين الذين اشتروا الدورة وأكملوا 50٪ من المحتوى على الأقل — لا توجد تقييمات من شخص لم يطلع على المحتوى.
4.3
★★★★☆
91 تقييم
5★
32
4★
55
3★
4
2★
0
1★
0

    محتوى الدورة

    1

    مقدمة عن React

    4 درس
    1. ماهى Reactيعرّف مكتبة React وسبب شهرتها، ويشرح فكرة المكونات Components بمثال ساندويتش البرجر، وتقسيم الواجهة إلى مكونات، وتحديث الـ DOM بتغيير الجزء المتأثر فقط.6:55
    2. تثبيت الأدواتيشرح تثبيت أدوات العمل لدورة React: Visual Studio Code وNode.js مع NPM وGit، وتفعيل IIS من ميزات ويندوز لتشغيل خادم ويب محلي.8:50
    3. إنشاء أول مشروعيشرح إنشاء أول مشروع React، وأوامر npm للتشغيل والبناء، ومحتويات مجلد public وملف index.html، وملف index.js الذي يربط التطبيق بالعنصر root ويعرض Hello World.22:16
    4. أداة Code SandBoxيعرّف أداة CodeSandbox لتشغيل مشاريع React على المتصفح، ومزاياها كالعمل من أي جهاز والتعاون مع الفريق وتثبيت المكتبات، ويشرح أجزاء واجهتها وضبط الخط ومشاركة المشروع.16:22
    2

    استخدام JSX مع React

    6 درس
    1. شرح JSX والمترجم Babelيشرح JSX في React وعلاقته بالجافاسكريبت العادية، بمقارنة إنشاء عنصر H1 بالـ DOM مباشرة وبـ JSX، ودور Babel في تحويل الكود لجافاسكريبت يفهمها المتصفح.24:07
    2. تطبيق عملى بسيطتطبيق عملي في React على برنامج بسيط يأخذ رقمين من المستخدم ويطبع نتيجة العملية عليهما، ثم عرض الواجهة من خلال عنصر واحد يضم كل الأجزاء.5:25
    3. التعامل مع القيميشرح كتابة قيم جافاسكريبت داخل JSX بين الأقواس المعقوفة، وأن المسموح هو تعبير يعطي قيمة لا جملة كاملة، مع استخدام Template Literals وتطبيق صغير لعرض الاسم وحقوق النشر.15:23
    4. التعامل مع الستايل والخصائصيشرح خصائص عناصر JSX وتنسيقها: استخدام className بدل class، وكتابة الخصائص بنمط camelCase، وإضافة ملف CSS خارجي، مع تحذير React عند استخدام اسم خاطئ للخاصية.24:13
    5. إضافة ستايل خاص للعناصريشرح الـ Inline Style في JSX: خاصية style لا تقبل نصا بل Object جافاسكريبت، وتُكتب أسماء الخصائص بنمط camelCase، مع تغيير القيم بشروط داخل ملف الجافاسكريبت.14:48
    6. التطبيق العملىتحدي عملي يطبق مفاهيم JSX السابقة بإنشاء تطبيق React من الصفر، مع كتابة ملف يستورد المكتبة ويعرض عنصرا واحدا على الصفحة.21:39
    3

    المكون Component

    14 درس
    1. ما هو المكون Component؟يشرح مفهوم المكون Component في React عمليا، بفصل أجزاء الصفحة مثل الـ Header والقائمة في ملفات مستقلة وإعادة استخدامها، مع معالجة خطأ Reference Error بالاستيراد.29:53
    2. تعديل الكود للأبديت الجديديشرح تعديل الكود لإصدار React الأحدث: استخدام createRoot من react-dom/client بدل ReactDOM.render للتخلص من تحذير الـ Console، ثم استدعاء render من الـ root.5:21
    3. تضمين المكون مع التطبيق العملي السابقيطبّق مفهوم المكون على مثال التحية بحسب الوقت، بنقل منطق الـ Heading إلى ملف مكون مستقل وتصديره بـ export default، واستخدام createRoot لتقليل أسطر الكود.11:09
    4. التعامل مع الموديل وشرح Import و Exportيشرح Import وExport والـ Modules في ES6: تصدير قيمة أو دالة بـ export default أو بأسماء، واستيرادها في ملف آخر باسم من اختيارك، مع مثال double وtriple.25:52
    5. تطبيق عملى على الموديلتطبيق عملي على الـ Modules والاستيراد والتصدير: بناء ملف يصدّر أربع دوال حسابية للجمع والطرح والضرب والقسمة، واستيرادها في الملف الرئيسي لعرض نتائجها.10:19
    6. شرح الـ Propsيشرح مفهوم React Props وكيف تمرر قيما مختلفة إلى المكون الواحد ليعرضها، بدل كتابة القيم داخله، ثم يصل إليها المكون عبر props.24:48
    7. تطبيق عملى على الـ Propsتطبيق عملي على Props ببناء مكون بطاقة لاعب يستقبل بياناته من ملف بيانات منفصل، ثم تكرار البطاقة في المكون App وتنسيقها بملف CSS.33:17
    8. استخدام React DevToolsيستخدم إضافة React DevTools في المتصفح لعرض شجرة المكونات والـ props، ويكتشف بها خطأ في اسم الخاصية عند إضافة صورة للبطاقة ويصلحه.15:32
    9. شرح الـ Map Methodيشرح دالة map لعرض عناصر مصفوفة بيانات دفعة واحدة، بكتابة المكون مرة واحدة وتكراره، ويوضح سبب الحاجة إلى خاصية key لكل عنصر.16:24
    10. تطبيق عملى على الـ Map Methodتمرين عملي على map ببناء قاموس إيموجي: ملف بيانات للرموز ومعانيها، ومكون بطاقة يعرض الرمز والاسم والوصف لكل عنصر.30:47
    11. شرح لأهم الدوال المستخدمةيشرح دوال المصفوفات map وfilter وreduce وfind وfindIndex، وكيف تعالج كل منها عناصر المصفوفة وتعيد نتيجة حسب الشرط أو عملية التجميع.19:17
    12. شرح الـ Arrow Functionيشرح Arrow Function في ES6 وكيف تحول الدوال المستخدمة مع map وfilter وreduce وfindIndex إلى صيغة مختصرة تجعل الكود أسهل قراءة.10:19
    13. التحكم فى العرض من خلال الشروطيشرح العرض الشرطي Conditional Rendering في React لإظهار شاشة مختلفة حسب حالة المستخدم، ويبني نموذج تسجيل دخول باستخدام العامل الثلاثي.19:56
    14. تطبيق عملىتطبيق عملي على العرض الشرطي بالتبديل بين شاشتي تسجيل الدخول والتسجيل حسب متغير userIsRegistered، وتمريره من App إلى مكون Form.12:15
    4

    شرح الـ Hooks

    5 درس
    1. مقدمة عن الـ Stateيقدم مفهوم الـ State في React: تغير بيانات الـ State يغيّر الواجهة UI، موضحا ذلك بمثال مكعب الثلج والماء وبعداد يزيد وينقص بالضغط على زرين.12:53
    2. شرح الـ UseState Hookيشرح الـ useState Hook في React: لماذا تغيّر القيمة العادية لا يحدّث الواجهة، وكيف يعيد useState مصفوفة فيها القيمة ودالة تغييرها لإعادة الرندر.29:29
    3. تطبيق عملىتطبيق عملي على useState: ساعة تعرض الوقت الحالي كقيمة ابتدائية، وزر يستدعي دالة بـ onClick لتحديث الـ State بالوقت الجديد فتعاد الواجهة تلقائيا.17:00
    4. التحكم فى الأحداثيشرح معالجة الأحداث Event Handler في React، مثل مرور الماوس فوق الزر وخروجه منه والضغط عليه، وتغيير لون الخلفية بـ State وأحداث onMouseOver وonMouseOut وonClick.12:56
    5. التعامل مع الـ Formيشرح التعامل مع حقول الإدخال والنماذج في React: قراءة القيمة من event.target بحدث onChange وتخزينها في State، ثم عرضها عند الضغط على زر الإرسال بـ onSubmit.19:01
    5

    المشروع النهائى

    4 درس
    1. المرحلة الأولىيبدأ المرحلة الأولى من مشروع Keeper App المشابه لـ Google Keep، ببناء مكونات Header وNote وFooter وتجميعها داخل App ثم عرضها في الصفحة.25:34
    2. المرحلة الثانيةيشرح المرحلة الثانية من Keeper App باستخدام بيانات وهمية في ملف notes.js، وعرض مجموعة الملاحظات في App بدالة map مع تمرير key وtitle وcontent لكل مكون.8:01
    3. المرحلة الثالثةيبني المرحلة الثالثة من Keeper App بإنشاء مكون CreateNote يحوي نموذجا فيه حقل عنوان ومنطقة نص بثلاثة أسطر وزر إضافة، مع زر حذف في كل ملاحظة وتنسيقها بـ CSS.10:31
    4. المرحلة الرابعةيبني المرحلة الرابعة من Keeper App بإضافة الـ State لجعل التطبيق تفاعليا: استقبال العنوان والمحتوى من الحقول بـ handleChange، وإضافة الملاحظات الجديدة وحذفها من القائمة.21:31
    6

    الملحقات

    1 ملحقات
    1. تحميل ملفات المشروع النهائى

    المحاضر

    م/عمرو عبد الفتاح

    م/عمرو عبد الفتاح

    مهندس أنظمة حاسوب متخصص في تطوير وتصميم تطبيقات الهواتف ومواقع الإنترنت، عمل على تطوير منصات ومواقع شهيرة.
    49K مشاهدة20 دورة

    دورات ذات صلة