Menu
CoddyTech
مسار تعليمي

خارطة طريق مطور MERN stack

دورات مجانية بالترتيب الذي يحتاجه مطور MERN stack: HTML وCSS وJavaScript للصفحة، وReact للواجهة، ثم Node.js وExpress للخادم، وMongoDB للبيانات، وتسجيل الدخول لحمايتها. لغة واحدة، JavaScript، من أول وسم إلى آخر مسار في الـAPI، وكل درس يعمل داخل متصفحك.

711,880+ من الـ codders مسجلون في هذه الدورات

718 درسًا808 تحديات3,295 أسئلة الاختبار

خارطة طريق MERN stack، خطوة بخطوة

5 دورات16 أقسام718 درسًا808 تحديات3,295 أسئلة الاختبار

كل خطوة قسم من دورة قائمة على Coddy. اتبعها بالترتيب أو ابدأ مباشرة بما ينقصك: يُحفَظ تقدّمك لكل دورة في الحالتين.

  1. 1
    ابدأ هذه الخطوةابدأالعناصر والروابط والنماذج والترميز الدلالي، ثم المحددات ونموذج الصندوق وflexbox وgrid والتخطيطات المتجاوبة. سيكتب React لك HTML لاحقًا، فهذه هي اللغة التي يتحدثها.ابدأصفحة مخصصة
  2. 2
    ابدأ هذه الخطوةابدأالمتغيرات والدوال والمصفوفات والكائنات، ثم الشروط والحلقات، ثم الأصناف. هذه هي اللغة الوحيدة التي تستخدمها في كل خطوة لاحقة، في المتصفح وعلى الخادم.ابدأصفحة مخصصة
  3. 3
    ابدأ هذه الخطوةابدأDOM والأحداث والنماذج والتحقق من المدخلات، ثم أنماط عملية مثل التبويبات والنوافذ المنبثقة والتنقل المتجاوب. ما يفعله React نيابةً عنك يصبح مفهومًا بعد أن تفعله بيدك.ابدأ
  4. 4
    ابدأ هذه الخطوةابدأالمكوّنات وJSX وprops والحالة والأحداث والقوائم والنماذج المتحكَّم بها، وتنتهي ببطاقة اجتماعية صغيرة تبنيها خطوة بخطوة. React هو الواجهة التي ستخدمها الـAPI الخاصة بك.ابدأصفحة مخصصة
  5. 5
    ابدأ هذه الخطوةابدأJavaScript خارج المتصفح: وسائط سطر الأوامر، والوحدات، وقراءة الملفات وكتابتها، ودوال الاستدعاء، والوعود، وasync وawait، وحلقة الأحداث والأحداث. تبني أداة ملاحظات لسطر الأوامر.ابدأصفحة مخصصة
  6. 6
    ابدأ هذه الخطوةابدأالمسارات والمعاملات وJSON والبرمجيات الوسيطة ومعالجات الأخطاء والموجّهات في موقع وصفات، ثم API لتتبّع المهام: POST وPATCH وPUT وDELETE، والتحقق باستخدام zod، والتصفية والترتيب والتقسيم إلى صفحات وCORS.ابدأ
  7. 7
    ابدأ هذه الخطوةابدأالمستندات والمجموعات من خلال API مبنية بـExpress: الإدراج وObjectId والمرشّحات ومعاملات التحديث والفهارس الفريدة والتجميع و$lookup. ثم من يحق له رؤية البيانات: كلمات المرور المجزأة والجلسات وJWT والمالكون وأدوار المشرف وترويسات الأمان وتحديد معدل الطلبات.ابدأ
  8. 8
    ابدأ هذه الخطوةابدأالملفات والصلاحيات والأنابيب والسكربتات في طرفية حقيقية، ثم الإيداعات والفروع والدمج والمستودعات البعيدة. كل مشروع MERN يعيش في مستودع Git ويعمل من سطر الأوامر.ابدأصفحة مخصصة
ما الذي تحصل عليه
كل ما ستستخدمه لتتعلّم البرمجة

تعلّم بالممارسة

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

playground.js
محرر الأكواد
1const greeting = "Hello, Coddy!"
2function sayHi(name) {
3    return greeting + " " + name
4}
5
bottombar Collapse icon
اختبار #1test Case Success icon
اختبار #2test Case Success icon
اختبار #3test Case Failure icon
الإدخال
"Alex"
الإخراج
"Hello, Coddy! Alex"

