React with TypeScript

تعلم React مع TypeScript لبناء تطبيقات ويب متقدمة

هل تعلم أن آلاف الفرص الوظيفية اليوم تتطلب إتقان مكتبة React؟ وهل تعلم أن React تُعد من ضمن الاختيارات الأولى لتنفيذ مشروعك عند طلبك تنفيذ أي Website من الذكاء الاصطناعي (AI)؟

سعر الدورة $30
اشترك الآن
تصفح المنهج
  • +500طالب
  • 94درس
  • 11قسم
  • 17اختبار
  • متوسطالمستوى
عن الدورة

تعرّف على الدورة

هل تعلم أن آلاف الفرص الوظيفية اليوم تتطلب إتقان مكتبة React؟ وهل تعلم أن React تُعد من ضمن الاختيارات الأولى لتنفيذ مشروعك عند طلبك تنفيذ أي Website من الذكاء الاصطناعي (AI)؟

ReacJS ليست فقط مكتبة لواجهات المستخدم، بل هي قلب تطوير الويب الحديث، والشركات اليوم تبحث عن مطورين يجمعون بين قوة React ودقة TypeScript.

في هذه الدورة الاحترافية والمتقدمة، ستتعلم كيفية تطوير واجهات مستخدم تفاعلية باستخدام مكتبة React.js الأشهر في العالم والمدعومة من شركة Meta، بالإضافة إلى كيفية إعداد لغة TypeScript داخل مشروع React لكتابة كود secure, clear, maintainable.

لماذا تختار دورة React with TypeScript؟

  • دمج أقوى تقنيتين في تطوير الواجهات: React و TypeScript هما الخيار المثالي لبناء تطبيقات حديثة وقابلة للتوسع.
  • محتوى تطبيقي: جميع المفاهيم مدعومة بمشاريع تطبيقية تحاكي احتياجات سوق العمل.
    فرص وظيفية متزايدة: دمج React مع TypeScript يزيد من فرصك للحصول على وظائف عالية المستوى محليًا وعالميًا.
  • وصول مدى الحياة: يمكنك الوصول إلى الدورة ومراجعة محتواها فيديوهات/ملخصات/امتحانات في أي وقت ومدى الحياة.
  • محاضر خبير: الدورة من إعداد وتقديم محمد أبوسريع، مهندس برمجيات ذو خبرة واسعة لأكثر من 12 عام، وعمل في عدة شركات عالمية في أوروبا والخليج.

اشترك الآن واحترف مكتبة ReactJS الأشهر في العالم

تشمل الدورة

  • شهادة موثقة
  • قياس مستوى التقدم والانجاز عبر الدورة
  • إجابة من مشرفي الطلاب على كل الأسئلة
  • فاعليات حصرية
  • شارات تميز للطلبة المتقدمين
  • اشعارات تذكير وتحفيز لإنهاء الدورة
  • اشتراك مدى الحياة
سعر الدورة $30
اشترك الآن

دفع آمن ووصول فوري للدورة

منهج الدورة

ماذا ستتعلم خطوة بخطوة

اضغط على أي قسم لعرض دروسه. الدروس المجانية متاحة للمشاهدة قبل الاشتراك.

