تعلم React - دورة برمجة

تعلّم React من خلال كتابته. يأخذك هذا البرنامج التعليمي لـ React JS من أول سطر JSX تكتبه إلى Hooks وإدارة الحالة والتطبيقات الكاملة، كما أن كل مكوّن تكتبه يُعرض مباشرةً على هاتفك في معاينة مباشرة.

88 دورة و324 درسًا تفاعليًا، من المستوى A1 إلى C1. اقرأ مفهومًا قصيرًا، واكتب كودًا حقيقيًا، واضغط على تشغيل لرؤية النتيجة. لا تحتاج إلى حاسوب محمول أو إلى إعدادات مسبقة.

اكتب الكود على هاتفك

• محرّر كود مخصّص لـ JSX، مع معاينة مباشرة تعرض مكوّنك داخل التطبيق

• بيئة التشغيل (ReactDOM وBabel) مضمّنة في التطبيق، لذلك يعمل كودك على الجهاز، وليس على خادم

• مشاريع متعددة الملفات: استورد مكوّنًا إلى مكوّن آخر، بالطريقة التي تُبنى بها التطبيقات الحقيقية

• اضغط على الزر المعروض، واكتب في النموذج، وشاهد واجهة المستخدم تستجيب

المختبر

• Hooks Lab: شاهد كل تغيير في الحالة وكل إعادة تصيير لحظة حدوثها

• مقابض Props: غيّر خاصية باستخدام شريط تمرير وشاهد المكوّن يتحدّث

• محلّل التصيير وخط زمني للحالة (Pro): اكتشف أي مكوّن أُعيد تصييره ولماذا، ثم راجع حالاتك السابقة

خطوة بخطوة، من المبتدئ إلى المتقدم

• الأساسيات: JSX، المكوّنات، الخصائص، الحالة، الأحداث، القوائم والمفاتيح، والتصيير الشرطي

• Hooks: useState وuseEffect وuseRef وuseReducer وHooks مخصّصة وuseLayoutEffect وغير ذلك

• النماذج والتحقق، React Hook Form، وحقول الإدخال المُدارة وغير المُدارة

• إدارة الحالة: Context وRedux Toolkit وRTK Query وZustand وJotai

• React Router وجلب البيانات وTanStack Query وSWR وواجهة المستخدم المتفائلة

• TypeScript والاختبار وStorybook وإمكانية الوصول والأمان

• الأداء: التخزين المؤقت، وتقسيم الكود، وSuspense، والانتقالات، والقوائم الافتراضية

• React 19 وServer Components وSSR وإعادة الإماهة والبث

• Next.js App Router وجلب البيانات والمصادقة

• أساسيات React Native لمطوّري الويب

• النشر والواجهات الأمامية المصغّرة واتحاد الوحدات

ابنِ مشاريع حقيقية

20 مشروعًا إرشاديًا، في خطوات صغيرة متتالية: زر إعجاب، وبطاقات ملف شخصي، وحاسبة إكرامية، ولعبة أسئلة، وساعة إيقاف، ونموذج تسجيل، وسلة تسوق، وشريط صور، وقائمة مقسّمة إلى صفحات، وتطبيق مهام وغير ذلك. تتحقق كل خطوة من أن مكوّنك يعمل فعلًا قبل الانتقال إلى الخطوة التالية.

تدرّب حتى تتقنها

• 30 مهمة برمجية (سهلة ومتوسطة وصعبة) حول Hooks والتصيير والنماذج وContext والأداء

• UI Match: أعد بناء مكوّن مستهدف واحصل على نتيجة للبنية والأسلوب والنص

• Bug Hunt: اعثر على الخطأ في مكوّن معطّل وأصلحه

• Component Recall: اكتب الجزء الناقص مجددًا داخل كود سبق أن جعلته يعمل، مع التكرار المتباعد

• اختبارات قصيرة تضم 50 سؤالًا، و50 سؤالًا للمقابلات، وورقة غش

• تحدٍ يومي، وسلاسل إنجاز، وXP ولوحة متصدرين

المرشد بالذكاء الاصطناعي (PRO)

هل علقت في Hook أو في خطأ؟ اسأل مرشد AI عن شرح واضح، ودَع AI يراجع كودك ويقترح إصلاحًا، أو ينشئ درسًا مخصصًا حول أي موضوع.

الشهادة (PRO)

اجتز الاختبار النهائي واحصل على شهادة يمكنك مشاركتها.

المجاني وPRO

المجاني: الدورة الأولى، ومشروع إرشادي واحد، ومهمتان برمجيتان، ومحرّر الكود مع المعاينة المباشرة، وHooks Lab، ومقابض Props، وBug Hunt، و3 عمليات تحقق من UI Match يوميًا. يعرض الإصدار المجاني إعلانات.

PRO: جميع الدورات البالغ عددها 88، وجميع المشاريع والمهام، ومرشد AI، ومحلّل التصيير وخط الحالة الزمني، واختبار الشهادة، ومن دون إعلانات.

التطبيق متاح بـ22 لغة.

React علامة تجارية لـ Meta Platforms, Inc. وNext.js علامة تجارية لـ Vercel, Inc. هذا تطبيق تعليمي مستقل، وغير تابع لـ Meta أو Vercel أو معتمد منهما.

سياسة الخصوصية: https://www.coddykit.com/terms/privacy-policy