ابنِ سلسلتك

حافظ على الاستمرارية وشاهد تقدمك ينمو! تابع عادة البرمجة اليومية، واحمِ سلسلتك بأيام التجميد، واكسب مكافآت لحضورك كل يوم.

12 أيام متتالية

عُد غداً للحفاظ على سلسلتك!

fire Filled icon
left icon

January 2026

right icon

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

21

22

23

24

25

26

27

28

29

30

product Double Or Nothing icon

ضعف أو لا شيء

اليوم 5 من 7

fire Freeze icon

تجميد السلسلة

2 left

لست وحدك

تنافس على لوحات المتصدرين العالمية، وادعُ أصدقاءك لكسب المكافآت، واحتفلوا بإنجازات بعضكم. البرمجة أفضل مع الأصدقاء!

دوري المتحدّين
دوري المتحدّينأفضل 7 يتقدمون
leaderboard First icon1
avatar 1 icon
fire Filled icon
Alex7+ Days
2840
leaderboard Second icon2
avatar 2 icon
fire Filled icon
Jordan7+ Days
2650
leaderboard Third icon3
avatar 3 icon
fire Filled icon
Sam7+ Days
2420
4
avatar 4 icon
Casey
2180
5
avatar placeholder icon
fire Filled icon
Morgan7+ Days
1950
leaderboard Arrow Up iconمنطقة الترقيةleaderboard Arrow Up icon

كل طريقة للتعلّم

اقرأ، استمع، اختبر نفسك، اسأل الذكاء الاصطناعي، أو ابحث عما درسته من قبل. كل درس يتكيّف معك.

مقدمة للمتغيّرات
صوت

المتغيّر حاوية مسمّاة تخزّن قيمة يمكن الرجوع إليها لاحقًا في برنامجك.

في بايثون، تُنشئ واحدًا بكتابة الاسم ثم علامة يساوي ثم القيمة التي تريد تخزينها.

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

1xSarah

احصل على شهادتك

احصل على شهادات لكل دورة تكملها. أضفها إلى ملفك على LinkedIn وسيرتك الذاتية لعرض خبرتك البرمجية لأصحاب العمل.

Coddyشهادة إتمام
يُشهد بأنمحمد أحمدقد أتمّ بنجاح
python iconأساسيات Python
موثّق
التاريخيناير 2026
LinkedInأضف إلى LinkedIn

لماذا تتعلّم MERN stack على Coddy

  • كل طبقة تعمل بجانب شفرتك. تُعرض مكوّنات React أثناء الكتابة، ويجيب خادم Express على شريط طلبات تختار فيه الطريقة والترويسات وجسم JSON، وتعمل استعلامات MongoDB على قاعدة بيانات يمكنك فتحها في تبويب Data. لا شيء لتثبيته، لذا يكفي حاسوب المدرسة المحمول.
  • لغة واحدة للحزمة كلها. يقضي المسار خطواته الأولى مع JavaScript والمتصفح، فحين يصل Node.js يكون الخادم أفكارًا جديدة لا لغة جديدة: الدوال والكائنات والشفرة غير المتزامنة نفسها، لكنها الآن تجيب على الطلبات.
  • مشروع في كل قسم من أقسام الواجهة الخلفية: أداة ملاحظات لسطر الأوامر، وموقع وصفات، وAPI لتتبّع المهام، وAPI لتقييم الكتب على MongoDB، وتطبيق ملاحظات بحسابات مستخدمين. يُبنى كل مشروع درسًا بعد درس، ويُصحَّح بفحوص ترسل طلبات حقيقية إلى خادمك.
  • تلميحات تقرأ شفرتك. حين يعيد مسار 404، أو لا يعيد استعلام شيئًا، أو يسمح تسجيل الدخول بدخول المستخدم الخطأ، ينظر Bugsy، المعلّم بالذكاء الاصطناعي، إلى ما كتبته ويدلّك على السطر دون أن يكتب لك الإصلاح.

أسئلة شائعة حول MERN stack

ما هو MERN stack؟