محتوى الدورة

  1. 1
    المقدمة
  2. 2
    مواد الدورة
  3. 3
    أساسيات React12 درسًا · 4 اختبارات
    1. الأدوات التي سنستخدمها
    2. لماذا React؟
    3. مختصر كتابي: ?Why React
    4. اختبار قصير: ?Why React
    5. المكتبة مقابل إطار العمل
    6. مختصر كتابي: Library VS Framework
    7. اختبار قصير: Library VS Framework
    8. البرمجة التصريحية مقابل البرمجة الأمرية
    9. مختصر كتابي: Declarative VS Imperative
    10. الـ DOM الافتراضي (Virtual DOM)
    11. مختصر كتابي: Virtual Dom
    12. اختبار قصير: Virtual Dom
    13. تجهيز بيئة التطوير باستخدام Vite
    14. مجلد public مقابل مجلد assets
    15. أداة React DevTools
    16. اختبار القسم: أساسيات React
  4. 4
    أساسيات المكونات12 درسًا · 5 اختبارات
    1. مقدمة إلى JSX
    2. الفرق بين JSX وHTML
    3. مختصر كتابي: JSX VS HTML
    4. اختبار قصير: JSX VS HTML
    5. أساسيات المكونات
    6. الخصائص Props
    7. مختصر كتابي: Props
    8. اختبار قصير: Props
    9. العرض الشرطي
    10. المفاتيح keys في React
    11. مختصر كتابي: React keys
    12. اختبار قصير: React keys
    13. معالجات الأحداث
    14. مختصر كتابي: Event handlers
    15. اختبار قصير: Event handlers
    16. الأنماط الخاطئة في React
    17. اختبار القسم: أساسيات المكونات
  5. 5
    الحالة وتدفق البيانات11 درسًا · 3 اختبارات
    1. فهم الحالة State
    2. مختصر كتابي: Understanding State
    3. مرحلتا العرض والتثبيت (Render وCommit)
    4. مختصر كتابي: Rendering and commit
    5. اختبار قصير: Rendering and commit
    6. الحالة لقطة ثابتة
    7. مختصر كتابي: State is a snapshot
    8. اختبار قصير: State is a snapshot
    9. تحديث اللقطات بالطريقة الصحيحة
    10. المزيد عن الحالة
    11. الكائنات والمصفوفات في الحالة – الجزء 1
    12. الكائنات والمصفوفات في الحالة – الجزء 2
    13. الكائنات والمصفوفات في الحالة – الجزء 3
    14. اختبار القسم: الحالة وتدفق البيانات
  6. 6
    الخطافات Hooks14 درسًا · 5 اختبارات
    1. مقدمة إلى الخطافات Hooks
    2. مختصر كتابي: Intro to Hooks
    3. الخطاف useContext (مشكلة props drilling)
    4. مختصركتابي: useContext (props drilling)
    5. اختبار قصير: useContext (props drilling)
    6. الخطاف useContext (التطبيق العملي)
    7. الخطاف useRef (مثال TextInput)
    8. مختصر كتابي: useRef (TextInput Example)
    9. اختبار قصير: useRef (TextInput Example)
    10. الخطاف useRef (مثال ScrollableBox)
    11. الخطاف useEffect (مثال حجم النافذة)
    12. مختصركتابي: useEffect (Window Size Example)
    13. اختبار قصير: useEffect (Window Size Example)
    14. الخطاف useEffect (مثال المؤقت)
    15. خطاف مخصص (مثال محرر الملاحظات)
    16. مختصر كتابي: CustomHook (Note Editor Example)
    17. اختبار قصير: CustomHook (Note Editor Example)
    18. خطاف مخصص (مثال OnlineStatus)
    19. اختبار القسم: الخطافات Hooks
  7. 7
    الأداء7 دروس · 2 اختباران
    1. الدالة React.memo
    2. مختصر كتابي: React Memo
    3. اختبار قصير: React Memo
    4. الخطاف useMemo
    5. مختصر كتابي: useMemo
    6. الخطاف useCallback
    7. مختصر كتابي: useCallback
    8. ربط جميع المكونات
    9. اختبار القسم: الأداء
  8. 8
    الاختبارات20 درسًا · 3 اختبارات
    1. مقدمة إلى الاختبارات
    2. مختصر كتابي: Introduction to Testing
    3. اختبار قصير: Introduction to Testing
    4. نظرة عامة على أدوات الاختبار
    5. تجهيز بيئة الاختبار
    6. مجموعات الاختبار وحالات الاختبار والتأكيدات
    7. مختصر كتابي: Test suites, Test Cases and Assertions
    8. اختبار قصير: Test suites, Test Cases and Assertions
    9. إضافة Vitest
    10. اختبار مكونات React
    11. المحددات Selectors
    12. التحدي 1
    13. أخذ لقطة Snapshot لمكوّن
    14. مختصر كتابي: Take a Snapshot of a component
    15. تأكيدات أفضل باستخدام jest-dom
    16. أحداث المستخدم – الجزء 1
    17. أحداث المستخدم – الجزء 2
    18. التحدي 2
    19. اختبار النماذج – الجزء 1
    20. اختبار النماذج – الجزء 2
    21. التحدي 3
    22. اختبار واجهات API
    23. اختبار القسم: الاختبارات
  9. 9
    استخدام React مع TypeScript12 درسًا · 2 اختباران
    1. تجهيز TypeScript في React
    2. مختصر كتابي: Setting Up TypeScript in React
    3. اختبار قصير: Setting Up TypeScript in React
    4. الخصائص البسيطة
    5. مختصر كتابي: Simple props
    6. الخصائص المعقدة
    7. الحالة البسيطة
    8. مختصر كتابي: Simple state
    9. الحالة المعقدة
    10. معالجات الأحداث
    11. الخطاف useRef
    12. الخطافات المخصصة
    13. الخطاف useMemo واستدعاءات API
    14. اختبار القسم: استخدام React مع TypeScript
  10. 10
    الخاتمة
  1. الاختبار النهائي
    1. الاختبار النهائي: React with TypeScript
