Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

MERN: React, NodeJS, Express & MongoDB in Arabic (شرح عربي)

Name: MERN: React, NodeJS, Express & MongoDB in Arabic (شرح عربي)
Rating: 4.6 (543 reviews)

كورس متكامل بالعربي لشرح تطوير تطبيقات الويب باستخدام رياكت واكسبرس ومونجو. يقدمه م / يحيى العربي (قناة يحيى تك)

Bestseller

Highest Rated

Created byYahya ElAraby

Last updated 1/2025

Arabic

Arabic [Auto],

What you'll learn

MERN هتتعلم بطريقة عملية ازاي تستخدم تقنيات
React هتتعلم طريقة بناء الفرونت اند باستخدام
Express هتتعلم طريقة بناء الباك اند باستخدام
تطوير تطبيقات المواقع باستخدام تقنيات الويب الحديثة المستخدمة في سوق العمل
هتبني موقع تجارة الكترونية بكل التقنيات اللي هتتعلمها خلال الكورس
Git هتتعلم ازاي تستخدم أداة
هتبني موقع تجارة الكترونية صغير يحاكي حاجات من الواقع اللي بتشوفه في مشاريع سوق العمل

Course content

7 sections • 109 lectures • 12h 57m total length

Welcome To My Course | مرحباً بكم1:59
What is MERN | ما هو الميرن2:38

Overview | مقدمة1:43
What is Single Page Application | HTML صفحة واحدة1:19
اختبار التطبيقات أحادية الصفحة (SPA)
Why is React Popular | ليه رياكت مشهور1:47
What is TypeScript ? | ما هو التايبسكريبت1:24
Setting Up Development Environment | تجهيز متطلبات بيئة العمل1:04
Create Vite App | تحميل قالب رياكت5:56
What Will We Build | هنبني ايه باستخدام رياكت0:37
Folder Structure | هيكل ملفات البروجكت6:21
Understanding JSX / TSX | فهم لغة التعامل مع رياكت7:16
JSX Quiz
Understanding Components | المكونات في رياكت9:04
Fragment Component | المكون الوهمي <></>2:31
Passing Data as Props | مشاركة البيانات بين المكونات6:13
Passing JSX as Props | مشاركة المكونات بين المكونات2:34
Passing Children To Component | مشاركة المكونات داخل المكون2:18
React Components Quiz
Project - Setting Up | قالب بروجكت إدارة الطلاب3:26
Project - Building Table Component | بناء مكون الجدول9:01
Project - Styling the Components with MUI | استخدام مكونات مكتبة إم يو آي6:06
Project - Add Student From | نموذج إضافة طالب جديد8:15
Project - Save Student Data To Array | حفظ بيانات الطالب9:37
Project - useState Hook - Trigger Re-render | تفعيل إعادة تحميل المكون12:24
Project - useRef Hook - Clear Input | التحكم في المكونات بالكود4:47
Project - useEffect Hook - Event Triggers | الاستجابة للتغيرات في رياكت9:46
Project - useEffect not responding to useRef | مشاكل تواجهك في الاستجابة للتغير13:57
Project - useMemo Hook - Optimize Rendering | حفظ أجزاء المكون من إعادة التحميل8:21
Next Steps | الخطوات القادمة1:18

Overview (SQL vs. NoSQL) | مقدمة2:44
Why MongoDB | ليه هستخدم مونجو تحديداً3:48
Relations in SQL and NoSQL | أنواع العلاقات وربط البيانات4:12
What is JSON | شكل بيانات الجافاسكريبت2:11
Setup Mongo on Local Machine | طريقة تحميل مونجو على الجهاز2:41
Explore Mongo Compass | أداة تصفح مونجو4:06
Query Pipeline (Aggregations) | استدعاء البيانات من مونجو3:56
Best Practices using MongoDB | المعايير السليمة في التعامل مع مونجو5:12
Next Steps | الخطوات القادمة1:28