طريقة لبناء تطبيق ويب كامل بلغة JavaScript بأربع أدوات: يخزّن MongoDB البيانات على شكل مستندات، ويحوّل Express برنامج Node.js إلى خادم ويب وAPI، ويبني React الواجهة التي تعمل في المتصفح، ويشغّل Node.js لغة JavaScript على الخادم. تستدعي شفرة React في المتصفح الـAPI المبنية بـExpress، وهي تقرأ من MongoDB وتكتب فيه.

ما معنى اختصار MERN؟

MERN اختصار لـMongoDB وExpress وReact وNode.js. هذا الترتيب هو ترتيب حروف الكلمة، لا ترتيب تعلّمها: في هذا المسار تبدأ بالصفحة (HTML وCSS وJavaScript وReact) ثم تنتقل إلى الخادم (Node.js وExpress) وقاعدة البيانات (MongoDB).

ماذا يفعل مطور MERN stack؟

يبني الميزات من قاعدة البيانات إلى الشاشة: يصمّم مستندات MongoDB، ويكتب مسارات Express التي تنشئها وتقرؤها وتحدّثها وتحذفها، ويحمي هذه المسارات بتسجيل الدخول، ويبني صفحات React التي تستدعيها. ولأن الأدوات الأربع كلها JavaScript، يستطيع مطور واحد أن يتابع الميزة عبر كل طبقة.

هل ما زال MERN stack يستحق التعلّم؟

نعم. React وNode.js من أكثر أدوات تطوير الويب استخدامًا، وExpress وMongoDB أكثر شريكين شيوعًا لهما، لذا تنتقل المهارات معك حتى إلى فرق تستخدم قاعدة بيانات أو إطار عمل مختلفًا. وتعلّم حزمة واحدة من أولها إلى آخرها يعلّمك أيضًا كيف تترابط أجزاء أي تطبيق ويب، وهذا ما تختبره المقابلات.

هل أتعلّم MERN stack أم MEAN stack؟

MERN لمعظم من يبدأ الآن. تشترك الحزمتان في MongoDB وExpress وNode.js، ولا تختلفان إلا في الواجهة الأمامية: React في MERN وAngular في MEAN. React هو الأوسع استخدامًا بين الاثنين والأسهل في البداية، والانتقال إلى Angular لاحقًا يعني تعلّم إطار عمل جديد واحد، لا حزمة جديدة.

كم من الوقت يستغرق تعلّم MERN stack؟

نحو ثمانية إلى عشرة أشهر بمعدل ساعة يوميًا لإنهاء هذا المسار. يستغرق HTML وCSS نحو ستة أسابيع، وJavaScript والمتصفح شهرين إلى ثلاثة، وReact نحو شهر، والأقسام الخمسة لـNode.js (Node.js وExpress وREST API وMongoDB وتسجيل الدخول) ثلاثة أشهر أخرى. وإن كنت تعرف JavaScript بالفعل، فابدأ من خطوة React ويستغرق الأمر نحو أربعة أشهر.

هل يمكنني تعلّم MERN stack دون تثبيت أي شيء؟

نعم، في هذا المسار. كل درس يعمل داخل المتصفح: يُعرض React بجانب المحرّر، وتعمل برامج Node.js في طرفية، وتجيب خوادمك على شريط الطلبات، ويستخدم قسم MongoDB قاعدة بيانات في الذاكرة تفهم واجهة برنامج تشغيل MongoDB نفسها. وحين تبني تطبيقك الخاص لاحقًا، تثبّت Node.js وMongoDB على حاسوبك وتنتقل الشفرة كما هي.

هل أحصل على شهادة لمسار مطوّر MERN stack؟

نعم. أكمل كل الخطوات واحصل على شهادة مجانية واحدة لمسار مطوّر MERN stack كله. تذكر كل دورة أنهيتها في الطريق، وترتبط بشهادة كل دورة، ليتمكن أي شخص من التحقق من كل مهارة تذكرها. يمكنك إضافتها إلى ملفك على LinkedIn. إنها شهادة إتمام من Coddy، وليست مؤهلًا معتمدًا.

مسارات تعليمية أخرى

الدورات نفسها مرتّبة لدور مختلف. يُحفَظ التقدّم: الدورة المُنجَزة في مسار تُحتسب في كل مسار يتضمّنها.

كل المسارات التعليمية
رسم توضيحي للغات البرمجة في Coddy

ابدأ مسار مطوّر MERN stack مجانًا

ابدأ التعلّم