أساسيات React
هل تتساءل عن ما هو ريأكت؟ إنه المكان الذي يتلاقى فيه سحر الإبداع وقوة البرمجة. ريأكت هو أحد أقوى إطارات العمل في عالم الويب، حيث يتيح لك بناء تطبيقات فريدة ومذهلة بأسلوب سلس ومنظم. ستتعلم كيفية إنشاء واجهات مستخدم رائعة…
دورة تتضمن
- 10 أقسام
- 88 المواضيع
- 12 الإختبارات
- شهادة دورة
- 10أقسام
- 88درسًا
- 12اختبارًا
- شهادةإتمام
المحاضرأحمد علي
هل تتساءل عن ما هو ريأكت؟ إنه المكان الذي يتلاقى فيه سحر الإبداع وقوة البرمجة. ريأكت هو أحد أقوى إطارات العمل في عالم الويب، حيث يتيح لك بناء تطبيقات فريدة ومذهلة بأسلوب سلس ومنظم. ستتعلم كيفية إنشاء واجهات مستخدم رائعة باستخدام JSX وتكوين مكونات قابلة لإعادة الاستخدام.
لكن هل تساءلت يومًا عن الفرق بين ريأكت وجافاسكريبت التقليدية؟ سنجيب عن هذا السؤال ونستكشف الأسباب التي تجعل ريأكت يبرز كالنجم الساطع في عالم برمجة الويب.
سنغوص معًا في عالم تطبيقات الصفحة الواحدة ونكتشف كيف يمكن لريأكت أن يحوّل تجربة المستخدم إلى رحلةٍ سلسة ولا تُنسى. ستكتشف قوة المكونات وكيف يمكنك استخدامها لبناء تطبيق "Calories Tracker" الذي سيكون مثالًا رائعًا على إمكانيات ريأكت.
وهذا ليس كل شيء! ستتعلم كيفية استخدام "useState" لإدارة حالة التطبيق وكيف تتفاعل مع الأحداث وتتعقب التغييرات. سنقوم بتنقيح المظهر باستخدام أنماط التنسيق ونضيف تفاصيل مبهرة باستخدام التحكم الشرطي وأنماط النمط الديناميكي.
إن كورس "أساسيات ريأكت" يعد بأن يكون النقطة التي ستغير بها مسارك المهني. إنه الفرصة التي لا يمكنك تفويتها للانغماس في تجربة تعلم ممتعة وإتقان مهارات تطوير الويب الحديثة.
إذا كنت تبحث عن التحدي الجديد والفرصة لتطوير مهاراتك وبناء تطبيقات لافتة للنظر، فلا تفوت فرصة امتلاك هذا الكورس المميز! انطلق في عالم ريأكت الآن واكتشف الإمكانيات اللامحدودة التي تنتظرك في عالم تطوير الويب المستقبلي. اجعل "Calories Tracker" يكون المشروع الذي يحمل اسمك نحو عالم المبدعين في عالم التكنولوجيا.
اشترك في دورة "أساسيات React" اليوم! وابدأ التعلم
محتوى الدورة
- 1المقدمة3 دروس يحتوي على دروس مجانية
- 2مواد الدورة
- 3مقدمة لمكتبة React5 دروس · 1 اختبار
- ما هي React؟
- مختصر كتابي: ما هي ريأكت
- المقارنة بين React و JavaScript التقليدية
- React وتطبيقات الصفحة الواحدة
- مختصر كتابي: ريأكت وتطبيقات الصفحة الواحدة
- اختبار: مقدمة لمكتبة React
- 4أساسيات React25 درسًا · 2 اختباران
- ما هي العناصر؟
- مختصر كتابي: ما هي العناصر؟
- مقارنة الكود التصريحي بالإلزامي
- مختصر كتابي: مقارنة الكود التصريحي باللإلزامي
- إنشاء مشروع React
- مختصر كتابي: انشاء مشروع ريأكت (Create React Project)
- هيكل مشروع React
- ما هو JSX؟
- مختصر كتابي: ?What is JSX
- كيف تعمل React؟
- بناء عنصر مخصص
- قيود JSX
- تنسيق أساسي للعناصر
- ربط البيانات بـ JSX
- مختصر كتابي: Binding data to JSX
- تمرير البيانات إلى العناصر
- مختصر كتابي: Passing data to components
- اختبار قصير: Passing data to components
- إضافة كود JavaScript إلى العنصر
- تقسيم العناصر
- الخاصية children
- مختصر كتابي: Children prop
- تمرين بناء العناصر
- شرح JSX بالتفصيل
- تنظيم ملفات العناصر
- كتابة العنصر كدالة سهمية
- اختبار أساسيات ريأكت (React Basics)
- 5حالة العنصر23 درسًا · 3 اختبارات
- الاستماع إلى الأحداث
- مختصر كتابي: Listening to Events
- اختبار قصير: Listening to Events
- كيف يتم تنفيذ دوال العناصر؟
- مقدمة في إدارة الحالة
- مختصر كتابي: Introduction to State Management
- اختبار قصير: Introduction to State Management
- نظرة أعمق على الخطّاف useState
- مختصر كتابي: Closer look at useState
- إضافة حقول الإدخال إلى النموذج
- إرسال النموذج بالطريقة القديمة
- مختصر كتابي: Form submit old way
- التعامل مع مدخلات المستخدم
- حالة واحدة مقابل حالات متعددة
- مختصر كتابي: Single state vs multiple states
- تحديث الحالة بناءً على الحالة السابقة
- مختصر كتابي: Update state from previous state
- استخدام النماذج
- الربط ثنائي الاتجاه
- مختصر كتابي: Two way binding
- إرسال البيانات من العنصر الابن إلى العنصر الأب
- مختصر كتابي: Send child information to parent
- رفع الحالة إلى الأعلى
- العناصر المتحكَّم بها وغير المتحكَّم بها
- مختصر كتابي: Controlled vs uncontrolled components
- اختبار حالة العنصر (Component State)
- 6عرض القوائم5 دروس · 1 اختبار
- عرض قائمة من البيانات
- مختصر كتابي: Rendering List of Data
- استخدام القوائم ذات الحالة
- لماذا تُعد المفاتيح (keys) مهمة في القوائم؟
- مختصر كتابي: ?Why Keys are important to Lists
- اختبار: عرض القوائم
- 7العرض الشرطي4 دروس · 1 اختبار
- السلوك الشرطي
- مختصر كتابي: Conditional behavior
- إضافة تنسيقات متغيرة
- مختصر كتابي: Dynamic style change
- اختبار العرض الشرطي (Conditional Rendering)
- 8التصميم المتغير12 درسًا · 2 اختباران
- مقدمة في التنسيق
- مختصر كتابي: Introduction to styling
- اختبار قصير: Introduction to styling
- أسماء أصناف CSS
- مختصر كتابي: CSS class names
- مكتبة styled-components
- مختصر كتابي: Styled components
- خصائص styled-components
- مختصر كتابي: Styled component props
- استعلامات الوسائط في styled-components
- استخدام CSS Modules
- مختصر كتابي: Using CSS modules
- التنسيق المتغير باستخدام CSS Modules
- اختبار التصميم المتغير (Dynamic Styling)
- 9تدريب عملي11 درسًا · 1 اختبار
- تحويل ملفات CSS إلى CSS Modules
- إضافة ألوان السمة
- تنسيق النموذج باستخدام ألوان السمة
- تطبيق تخطيط Grid على النموذج
- تطبيق السمة على قائمة السجلات
- إضافة قسم القائمة
- التصفية حسب التاريخ
- إضافة نافذة منبثقة للنموذج
- إضافة زر إلغاء للنموذج
- محتوى بديل للقائمة الفارغة
- إصلاح الأخطاء
- اختبار: التدريب العملي
- 10الخاتمة
- الاختبار النهائي
- الاختبار النهائي للدورة
عن المعلم
التقييمات والمراجعات
محمد ابوعيسى
اعجبني طريقة التفكير و البحث
Anas Bayoumi
حقيقي الدورات كلها فيها معلومات مهمة جده وانا استفدت من كل حاجة
Mohamed Nasser Abdalla
المحتوى مكتوب بأسلوب سهل وقريب، يشرح ريأكت بطريقة تشجعك تبدأ بدون خوف، ويخليك تحس إن التطبيق العملي ممكن خطوة بخطوة.
Elsayed Bondok
أعجبني التمكن الواضح الذي أظهره الباشمهندس أحمد علي، فهو ليس فقط مهندس برمجيات ولكن مدرس محترف - يستطيع توصيل المعلومة بسهولة - وتبسيط المعقد منها بوضوح - وفقكم الله جميعاً - خوفي أن لا يكون هناك جديد في المدرسة ( واضح أن تواريخ التسجيل منذ 2023 ونحن الآن 2026 ) - الدنيا تغيرت كثيراً وأكيد هناك الجديد لأن المنافسة في عالم الذكاء الاصطناعي ضرب نار - فأرجو تطمين المتدربين بأنكم مازلتم متواجدون وبنفس أو أكثر قوة - هذا ما يسعدنا
طالب وجد هذا التقييم مفيد
مريم زكريا
حقيقي كورس ممتاز جدا التدرج في توصيل المعلومات بدون ملل وده كما عهدناه في منصة المدرسة ويزيد عليه البشمهندس أحمد على القدرة الفائقة على توصيل المعلومة بدقة وفهم ما وراء الكواليس والتسلسل والسلاسة أول مرة أشوف إتقان الشرح رغم أني لأول مرة أتعامل مع ال react جزاكم الله خيرا حقيقي أكثر من رائع يا بشمهندس أحمد على ألف شكر
basel_serhan
كورس ممتاز يشرح الأساسيات بشكل واضح وسلس
Mohamed Tamer
10/10
Ahmed Fathy
⭐⭐⭐⭐⭐
SidiAhmed Aboubekar
كورس منظم ومناسب جدا لمبتدئ مثلي وغني بالمعلومات شكرا جزيلا الأستاذ أحمد علي
تقرير
عضو الحظر؟
من فضلك أكد أنك تريد منع هذا العضو.
لن تتمكن بعد هذه الخطوة من:
- ذكر هذا العضو في منشورات
- قم بدعوة هذا العضو إلى المجموعات
- مراسلة هذا العضو
يرجى الانتظار بضع دقائق حتى تكتمل هذه العملية.
طريقة تفكير البشمهندس والكلام عن التفاصيل اللي خاصة بفهم ما وراء الكود 2- تعمد عرض الأخطاء ومحاولة إصلاحه وكيف يتم اصلاحه. 3- كورس متدرج .. يبدأ معك من التعريف بريأكت بدقة إلى أن يصل إلى التعديل بالcss بشرط يعني تظهر أو تخفي سلوك معين في الcss أو ال html بشرط متغير. 4- طبق عملي على مشروع ومحاولة التحسين في آخر سيكشن للشكل .. 5- أهم ما تعملته المكونات وحل مشكلة تكرار الrendering