What is backend | ايه هو الباك اند1:36
Understanding HTTP method & responses | البروتوكول المعياري4:05
Why Express.js | ايه هو اكسبرس وليه بنستخدمه1:17
Setup Express | تجهيز بيئة العمل12:51
Nodemon | إعادة التشغيل التلقائي4:49
Setting Up Mongoose | الربط مع مونجو3:58
Create Student Schema | مستند بيانات الطالب5:59
GET - All Students Endpoint | استدعاء بيانات جميع الطلاب5:55
POST - Student Endpoint | انشاء طالب جديد6:00
PUT - Student Endpoint | تحديث بيانات طالب6:40
DELETE - Student Endpoint | حذف طالب2:25
Express Routers in Separate Files | تنظيم ملفات مستقلة عن الملف الرئيسي3:36
Next Steps | الخطوات القادمة0:45

Overview | مقدمة2:12
Installing Git | تحميل الأداة على الجهاز1:17
Initialize Git Repo and Config | إنشاء الريبو3:28
Git Basic Commands (add, commit) | الأوامر الأساسية7:57
Visual Studio Code Git User Interface | واجهة المستخدم في محرر الكود4:51
Branching & Merging | التفريعات والربط بينها9:39
Git vs. Github | الفرق بين الأداة والسحابة2:25
Github - Setup Remote Repo | انشاء الريبو على السحابة6:57
Github - Push & Pull | أوامر السحب والرفع4:57
Github - Clone Repo Locally | نسخ ريبو السحابة محلياً2:55
Next Steps | الخطوات القادمة0:52

Overview (What will we build ?) | هنبني ايه مع بعض في البروجكت0:23
Scaffolding Backend Express.js | تجهيز قالب الباك اند للبروجكت9:30
Users - Database Model | مستند بيانات المستخدم6:34
Users - Login & Register Logic | تسجيل دخول وانشاء المستخدم10:44
Users - Route Endpoints & Bcrypt Password | رابط المستخدم وتشفير كلمة المرور17:10
Users - What is JWT | مفتاح تشفير لتسجيل الدخول3:04
Users - What is Authorization | الفرق بين تسجيل الدخول والصلاحيات1:32
Users - Generate JWT | انشاء شيفرة تسجيل الدخول6:46
Push to GitHub | رفع المشروع على جيت هاب8:09
Product - Database Model | مستند بيانات المنتج3:18
Product - Get & Seed Products | الاستعلام عن المنتجات والاضافة برمجياً6:17
Product - Route Endpoints | روابط المنتج3:55
Cart - Database Model | مستند بيانات سلة المشتريات8:51
Cart - Get User Active Cart (GET) | الاستعلام عن سلة مشتريات المستخدم9:40
Cart - JWT Validate Middleware | التحقق من شيفرة المستخدم21:16
Cart - Add Item to Cart (POST) | إضافة منتج إلى سلة المشتريات16:37
Cart - Update Item in Cart (PUT) | تحديث منتج في سلة المشتريات10:36
Cart - Delete Item in Cart (DELETE) | حذف منتج من سلة المشتريات10:18
Cart - Clear Cart (DELETE) | حذف جميع المنتجات من سلة المشتريات4:07
Cart - Checkout & Create Order (POST) | انهاء التسوق وانشاء الاوردر20:57
Data Validation with Try & Catch | التحقق من صحة البيانات7:08
Setting Environment Variables in .env | اعداد المتغيرات في ملف بيئة التشغيل13:37
Scaffolding Frontend React.js with Vite | تجهيز قالب الفرونت اند للبروجكت2:38
Routing Using React Router | مكونات على شكل صفحات باستخدام مكتبة الراوتر9:31
Installing MUI React & Navbar Component | مكتبة المكونات الجاهزة وتجهيز الرأسية13:55
All Products Screen | شاشة عرض جميع المنتجات24:14
Auth - Register New User Page | صفحة تسجيل مستخدم جديد24:21
Auth - Context for Auth | مخزن إدارة مصادقة المستخدم23:50
Auth - Login User Page | صفحة تسجيل دخول مستخدم14:59
Auth - Logout | تسجيل الخروج5:15
Cart - Navbar Icon & Cart Page | أيقونة سلة المشتريات والربط مع صفحتها15:53
Cart - Protected Route | حماية صفحة سلة المشتريات6:39
Cart - Context for Cart | مخزن إدارة سلة المشتريات11:00
Cart - Add Item to Cart Button | زر إضافة منتج إلى سلة المشتريات18:49
Cart - Get Cart Items in Context | طلب المنتجات لسلة المشتريات في المخزن5:40
Cart - Render Cart Items in My Cart Page | عرض المنتجات في صفحة سلة المشتريات13:31
Cart - Update Item in Cart | تحديث المنتج في سلة المشتريات11:47
Cart - Delete Item From Cart | حذف المنتج من سلة المشتريات4:18
Cart - Clear Cart | إفراغ سلة المشتريات7:20
Checkout - Render Checkout Page | صفحة انهاء الشراء14:36
Checkout - Order Success Page | اتمام عملية انهاء الشراء وصفحة الاوردر11:02
My Orders Page | صفحة مشترياتي17:46
Final Thoughts | النهاية2:24

