Mastering Next.js - 1. React Foundations

أهلا بك عزيزي المتابع لموقع (journey for learn) نقدم دورات بكوبونات متاحة لاول 1000 تسجيل مجاني فقط وكوبونات اخري لفترة محدودة فاذا كنت تريد ان تحصل علي كل الكورسات علي موقعنا وان تكون اول المسجلين في الكورسات المجانية قم بتسجيل الدخول أوقم بالدخول علي وسائل التواصل الاجتماعي وخصوصا التليجرام نوضح الوصف المختصر والطويل للدورات لكي تعرف الدروس التي سوف تتعلمها بسهولة ويسر :

ما ستتعلمه

• فهم التحول الأساسي من البرمجة الحتمية إلى البرمجة التعريفية.
• قم ببناء مكونات React ودمجها لإنشاء واجهات مستخدم معيارية وقابلة لإعادة الاستخدام.
• اتقن JSX لكتابة تعليمات برمجية تشبه HTML مباشرةً داخل JavaScript.
• إدارة البيانات الديناميكية باستخدام Props وState.
• تعامل مع تفاعل المستخدم مع مستمعي الأحداث والخطافات مثل useState.
• ترحيل مشروع JavaScript بسيط بسلاسة إلى تطبيق Next.js قوي.
• فهم الفرق الأساسي بين مكونات الخادم والعميل.

وصف الدورة هل أنت مستعد لإنشاء تطبيقات ويب حديثة وعالية الأداء ولكنك تشعر بالارتباك بسبب العدد الهائل من المكتبات وأطر العمل؟ مرحبًا بك في إصدار "React Foundations" من سلسلة Mastering Next.js. يعد Next.js إطار العمل الأكثر شيوعًا لبناء تطبيقات React اليوم. ومع ذلك، لإتقان Next.js حقًا، يجب عليك أولاً فهم أسس React نفسها. تم تصميم هذه الدورة التدريبية لسد الفجوة بين JavaScript الأساسية وتطوير Next.js الاحترافي. نحن لا نوضح لك كيفية كتابة التعليمات البرمجية فحسب؛ نعرض لك كيف يعمل الويب. نبدأ من البداية — نتعامل مع DOM باستخدام JavaScript الفانيليا — ونقدم ميزات React وNext.js تدريجيًا. بحلول نهاية هذه الدورة التدريبية، لن تكون "تستخدم" إطار العمل فحسب؛ ستفهم سبب وجودها وكيف تعمل على تحسين تجربة المطور لديك. ما الذي يجعل هذه الدورة مختلفة؟ على عكس الدورات التدريبية الأخرى التي تقفز مباشرة إلى قالب معياري معقد، فإننا نبدأ بملف HTML بسيط. نضيف React عبر CDN، ونقدم JSX، ونطور مشروعنا ببطء إلى بيئة Next.js واسعة النطاق. يضمن هذا النهج "التأسيسي" أنك لن تشعر أبدًا بالضياع عند النظر إلى قاعدة التعليمات البرمجية الحديثة. محتوى الدورة التدريبية والوحدات النمطية1. مقدمة إلى النظام البيئي

• ما هو Next.js وكيف يرتبط بـ React؟
• "العناصر الأساسية" لتطبيق ويب: التوجيه والعرض وجلب البيانات.

2. عرض واجهات المستخدم (UI)

• فهم DOM (نموذج كائن المستند).
• الفرق بين البرمجة الحتمية (Vanilla JS) والبرمجة التعريفية (React).

3. مفاهيم React الأساسية

• إنشاء أول مكون React.
• كتابة العلامات باستخدام JSX: القواعد وأفضل الممارسات.
• جعل المكونات قابلة لإعادة الاستخدام باستخدام Props.

4. التفاعل والحالة

• عرض القوائم والمحتوى الشرطي.
• التعامل مع الأحداث (النقرات والمدخلات وما إلى ذلك).
• إدارة تدفق البيانات باستخدام خطاف useState.

5. من React إلى Next.js

• لماذا ننتقل إلى إطار العمل؟ القياس والتحسين.
• تثبيت Next.js وجهاز توجيه التطبيق.
• ترحيل مشروعك: من Index.html إلى page.js.

6. الخادم مقابل مكونات العميل

• فلسفة Next.js: لماذا "الخادم أولاً"؟
• متى يتم استخدام "استخدام العميل" وكيفية تحسين الأداء.

المتطلبات

• المعرفة الأساسية بـ HTML وCSS.
• الفهم الأساسي لجافا سكريبت (المتغيرات والوظائف والمصفوفات).
• لا توجد خبرة سابقة في React أو Next.js. مطلوب!

لمن هذه الدورة التدريبية:

• المطورون المبتدئون الذين يريدون بداية قوية في النظام البيئي React/Next.js.
• مطورو Vanilla JS الذين يتطلعون إلى ترقية مهاراتهم إلى أطر العمل الحديثة.
• المصممين أو مديري المنتجات الذين يرغبون في فهم الأسس التقنية للتطبيقات التي يعملون عليها.
• المبرمجون الذين تعلموا أنفسهم والذين يريدون مسارًا منظمًا من "Hello World" إلى "Hello World" إعداد Next.js بدرجة احترافية.

لماذا تتعلم Next.js الآن؟ Next.js هو الإطار المفضل لشركات مثل TikTok، وTwitch، وHulu. فهو يتعامل مع "الأعمال الثقيلة" - مثل التوجيه والتحسين والعرض من جانب الخادم - حتى تتمكن من التركيز على بناء تجارب مستخدم جميلة. إن إتقان الأساسيات هو خطوتك الأولى نحو أن تصبح مطور Full-Stack من الدرجة الأولى. قم بالتسجيل اليوم وابدأ في بناء مستقبل الويب!

ما هي المتطلبات الأساسية لدخول الدورة والتسجيل فيها على موقعنا؟ رحلة التعلم:

(احصل على الدورة للدخول إلى الموقع والتسجيل)

يجب أن يكون لديك بريد إلكتروني (حساب بريد) تتذكره لنفسك وأيضًا يجب أن تتذكر كلمة مرور البريد الإلكتروني الذي ستسجل به ، وإذا لم يكن لديك حساب بريد إلكتروني ، فمن الأفضل إنشاء حساب (Gmail)