مشاريع React
نتجاوز في هذه الدورة المفاهيم النظرية ونتعمق معًا لبناء تطبيقات واقعية من بيئة العمل الحقيقية من خلال ثلاثة مشاريع تم تخطيطها بعناية، مما يُكسبك خبرة عملية ويعزز فهمك لمكتبة ريأكت ReactJS.
- +500طالب
- متوسطالمستوى
تعرّف على الدورة
نتجاوز في هذه الدورة المفاهيم النظرية ونتعمق معًا لبناء تطبيقات واقعية من بيئة العمل الحقيقية من خلال ثلاثة مشاريع تم تخطيطها بعناية، مما يُكسبك خبرة عملية ويعزز فهمك لمكتبة ريأكت ReactJS؛ ويساعدك على المنافسة في سوق العمل بين باقي المبرمجين.
ستقوم في هذه الدورة بتصميم وإنشاء المشاريع التالية بنفسك:
News Feed App: ستقوم في هذا المشروع بتطوير تطبيق موجز أخبار ديناميكي يعرض الأخبار الرائجة عبر فئات مختلفة. ستستخدم واجهات برمجة التطبيقات الخارجية 3rd party API، مميزات الترقيم والتصفية (pagination and filtering). كل هذا من خلال مراعاة التصميم المتجاوب (Responsive Design) واستخدام أفضل ممارسات تجربة المستخدم (UX) لإنشاء واجهة تطبيق سهلة الاستخدام.
Around the World: ستقوم في هذا المشروع بتحدي مهاراتك في لغة جافا سكريبت ومكتبة ريأكت لتبني بنفسك موقع ويب ديناميكي يعرض معلومات عن دول مختلفة حول العالم، مع إمكانية بحث المستخدم عن الدول وفلترتها حسب المنطقة أو القارة للوصول إلى دول محددة، وأيضًا الضغط على الدولة لرؤية المزيد من المعلومات التفصيلية عنها في صفحة منفصلة. ستقوم أيضًا بتنفيذ color theme switcher يسمح للمستخدمين باختيار نمطهم المفضل، بجانب دمج واجهة برمجة التطبيقات (API)، وتصميم واجهة مستخدم متجاوبة (Responsive design) وأيضًا استخدام أدوات مهمة مثل Tailwind و react router و react-select و eslint و vite وغيرهم.
اشترك في الدورة الآن، واحترف مكتبة ReactJS!
تشمل الدورة
- مشروعان
- مشروعان
- شهادة موثقة
- قياس مستوى التقدم والانجاز عبر الدورة
- إجابة من مشرفي الطلاب على كل الأسئلة
- فاعليات حصرية
- شارات تميز للطلبة المتقدمين
- اشعارات تذكير وتحفيز لإنهاء الدورة
- اشتراك مدى الحياة
ماذا ستتعلم خطوة بخطوة
اضغط على أي قسم لعرض دروسه. الدروس المجانية متاحة للمشاهدة قبل الاشتراك.
محتوى الدورة
- 1المقدمة
- 2مواد الدورة
- 3المشروع الأول: Around the World23 درسًا · 1 اختبار
- نظرة عامة على المشروع
- خطة المشروع
- تهيئة المشروع
- خط مخصص
- إضافات VS Code
- التقسيم إلى مكونات
- مكون تبديل السمة ThemeSwitcher
- مكون الترويسة Header
- استخدام Prettier مع Tailwind CSS
- مكونا حقل البحث وقائمة المناطق
- مكونا بطاقة الدولة وقائمة الدول
- جلب بيانات حقيقية من API
- التعامل مع الحالات الحدّية لجلب البيانات
- تصفية البيانات حسب المنطقة
- التصفية حسب نص البحث
- تطبيق React Router
- صفحة الدولة والروابط
- إنشاء خطّاف لجلب البيانات
- إعادة هيكلة الخطّاف useFetchData
- استخدام البيانات الديناميكية في صفحة الدولة
- تخزين البيانات مؤقتًا باستخدام localStorage
- نشر موقعك على vercel.com
- إصلاح مشكلة 404 على Vercel
- اختبار المشروع الأول: Around the World
- 4المشروع الثاني: صفحة أخبار14 درسًا · 1 اختبار
- وصف المشروع
- تجهيز المشروع
- مكونات صفحة الأخبار
- استخدام الواجهة البرمجية الإخبارية
- إضافة خاصية البحث – الجزء الأول
- إضافة خاصية البحث – الجزء الثاني: تحسين الكفاءة
- إضافة خاصية البحث – الجزء الثالث: حالات التحميل وعدم وجود نتائج
- تأجيل تنفيذ العمليات باستخدام debounce
- التصفح – الجزء الأول
- التصفح – الجزء الثاني: تفعيل أزرار التصفح وتعطيلها
- معالجة الأخطاء
- تحسين شكل حالة التحميل
- إضافة فلتر نوع الأخبار
- إضافة رابط لتفاصيل الخبر
- اختبار المشروع الثاني: صفحة أخبار
- 5المشروع الثالث: لوحة Kanban29 درسًا · 1 اختبار
- نظرة عامة على المشروع
- خطة المشروع
- تهيئة المشروع
- مكتبة المكونات: Button
- مكتبة المكونات: TextField
- مكتبة المكونات: Dropdown
- مكتبة المكونات: Dialog والأسماء المستعارة (Aliases)
- التخطيط: Header
- التخطيط: SideMenu – الجزء 1
- التخطيط: SideMenu – الجزء 2
- التخطيط: Workspace
- عرض المشروع ببيانات حقيقية
- JSDoc: إضافة الأنواع إلى مكوناتك
- المنطق: إضافة لوحة جديدة – الجزء 1
- المنطق: إضافة لوحة جديدة – الجزء 2
- المنطق: إضافة لوحة جديدة – الجزء 3
- المنطق: إضافة لوحة جديدة – الجزء 4
- المنطق: حذف لوحة
- المنطق: تخزين البيانات مؤقتًا في localStorage
- المنطق: تعديل لوحة
- المنطق: إضافة مهمة جديدة
- المنطق: حذف مهمة
- المنطق: إضافة عمود جديد
- المنطق: استخدام مكتبة immer
- المنطق: حذف عمود
- المنطق: تعديل مهمة
- المنطق: السحب والإفلات – الجزء 1
- المنطق: السحب والإفلات – الجزء 2
- المنطق: السحب والإفلات – الجزء 3
- اختبار المشروع الثالث: لوحة Kanban
- 6الخاتمة
- الاختبار النهائي
- الاختبار النهائي: مشاريع React
تعلّم على يد م. أحمد علي
م. أحمد عليمهندس برمجيات ذو خبرة أكثر من عشر سنوات. عمل في أكبر شركات العالم مثل مايكروسوفت وجوجل وميتا، ويعمل حاليًا كمهندس برمجيات في Amazon Web Services (AWS). يمتلك مجموعة متوازنة من الخبرات والمهارات بين تقنيات الواجهة الأمامية والخلفية. هذا بجانب خبرته في تبسيط مواضيع كالخوارزميات وهياكل البيانات على قناته التعليمية على اليوتيوب.
ماذا قال الطلاب عن الدورة
التقييمات والمراجعات
الحملله التطبيق كان كويس واتعلمنا أشياء كثيرة بفضل الله
بنصح بيه كل لي عايز يطور في الرياكت ويعمل شغل عالى جدا و advanced جدا ويتعلم مكتبات تساعده في الشغل بعد كده ❤❤❤
ما شاء الله مشاريع جميلة جدا ينفع نحطها فى البورتفليو وشرح مميز جدا كان نفسنا فى مسك الختام بمشروع متجر اليكترونى أو منصة تواصل اجتماعى ان شاء الله فى المستقبل يتم تسجيلهم مع شرح الريدكس
ما شاء الله عن نفسي أكبر إستفادة من هذه الدورة هي كيفية تعامل المهندسين مع المشروع من البداية وكيفية تقسيم المشروع و دا بيحل مشاكل كتير كانت بتظهر بعد البدء في المشروع لو مكنتش مخطط هتعمل اي بالظبط مثلا: م/ أبو سريع كان بيقسم تقسيمه بسيطه في البداية فرقت معي بشكل كبير 1-نبدأ ب Styleing 2-ثم Logic
انا درست دورة مشاريع الرياكت بمنحة لطلاب قطاع غزة بسبب الحرب والحمدلله اليوم انا بفضل الله ثم منصة المدرسة اصبحت متمكنة وقادرة على تطوير نفسي ومهاراتي مشكورين جدا منصة المدرسة ومشكور المهندس احمد وجعله الله في ميزان حسناتكم .
شغل عالي ومميز جدا
جزاكم الله خيرا
لاحظت ان فيها تطبيق وتوظيف لاغلب مواضيع الدورات السابقة في رياكات ان لم تكن كلها
Mahmoudدورة قيمة جدا وهتطبق على مشروعين مهمين
جزاكم الله خيرا
طريقة العمل بالمشاريع و الاهتمام بالتفاصيل و عمل مشروع متكامل يجعل من الدورة اكثر من رائعة العيب الوحيد انها مشروعين فقط ولكن في معلومات دسمة وتطبيق مفيد جدا
الأسئلة الشائعة
- مطورو React الذين يرغبون في بناء تطبيقات واقعية
- المطورين الذين لديهم معرفة أساسية بـ React ويرغبون في تعميق فهمهم
- المطورون الذين يرغبون في بناء معرض أعمال قوي (Portfolio)
في نهاية هذه الدورة، ستكون قادرًا على:
- بناء تطبيقات React معقدة وتفاعلية
- التكامل مع مختلف المكتبات وواجهات برمجة التطبيقات APIs
- تصميم وتنفيذ واجهات سهلة الاستخدام
- تطبيق أفضل الممارسات في الصناعة لجودة الكود وقابليته للصيانة
- عرض مهاراتك في معرض أعمالك (Portfolio) من خلال مشاريع احترافية
نعم، تتطلب دورة “مشاريع ريأكت” معرفة أساسية بمكتبة react. إذا كنت مبتدئًا في رياكت وتبحث عن مراجعة المفاهيم الأساسية، فنرشح لك دورة “أساسيات React”.
ابدأ مشاريع React اليوم
اشتراك مدى الحياة، شهادة إتمام، ودعم من فريق المدرسة طوال رحلتك.
الدورة كانت واضحة ومليئة بالتطبيقات العملية التي ساعدتني أفهم React بشكل أعمق. المشاريع كانت ممتعة، وقدرت من خلالها أطبق كل مفهوم مباشرة وأشوف النتيجة فورًا.