مسار الدليل الشامل لتعلم react من الصفر
تعلم أشهر مكتبات الجافا سكريبت لبناء واجهات المستخدم، واستعد لتصبح مطور فرونت اند محترف قادر على بناء مواقع وتطبيقات ويب تفاعلية وقوية. React هي المكتبة المثالية لمطوري الواجهة الأمامية، والتي تساعدهم على إنشاء عناصر تفاعلية لمواقع وتطبيقات الويب، ويستخدمها العديد من المواقع الشهيرة مثل Netflix و Facebook. هذا المسار مخصص لك إذا كنت تريد تعلم React من الصفر
- المعرفة المُسبقة
يجب أن يكون لديك خبرة مسبقة وفهم جيد لأساسيات HTML و CSS و JavaScript للتسجيل في هذا المسار.
- المهارات المكتسبة
- React component state
- React Router
- React hooks
- JSX
- Test
- Context API
- Fetch API's
- الوقت المقدر
من شهر إلى شهرين بواقع 5 ساعات أسبوعيًا تقريبًا
ماذا ستتعلم في هذا المسار؟
ستتعلم في هذا المسار معظم المهارات الهامة التي تحتاجها لإتقان مكتبة ReactJS وبناء مواقع وتطبيقات ويب احترافية من بيئة العمل الواقعية عن طريق 5 دورات. ستبدأ بدورة React Fundamentals، حيث ستتعرف على مفاهيم ريأكت الأساسية، مثل components وغيرها، ثم سنتدرج معًا لتتعلم مواضيع أكثر تقدمًا في الدورة الثانية مثل الصفحات المتعددة، واستخدام تقنيات تطوير وتحسينات الأداء، وغيرهم الكثير، وستطبق كل ما تعلمته في مشروع عملي يتضمن بناء تطبيق لمتابعة السعرات الحرارية (calorie tracker). وفي الدورة الثالثة ستبني بنفسك 3 مشاريع احترافية تستطيع إضافتها لمعرض أعمالك (Portfolio)؛ مما يُكسبك خبرة عملية ويساعدك على المنافسة في سوق العمل بين باقي المبرمجين. وفي الدورة الرابعة ستتعلم أساسيات لغة TypeScript لتكون مستعدًا لتتعرف كيفية استخدام لغة تايب سكريبت بشكل احترافي داخل مكتبة ReactJS في الدورة الخامسة والأخيرة في المسار.
- 1
الدورة 1 من 5دورة أساسيات React
هذه الدورة مثالية لمطوري الفرونت اند الذين يتطلعون إلى تحسين مهاراتهم وتعلم تقنيات جديدة تساعدهم في بناء تطبيقات ومواقع احترافية. ستكتسب خلال هذه الدورة فهمًا عميقًا لأساسيات ReactJS مثل الـ Components، وهي الوحدة الأساسية المكونة لعناصر ريأكت، و State management، و Conditional statements، و Dynamic Styling وغيرهم الكثير من مهارات ريأكت الأساسية.
المشاريع العملية 1
- مشروع Calorie trackerستقوم في هذا المشروع بتطبيق كل ما تعلمته في دورة أساسيات ريأكت لعمل تطبيق احترافي يتعقب عدد السعرات الحرارية لما تأكله من وجبات يوميًا.
- 2
الدورة 2 من 5دورة React Deep Dive
سنكمل في هذه الدورة على ما بدأناه في الدورة الأولى لتنتقل إلى مستوى أكثر تقدمًا وتبني بنفسك تطبيقات متقدمة وأكثر تعقيدًا؛ حيث ستتعلم وتطبق على مفاهيم ومصطلحات جديدة في ريكأت مثل Multi pages، و Error handling، و Routing، و Performance optimization techniques و API calls وغيرهم الكثير. هذا بجانب تطبيق كل هذه المفاهيم الجديدة على التطبيق الذي بدأناه في الدورة الأولى؛ مما يُعدك للمنافسة في سوق العمل البرمجي.
- 3
الدورة 3 من 5دورة مشاريع React
نتجاوز في هذه الدورة المفاهيم النظرية ونتعمق معًا لبناء تطبيقات واقعية من بيئة العمل الحقيقية من خلال ثلاثة مشاريع تم تخطيطها بعناية، مما يُكسبك خبرة عملية ويعزز فهمك لمكتبة ريأكت React؛ ويساعدك على المنافسة في سوق العمل بين باقي المبرمجين.
المشاريع العملية 3
- مشروع Around the worldستقوم في هذا المشروع بتحدي مهاراتك في لغة جافا سكريبت ومكتبة ريأكت لتبني بنفسك موقع ويب ديناميكي يعرض معلومات عن دول مختلفة حول العالم، مع إمكانية بحث المستخدم عن الدول وفلترتها حسب المنطقة أو القارة للوصول إلى دول محددة، وأيضًا الضغط على الدولة لرؤية المزيد من المعلومات التفصيلية عنها في صفحة منفصلة. ستقوم أيضًا بتنفيذ color theme switcher يسمح للمستخدمين باختيار نمطهم المفضل، بجانب دمج واجهة برمجة التطبيقات (API)، وتصميم واجهة مستخدم متجاوبة (Responsive design) وأيضًا استخدام أدوات مهمة مثل Tailwind و react router و react-select و eslint و vite وغيرهم.
- مشروع News Feedستقوم في هذا المشروع بتطوير تطبيق موجز أخبار ديناميكي يعرض الأخبار الرائجة عبر فئات مختلفة. ستستخدم واجهات برمجة التطبيقات الخارجية 3rd party API، مميزات الترقيم والتصفية (pagination and filtering). كل هذا من خلال مراعاة التصميم المتجاوب (Responsive Design) واستخدام أفضل ممارسات تجربة المستخدم (UX) لإنشاء واجهة تطبيق سهلة الاستخدام.
- مشروع Kanban boardستقوم في هذا المشروع ببناء تطبيقًا قويًا لإدارة المهام مشابه لتطبيق Trello و Jira؛ حيث ستصمم بنفسك لوحة قابلة للتخصيص مع وظيفة السحب والإفلات (drag-and-drop) واستخدام التصميم المتجاوب (Responsive Design)، مما يسمح للمستخدمين بإدارة المهام عبر مراحل مختلفة، وتصور تقدم المشروع بشكل فعال وسلس.
- 4
الدورة 4 من 5دورة TypeScript Fundamentals
ستتعلم في هذه الدورة أساسيات لغة TypeScript بطريقة مبسطة واحترافية، مما سيساعدك في زيادة فرص قبولك في الوظائف التي تتقدم لها؛ وذلك لأن العالم الرقمي اليوم يتطلب تطوير برمجيات معقدة وعالية الجودة وبكفاءة أكبر، وهذا ما توفره لك لغة TypeScript التي أصبحت أداة قوية للمبرمجين في المشاريع البرمجية الأكبر حجمًا ذات قواعد الكود المعقدة، حيث تعتمد الشركات العالمية مثل ميكروسوفت لغة تايب سكريبت في مشاريعها. وبنهاية هذه الدورة ستكون مستعدًا لتعلم الدورة القادمة وهي React with typeScript لتتعرف كيفية استخدام لغة تايب سكريبت داخل مكتبة ReactJS.
- 5
الدورة 5 من 5React with Typescript
في هذه الدورة الاحترافية والمتقدمة، ستتعلم كيفية تطوير واجهات مستخدم تفاعلية باستخدام تقنيات وأدوات متقدمة في مكتبة ريأكت، بالإضافة إلى كيفية إعداد لغة TypeScript داخل مشروع React لكتابة كود secure, clear, maintainable.
تشمل جميع مساراتنا
- تطبيق عملي على مشاريع حقيقيةطبق ما تتعلمه في الدورات المختلفة في إنشاء مشاريع تُحاكي العالم الواقعي؛ لتكتسب خبرة قيمة تُميزك عن الآخرين.
- التوجيه والدعم الأكاديمي والتقنيستتلقى دعمًا فرديًا من الموجهين (Mentors) ذوي الخبرة، والذين يتواجدون باستمرار لتقديم التوجيه والدعم، وتحفيزك، والإجابة على أسئلتك.
- الاتصال المباشر مع المحاضرتواصل مع المحاضر ومشرفي الدورات مباشرةً عن طريق المجموعات، والدردشة، وغيرها، لتحصل على المساعدة التي تحتاجها، وتعرف الإجابات الموثوقة لكل تساؤلاتك، وتبقى على المسار الصحيح دائمًا.
- شهادة إتمامستحصل على شهادة إتمام في نهاية كل دورة من دورات المسار تقديراً لعملك الجاد وتفانيك، وتشجيعًا لك، بالإضافة لشهادة إتمام المسار كاملًا بعد الانتهاء منه.
ما الذي يميز هذا المسار؟
- محاضرون وخبراء يعلمون بالعربية
- تعلم على يد محاضرون يتحدثون لغتك العربية
- لديهم شغف بالتدريس وثروة من المعرفة
- خبراء يعملون في شركات كبرى كجوجل
- مراجعة مخصصة لمشاريعك
- راجع مشاريعك أكثر من مرة
- مراجعات مخصصة من مراجعين ذوي خبرة
- مصادر إضافية مقترحة لتحسين مهاراتك ومشروعك
- مشاريع تستطيع مشاركتها على portfolio الخاص بك
- لقاءات أونلاين مع مشرفي الدورات
- تواصل مباشر مع المشرفين عبر تطبيق زووم
- مناقشة لأهم النقاط التي تمت دراستها في الدورات
- الرد على تساؤلاتك ومساعدتك في إنجاز مشاريعك
- توصيات ونصائح عملية وأفضل الممارسات لتحسين مهاراتك
- التعليم الترفيهي
- تعلم بطريقة ممتعة وتشويقية (Edutainment) وغير تقليدية
- ستستطيع تذكر ما تتعلمه من دروس لفترة زمنية طويلة
- اختبارات تفاعلية وتحديات
- اختبارات تفاعلية لقياس مدى فهمك وتحصيلك للدورة
- تحديات لتقوية وترسيخ ما تعلمته لكل قسم في الدورة
- قياس مستوى التقدم والانجاز عبر الدورة
- +37 ألفطالب وطالبة
- +120 ألفساعة تعلّم
- +6 آلافمشروع منجز
- +1500منحة دراسية
تعلّم من الأفضل
م. محمد أبوسريعStaff Frontend Engineer at Yassir & Chief media officer of Almdrasaمهندس برمجيات ذو خبرة أكثر من 10 سنوات في كبرى شركات البرمجيات الرائدة في المنطقة العربية وأوروبا. يتمتع بخبرة واسعة في تطوير واجهات المستخدم الأمامية، إلى جانب خبرته كمحاضر في الجامعات المصرية. عمل مع إحدى أشهر شركات التجارة الإلكترونية في الشرق الأوسط، وهي Landmark Group والتي تضم العديد من العلامات التجارية الرائدة مثل Splash و Mother care و Max Fashion وغيرهم. عمل أيضًا مع شركة Deliveryhero، الشركة العالمية المالكة لأشهر تطبيقات توصيل الطعام في العالم، حيث ساهم في تحسين أداء التطبيقات وتجربة المستخدم للشركة.
م. أحمد عليSoftware Engineer at Amazon & curriculum development supervisor of Almdrasaخبرة أكثر من 10 سنوات في إدارة فرق تطوير البرمجيات لعدة شركات عالمية مثل مايكروسوفت وجوجل وميتا وأمازون. قاد فريق واجهة المستخدم وكذلك فريق الواجهة الخلفية لتطوير منتج data pipelines في GCP، كما وعمل على إنشاء الإصدار الأول وكذلك قيادة فريق الإصدار الثاني لواجهة المستخدم لتطوير منتج GCP Recommendations AI والذي يستخدم حاليًا من قبل شركات . عالمية مثل Ikea. قاد عملية بناء وإضافة ميزات وخصائص حيوية في Meta Business Suite التابع لفيسبوك، بجانب خبرته في التدريس الأكاديمي في الجامعات وعمله كمعيد لمدة سنتين، بالإضافة أيضًا لعمله كموجه ومرشد (Mentor) في شركتي جوجل وميتا.
اسمع من طلاب المدرسة
لديك استفسار؟
نرحب بكافة استفساراتكم ويسعدنا خدمتكم والعمل على توفير بيئة تعليمية سهلة ومتطورة.
اشترك في قائمتنا البريدية
ابقَ على اطلاع بكل جديد من دورات وعروض ومقالات.
الأسئلة الشائعة
يوفر لك هذا المسار فرصة فريدة لتعلم ريأكت بطريقة ممتعة وعملية، وخصوصًا لمطوري الفرونت اند الذين يتطلعون إلى تحسين مهاراتهم وتعلم تقنيات جديدة تساعدهم في بناء تطبيقات ومواقع احترافية. بتسجيلك ستحصل على:
- دورات تشرح كل مفهوم بشكل واضح وبسيط
- تمارين تفاعلية ومشاريع عملية تساعدك على تطبيق ما تعلمته
- شهادات إنجاز تثبت مهاراتك وتزيد من قيمة سيرتك الذاتية
- دعم فني وإرشاد من قبل مدربين محترفين ومجتمع نشط من المتعلمين
تستخدم ريأكت React بشكل أساسي لبناء واجهات المستخدم التي تتفاعل مع برامج وتطبيقات الويب. ولكن يمكن استخدامها مع المكتبات والأطر الأخرى لإنشاء تطبيقات الهاتف المحمول وكذلك تطبيقات سطح المكتب. لذلك يمكن العمل بريأكت بشكل أساسي كمطور واجهة أمامية، وأيضًا في وظيفة في مجال تطوير Android أو iOS.
ReactJs هي مكتبة لبناء مواقع وتطبيقات ويب ديناميكية وتفاعلية، وهي واحدة من أشهر وأقوى مكتبات الجافا سكريبت JavaScript في العالم، ويستخدمها العديد من المواقع الشهيرة مثل فيسبوك ونتفليكس، وغيرهم. تعلم ريأكت سيفتح لك أبواب الفرص الوظيفية في مجال تطوير الويب، وسيزيد من قدراتك وثقتك كمطور ويب.
نرحب بالجميع، ولكن يجب أن يكون لديك خبرة مسبقة وفهم جيد لأساسيات HTML و CSS و JavaScript للتسجيل في هذا المسار والاستفادة منه.
نحن نستخدم الأدوات والبرامج المجانية والمستخدمة على نطاق واسع مثل VS Code، والتي يمكن الوصول إليها على معظم الأجهزة وأنظمة التشغيل. كل ما تحتاجه هو جهاز حاسوب واتصال بالإنترنت.
يختلف وقت تعلم ريأكت من شخص لآخر نتيجةً لاختلاف الظروف والوقت المتاح لكل شخص، ولكن في المتوسط، فإن هذا المسار يُتوقع الانتهاء منه في خلال شهر إلى شهرين تقريبًا.
مسار الدليل الشامل لتعلم react من الصفر
ابدأ الآن واحصل على وصول مدى الحياة لكل دورات المسار وأي دورة جديدة تُضاف إليه.