المعلم

تعلّم على يد م. محمد أبو سريع

  • م. محمد أبو سريع
    م. محمد أبو سريع

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

آراء الطلاب

ماذا قال الطلاب عن الدورة

التقييمات والمراجعات

4.7
متوسط التقييمات
3 عدد التقييمات
5
2
4
1
3
0
2
0
1
0
كيف كانت تجربتك؟ نود أن نعرف!
Mohamed Nasser Abdalla
تم النشر قبل 5 أشهر
دورة مميزة جمعت بين React و TypeScript بشكل احترافي

الكورس وضح لي مفاهيم React بطريقة سهلة وعملية، وقدرت اطبق كل شيء مباشرة. دمج TypeScript مع React كان خطوة مهمة خلت الكود اوضح واقوى.

يوسف بدر
تم النشر قبل سنة واحدة
تجربتي مع الدورة...

المحتوى العلمي - شرح React متكامل ومنظم جدًا. - تم التطرق لموضوع Testing ودي إضافة عملية مهمة جدًا لأي مطور. التطبيق العملي - ركزت على دمج React + TS لبناء مشاريع عملية. - وفرت أمثلة عملية لاستخدام الـ Testing مع المكونات. - مناسبة لفهم استخدام TS مع React، لكنها لا تكفي لتعلم TS بعمق. سوق العمل - الجمع بين React + TS ميزة قوية جدًا ومطلوبة. - وجود Testing في الدورة بيديك ميزة إضافية لأن الشركات بتركز عليه. - الدورة بتجهزك كبداية قوية، لكن التعلم المتقدم لـ TypeScript محتاج مصادر إضافية. الخلاصة: دورة React with TypeScript ممتازة لو عايز تتعلم React مع فكرة عن TypeScript، وكمان ضافتلك قيمة كبيرة بموضوع Testing. حاجة حلوة في المهندس محمد أبوسريع -جزاه الله خيرًا- إنه مش بيكتفي بالشرح النظري، لكن كمان بيشارك تجارب عملية حقيقية عن سوق العمل وكيف الشركات والفرق شغالة، فالدورة تحسسك بالواقع المهني. عدم التعمق في TypeScript طبيعي لأنه الدورة مركزة على React، لكنها كويسة لفهم دمج TS مع React وعمل مشاريع، وللوصول للاحتراف في TS محتاج تكمل بمصادر تانية. ✨ شكر كبير لكل فريق العمل على جودة المحتوى والأنيميشن الرائعين، اللي خلوا الدورة ممتعة وواقعية.

Ahmed Fathy
تم النشر قبل سنة واحدة
⭐⭐⭐⭐⭐

استفدت جدا من الدورة محتوى منظم وشرح فوق الممتاز

لديك سؤال؟

الأسئلة الشائعة

  • مطوري الواجهات الأمامية (Frontend developers) الذين يرغبون في الانتقال إلى مستوى احترافي في بناء تطبيقات ومواقع الويب باستخدام React و TypeScript.
  • المبرمجين الراغبين في تعلم بناء تطبيقات قوية باستخدام أدوات حديثة، والاستعداد مستقبلًا لتعلم Next.JS لأنها امتداد لـ ReactJS.
  • مطوروالواجهات الخلفية (Backend developers) الذين يرغبون في التعلم والتطور ليصبحوا (Full stack developers).

 هي مكتبة JavaScript مفتوحة المصدر تُستخدم لبناء واجهات المستخدم التفاعلية، وتُعد الأشهر في العالم لتطوير واجهات التطبيقات الحديثة.

 React مكتبة لواجهة المستخدم، بينما TypeScript هي لغة برمجة تعتمد على JavaScript وتُستخدم لكتابة كود منظم وقابل للصيانة.

نعم، يُفضل يكون عندك معرفة بأساسيات JavaScript قبل دخول هذه الدورة لتحقيق أفضل استفادة، وننصح بمسار تعلم جافا سكريبت من الصفر.

ابدأ تعلم React مع TypeScript لبناء تطبيقات ويب متقدمة اليوم

اشتراك مدى الحياة، شهادة إتمام، ودعم من فريق المدرسة طوال رحلتك.

اشترك الآن
تصفح المنهج