أساسيات React(27)
هل ترغب في تعلم كيفية إنشاء تطبيقات ويب احترافية باستخدام مكتبة ReactJS؟
- +500طالب
- 94درس
- 11أقسام
- 32اختبار
- متوسطالمستوى
تعرّف على الدورة
هل ترغب في تعلم كيفية إنشاء تطبيقات ويب احترافية باستخدام مكتبة ReactJS؟
ReactJS هي مكتبة JavaScript قوية تُستخدم لإنشاء تطبيقات ويب ديناميكية وتفاعلية. وهي واحدة من أكثر المكتبات شعبية في العالم، وتستخدمها العديد من الشركات الكبرى مثل Facebook و Netflix و Airbnb.
ستتعلم خلال هذه الدورة كل ما تحتاج إلى معرفته عن أساسيات ReactJS، لتنشئ بنفسك تطبيقات ويب تفاعلية وسهلة الاستخدام.
سنكون معك خطوة بخطوة لنتأكد من إتقانك لمبادئ ReactJS، مع التأكيد على تطبيق ما تتعلمه من خلال التدريب العملي، لكي تبني الثقة في قدرتك على استخدام مهاراتك الجديدة في بيئة عمل تحاكي ما يحدث في الحقيقية.
هناك العديد من الأسباب التي تجعلك تختار هذه الدورة لتعلم ReactJS:
- الدورة مصممة خصيصًا للمبتدئين، حتى لو لم يكن لديك أي خبرة في ReactJS.
- الدورة عملية، ولا تقتصر على شرح المفاهيم النظرية فقط، بل تعطيك الفرصة أيضًا لتطبيق ما تتعلمه من خلال تدريبات تحاكي بيئة العمل الواقعية.
- الدورة مدعومة من فريق من المدربين ذوي الخبرة الذين سيساعدونك على تعلم ReactJS بسرعة وكفاءة
ماذا تنتظر؟ اشترك الآن في هذه الدورة وابدأ تعلم ReactJS اليوم!
تشمل الدورة
- شهادة موثقة
- قياس مستوى التقدم والانجاز عبر الدورة
- إجابة من مشرفي الطلاب على كل الأسئلة
- فاعليات حصرية
- شارات تميز للطلبة المتقدمين
- اشعارات تذكير وتحفيز لإنهاء الدورة
- اشتراك مدى الحياة
دفع آمن ووصول فوري للدورة
ماذا ستتعلم خطوة بخطوة
اضغط على أي قسم لعرض دروسه. الدروس المجانية متاحة للمشاهدة قبل الاشتراك.
محتوى الدورة
- 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الخاتمة
- الاختبار النهائي
- الاختبار النهائي للدورة
تعلّم على يد م. أحمد علي
م. أحمد عليمهندس برمجيات ذو خبرة أكثر من عشر سنوات. عمل في أكبر شركات العالم مثل مايكروسوفت وجوجل وميتا، ويعمل حاليًا كمهندس برمجيات في Amazon Web Services (AWS). يمتلك مجموعة متوازنة من الخبرات والمهارات بين تقنيات الواجهة الأمامية والخلفية. هذا بجانب خبرته في تبسيط مواضيع كالخوارزميات وهياكل البيانات على قناته التعليمية على اليوتيوب.
ماذا قال الطلاب عن الدورة
التقييمات والمراجعات
اعجبني طريقة التفكير و البحث
حقيقي الدورات كلها فيها معلومات مهمة جده وانا استفدت من كل حاجة
المحتوى مكتوب بأسلوب سهل وقريب، يشرح ريأكت بطريقة تشجعك تبدأ بدون خوف، ويخليك تحس إن التطبيق العملي ممكن خطوة بخطوة.
أعجبني التمكن الواضح الذي أظهره الباشمهندس أحمد علي، فهو ليس فقط مهندس برمجيات ولكن مدرس محترف - يستطيع توصيل المعلومة بسهولة - وتبسيط المعقد منها بوضوح - وفقكم الله جميعاً - خوفي أن لا يكون هناك جديد في المدرسة ( واضح أن تواريخ التسجيل منذ 2023 ونحن الآن 2026 ) - الدنيا تغيرت كثيراً وأكيد هناك الجديد لأن المنافسة في عالم الذكاء الاصطناعي ضرب نار - فأرجو تطمين المتدربين بأنكم مازلتم متواجدون وبنفس أو أكثر قوة - هذا ما يسعدنا
حقيقي كورس ممتاز جدا التدرج في توصيل المعلومات بدون ملل وده كما عهدناه في منصة المدرسة ويزيد عليه البشمهندس أحمد على القدرة الفائقة على توصيل المعلومة بدقة وفهم ما وراء الكواليس والتسلسل والسلاسة أول مرة أشوف إتقان الشرح رغم أني لأول مرة أتعامل مع ال react جزاكم الله خيرا حقيقي أكثر من رائع يا بشمهندس أحمد على ألف شكر
كورس ممتاز يشرح الأساسيات بشكل واضح وسلس
10/10
⭐⭐⭐⭐⭐
كورس منظم ومناسب جدا لمبتدئ مثلي وغني بالمعلومات شكرا جزيلا الأستاذ أحمد علي
ومع مناسبتها للمبتدئ إلا ان البشمهندس بيحاول يخليها شاملة الجزء النظري والعملي ولا يغفل عن ال best practice ودايما بيسرش ويضرب امثلة للتوضيح , جزاه الله كل خير
شرح بسيط و فعال
شكرا بشمهندس أحمد على هذا الجمال والابداع فى تبسيط المعلومات
ما شاء الله شرح المهندس ممتاز لكن في ملاحظة بسيطة شتتنى أثناء التعلم و هى كثرة تغيير Styles أثناء الشرح , صراحة كانت تأخذ من تركيزى فى تعلم react بعض الشئ - كنت أفضل أن تكون النمط css ثابت من بداية الكورس بحيث يكون التركيز الكامل على محتوى React (طبعا الملاحظه دي بعيدا عن شرح جزئية ال Styled Components) و جزاكم الله خيرا
الشرح مع التطبيق العملي كان مهم جدا في سهوله توصيل المعلومات حتي في ظهور ال bugs واكتشاف الاخطاء كان بيثبت المعلومات اكتر وخلي فيه شئ من الواقعيه ان طبيعي نغلط وان الحاجه بتيجي بالممارسه والتطبيق الكتير..بارك الله في البشمهندس أحمد وكل القائمين علي العمل ده 👌👏
كورس مفيد جدا و طريقه شرح بسيطة و منظمة
:)
الدورة قيمة م حيث سهولة الشرح والامثلة والتطبيق وافضل حاجة م وجهه نظري انك بتبني مشروع ونتا بطبق
اسلوب الشرح ممتاز بتسيط المعلومات وطرح الامثلة المناسبة لتوضيح المفاهيم والافكار وطرق استخدامها والاستفادة منها
دورة أكثر من رائعة أهم ما يميزها هو الإهتمام بالتفاصيل اللى وراء كل خطوة فى بناء البروجيكت واللى بتخليك فاهم الأساس اللى بناء عليه عملنا خطوات معينة مش مجرد رص كود والسلام
كانت دورة اللهم لك الحمد صعبه بالبداية ك شي جديد لي ولكن بدات افهم حبة حبة ايه يعني رياكت وايه المكونات ومتحمس ادخل على الدورة القادمة للتوسع اكثر , شكرا منصة المدرسة على جهدكم ❤
الشرح مبسط, و مبني على بعضه بشكل منطقي و منظم. الكورس غطى مواضيع متوعه بحيث يعطيك نظرة عامة على React
جزاكم الله خيرا
بالنسبالي طريقه الشرح وتوصيل المعلومه هي اهم حاجة, وبشمهندس احمد كان بيعمل ده بكل سهوله وكان بيحاول يوصل المعلومه بأكتر من طريقه. ف بالنسبة لحد مبتدأ ف React ، الحمدلله قدرت استوعب قدر كبير من المفاهيم وقدرت اطبقها مع البشمهندس في البروجكت
جزاكم الله خيرا. مجهود واضح لتمرير المعارف بشكل واضح وبشرح مستفيض. بارك الله في علمكم.
الدورة جميلة لحد لسه بيبدأ ريآكت٫ ضروري تطبق البروجكت اللي بيتشرح علشان هتسلمه في النهاية٫ لا أنصح بالدورة لحد عنده خبرة في ريآكت و اشتغل بيها مشاريع قبل كدا.
السلام عليكم ورحمة الله وبركاته الصراحة الدورة هاي من أفضل الدورات الي شفتها والي عجبني مسك مشروع واحد وشرح فيه كل شي ممكن يواجهك بدل الكورسات الثانية الي تعطيك اكثر من مشروع وكلهم نفس المواضيع ومافي تطور. أسلوب جميل واضح ويمشي معاك خطوة بخطوة و الجميل ان في تفصيل كتابي لو تحب تقرأ أو تحتفظ بالمعلومة. أنا استمتعت في كل الدورة الحمد الله: وننتظر الدورة الثانية ويعطيكم العافية جميعا أستمر
الأسئلة الشائعة
كل ما تحتاجه هو جهاز كمبيوتر متصل بالإنترنت وبعض المعرفة الأساسية بـ HTML و CSS و JavaScript.
يمكنك التواصل في أي وقت بالمدربين أو فريق الدعم عبر البريد الإلكتروني أو الدردشة. سيكونون سعداء بمساعدتك في أي أسئلة أو استفسارات قد تكون لديك.
هذه الدورة مناسبة لأي شخص يريد تعلم ReactJS، سواء كنت مبتدئًا أو مطورًا متوسط المستوى؛ حيث إن إضافة React إلى مجموعة مهاراتك، يعد خطوة ممتازة لأي مطور يسعى للحصول على ميزة في سوق العمل التنافسي.
ابدأ أساسيات React اليوم
اشتراك مدى الحياة، شهادة إتمام، ودعم من فريق المدرسة طوال رحلتك.
طريقة تفكير البشمهندس والكلام عن التفاصيل اللي خاصة بفهم ما وراء الكود 2- تعمد عرض الأخطاء ومحاولة إصلاحه وكيف يتم اصلاحه. 3- كورس متدرج .. يبدأ معك من التعريف بريأكت بدقة إلى أن يصل إلى التعديل بالcss بشرط يعني تظهر أو تخفي سلوك معين في الcss أو ال html بشرط متغير. 4- طبق عملي على مشروع ومحاولة التحسين في آخر سيكشن للشكل .. 5- أهم ما تعملته المكونات وحل مشكلة تكرار الrendering