Requirements

HTML, CSS فهم بسيط عن اساسيات الويب والتعامل مع
JavaScript فهم أساسيات البرمجة باستخدام لغة الجافاسكريبت
لا يحتاج اي سابق معرفة بالتقنيات المستخدمة. سيتم تغطيتها بالكامل متضمناً مرحلة تجهيز جهازك عشان تكتب كود وتشغله
فهم كويس لأساسيات البرمجة لانه بندخل مباشرة في التطبيق العملي بالتقنيات لبناء التطبيقات

Description

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

---

في الكورس ده هتتعلم بطريقة عملية. همشي معاك في كيفية بناء تطبيقات بالتقنيات اللي بقت مطلوبة بقوة في سوق العمل العالمي وهي Express وReact وMongoDB.

شركات كتيرة بقت بتعتمد على الMERN في شغلها في بناء المشاريع اللي بتخدم ملايين المستخدمين انهاردة وبقوا بيحصلوا على تمويلات بتساعدهم يدوروا على مبرمجين شاطرين متخصصين في التقنيات ده .. سواء كانوا جونيور أو سينورز.

---

هتتعلم في الكورس ده خطوة بخطوة ازاي تجتاز مرحلة البداية الصعبة في التعامل مع React وExpress وMongoDB عشان تبني

Full-Stack Web Application.

---

في كل قسم هتلاقي فيه مشروع بسيط عن التقنية وازاي تنزلها عندك وتستخدمها.

ويفضل تمشي بالترتيب لكل قسم عشان لما توصل في الآخر هتلاقي فيه تطبيق عملي لبناء متجر الكتروني E-Commerce بيغطي كل التقنيات اللي اتعلمناها في كل قسم.

---

يفضل يكون عندك اساسيات كويسة في الجافاسكريبت واساسيات التعامل مع صفحات الويب باستخدام الHTML والCSS.

لو مش عندك الاساسيات ده فتقدر برده تمشي مع الكورس ده بس لازم تدخل تاخد الاساسيات ده الاول من على قناة اليوتيوب عندي.

---

وتمنياتي للجميع بالتوفيق والنجاح.

Who this course is for:

المبتدئين في مجال تطوير تطبيقات الويب والراغبون في تطوير مهاراتهم بتقنيات الويب الحديثة
المهتمين بتطوير مهاراتهم في بناء التطبيقات والتعلم بطريقة بناء المشاريع في التقنيات المحددة
الطلاب المهتمين بالاستعداد لسوق العمل
المبرمجين الراغبين في معرفة طريقة بناء المتاجر الالكترونية وطرق التفكير فيها باستخدام تقنيات الويب الحديثة

MERN: React, NodeJS, Express & MongoDB in Arabic (شرح عربي)

What you'll learn

Explore related topics

Course content

Introduction2 lectures • 5min

React.js25 lectures • 2hr 17min

MongoDB9 lectures • 30min

Express.js13 lectures • 1hr

API Integration (Backend + Frontend)6 lectures • 38min

Git & Github11 lectures • 48min

E-Commerce Full-Stack Project43 lectures • 7hr 40min

Requirements

Description

Who this course is for: