تعلم React: دورة برمجة
تعلم React: دورة برمجة — تعلّم برمجة React من خلال كتابة JSX وتشغيله على هاتفك
تعلم React: دورة برمجة هو تطبيق مجاني للبدء على iOS وAndroid، يعلّم المبتدئين برمجة React ممن لديهم إلمام بسيط بـ HTML أو CSS أو JavaScript، كما يساعد المطورين الذين ينتقلون من إطار عمل آخر. اكتب JSX في محرر التعليمات البرمجية، واضغط على «تشغيل» ثم شاهد مكوّنك يُعرض في معاينة مباشرة داخل التطبيق. تنقلك 88 دورة و324 درسًا من إنشاء أول مكوّن، مرورًا بـ hooks وإدارة الحالة، وصولًا إلى Next.js، مع 20 مشروعًا إرشاديًا على طول الطريق.
- السعر
- مجاني، مع ترقية Pro
- المنصات
- iOS وAndroid
- اللغات
- 22
- التصنيف العمري
- 4+
- الإصدار
- 82.6.1
- يتطلب
- iOS 15.1 أو أحدث
- App Store
- 3.8 ★ (4)
يُعرض مكوّنك على الهاتف، وليس على خادم.
يأتي runtime وReactDOM وBabel مضمّنةً في التطبيق، لذلك تُجمّع JSX التي تكتبها وتُعرض على الجهاز. يمكنك الضغط على الزر الذي أنشأته للتو، والكتابة في النموذج، ورؤية واجهة المستخدم تستجيب؛ وهذه هي حلقة التغذية الراجعة التي تجعل فهم hooks يبدأ بالوضوح.
ما هو
تعلم React: دورة برمجة هي دورة React مجانية للبدء على iOS وAndroid، وتضم 88 دورة و324 درسًا تفاعليًا، بدءًا من السطر الأول من JSX ووصولًا إلى hooks وإدارة الحالة وReact 19 وNext.js App Router. يجمّع المحرر المضمّن التعليمات البرمجية على الجهاز ويعرض المكوّن في معاينة مباشرة، كما تتحقق 20 مشروعًا إرشاديًا من كل خطوة قبل الانتقال إلى التالية. هذا تطبيق تعليمي مستقل وغير تابع لـ Meta أو Vercel.
داخل التطبيق
كيف يبدو
الدورة
ما تغطيه دورة React
88 دورة مستمدة من قائمة التطبيق نفسها، ومرتبة بالطريقة المعتادة للمرور الأول على React.
React Kickoff وJSX وProps & Composition
المكوّنات، وواجهة المستخدم التصريحية، وكيف يحدّث React عنصر DOM، ثم قواعد JSX، وعرض القوائم، وتمرير البيانات إلى الأسفل باستخدام props.
State وEvents وForms وuseRef
useState ومعالجة الأحداث، والنماذج المتحكم بها مع التحقق، وuseRef للقيم والوصول إلى DOM من دون التسبب في إعادة العرض.
useEffect وجلب البيانات وCustom Hooks
متى تُشغَّل التأثيرات، ومصفوفات التبعيات، وحالات التحميل والأخطاء لاستدعاءات API، واستخراج المنطق القابل لإعادة الاستخدام في hooks الخاصة بك.
Context وRedux Toolkit وZustand
مشاركة الحالة من دون تمريرها عبر جميع المكوّنات باستخدام Context وuseReducer، ثم Redux Toolkit مع RTK Query وZustand وJotai للتطبيقات الأكبر.
التوجيه وReact Query والنماذج على نطاق واسع
التوجيه من جهة العميل وأنماط React Router، وحالة الخادم باستخدام TanStack Query وSWR، وReact Hook Form، وواجهة المستخدم المتفائلة.
الأداء والاختبار وTypeScript
العرض وحفظ النتائج مؤقتًا، وتقسيم الشيفرة، والقوائم الافتراضية، والاختبار باستخدام React Testing Library، وكتابة الأنواع للمكوّنات وhooks.
React 19 وServer Components وNext.js
Server Components وActions، وSSR وإعادة الإماهة، ثم Next.js App Router مع جلب البيانات والتخزين المؤقت والمصادقة.
كيف يعمل
كيف يعمل الدرس
الدرس عبارة عن مفهوم قصير يتبعه مباشرةً تعليمات برمجية تكتبها وتشغّلها، بحيث تظهر الفكرة والنتيجة على الشاشة نفسها.
اقرأ مفهومًا واحدًا
افتح دورة من مسار التعلم واقرأ درسًا قصيرًا، مثل كيفية تحديث الحالة أو سبب حاجة القائمة إلى keys. يوضح ملخص الدورة الدروس المجانية، حتى تتمكن من رؤية أسلوبها قبل الالتزام.
اكتب JSX واضغط على «تشغيل»
اكتب المكوّن في محرر التعليمات البرمجية وشغّله. تعرض المعاينة المباشرة مكوّنك داخل التطبيق، لتتمكن من النقر على الزر والكتابة في الحقل ورؤية ما تفعله التعليمات البرمجية.
تحقق منه، ثم طوّره
تؤكد الاختبارات القصيرة ومهمات البرمجة والمشاريع الإرشادية استيعابك للفكرة، كما يشرح مرشد الذكاء الاصطناعي hook أو خطأً لا تستطيع فهمه. تمنحك Bug Hunt وUI Match تدريبًا إضافيًا على المفهوم.
ماذا يتضمن
ما يقدمه التطبيق
88
دورة، 324 درسًا
بدءًا من JSX وprops والحالة، مرورًا بـ custom hooks والنماذج وContext وRedux Toolkit، وصولًا إلى Server Components وSSR وNext.js App Router، ومجمّعة من A1 إلى C1.
مباشر
محرر مع معاينة مباشرة
محرر تعليمات برمجية مصمم لـ JSX، مع عرض المكوّن داخل التطبيق. تتيح لك المشاريع متعددة الملفات استيراد مكوّن إلى آخر، بالطريقة التي تُبنى بها التطبيقات الحقيقية.
20
مشروعًا إرشاديًا
أنشئ زر إعجاب وبطاقات ملفات شخصية وآلة حاسبة للإكرامية ولعبة أسئلة وسلة تسوق وغير ذلك، خطوة صغيرة تلو الأخرى. تتحقق كل خطوة من أن المكوّن يعمل فعلًا.
المختبر
مختبر Hooks ومقابض props
شاهد كل تغيّر في الحالة وإعادة عرض لحظة حدوثه، وغيّر prop باستخدام شريط تمرير لترى المكوّن يتحدث. ويأتي محلل أداء العرض ومخطط زمني للحالة ضمن Pro.
30
مهمة برمجية
مهمات بمستويات سهلة ومتوسطة وصعبة حول hooks والعرض والنماذج وcontext والأداء، بالإضافة إلى UI Match وBug Hunt وComponent Recall مع التكرار المتباعد.
الذكاء الاصطناعي
مرشد الذكاء الاصطناعي
اطلب شرحًا، أو دع الذكاء الاصطناعي يراجع التعليمات البرمجية الخاصة بك ويقترح إصلاحًا، أو أنشئ درسًا مخصصًا حول أي موضوع. المرشد واختبار الشهادة جزءان من Pro.
الخلفية
ما الذي تحتاج فعلًا إلى فهمه لكتابة React، وبأي ترتيب؟
React هي مكتبة JavaScript لإنشاء واجهات المستخدم من مكوّنات صغيرة قابلة لإعادة الاستخدام، تعيد رسم نفسها عند تغيّر بياناتها. يتعثر معظم المبتدئين ليس بسبب الصياغة، بل بسبب النموذج الكامن وراءها: ما المقصود بالعرض، وما الذي يُعد حالة، ومتى تُشغَّل التأثيرات. إن تعلّم هذه الأفكار بالترتيب، مع وجود شيء على الشاشة لاختبار كل فكرة، أسرع من القراءة عنها كلها دفعة واحدة.
المكوّنات وpropsوحدة إعادة الاستخدام
المكوّن هو دالة تُرجع جزءًا من الواجهة، أما props فهي المدخلات التي يتلقاها من المكوّن الأب. وبما أن البيانات تتدفق إلى الأسفل عبر props، يمكنك قراءة المكوّن والتنبؤ بما سيرسمه.
الحالةما يتغير بمرور الوقت
الحالة هي بيانات يتذكرها المكوّن بين عمليات العرض، مثل النص الموجود في حقل أو ما إذا كانت قائمة ما مفتوحة. يؤدي تحديث الحالة إلى جدولة عرض جديد، وهي الآلية الوحيدة الكامنة وراء كل شاشة تفاعلية تقريبًا.
Hooks والتأثيراتحيث يتعثر المبتدئون
تتيح hooks مثل useState وuseRef وuseReducer للمكوّن الاحتفاظ بالحالة والوصول إلى DOM. يشغّل useEffect التعليمات البرمجية بعد العرض، وتُعد مصفوفة التبعيات الخاطئة المصدر الأكثر شيوعًا للحلقات والقيم القديمة.
العرض وإعادة العرضلماذا يبدو التطبيق بطيئًا
يعيد المكوّن العرض عندما تتغير حالته أو props الخاصة به، وكذلك تفعل المكوّنات الموجودة بداخله. إن معرفة ما تسبب في العرض هي نقطة البداية لكل إصلاح متعلق بالأداء، بدءًا من memoisation ووصولًا إلى تقسيم التعليمات البرمجية.
الملاءمة
لمن يناسب — ولمن لا يناسب
يناسبك إذا كنت
- لديك معرفة قليلة بـ HTML أو CSS أو JavaScript وتريد بدء React بطريقة صحيحة
- أنت مطوّر يستخدم إطارًا آخر وتحتاج إلى الانتقال إلى React بسرعة
- تتعلّم بأفضل صورة عندما تظهر النتيجة على الشاشة لحظة تشغيل الشيفرة
- تبني معرضًا لمشاريع صغيرة وتريد خطوات إرشادية
- تستعد لمقابلة في تطوير الواجهات الأمامية وتريد أسئلة للتدرّب عليها
ليس الأداة المناسبة لك إذا كنت
- لم يسبق لك التعامل مع JavaScript، لأن الدورة تفترض معرفة بسيطة بها
- تريد بناء مشروع كامل ونشره، وهذا لا يزال يتطلب حاسوبًا محمولًا
- تتوقع أن يكون كل شيء مجانيًا، فالدورة الأولى مجانية ويفتح Pro بقية المحتوى
- تريد دورة رسمية من فريق React، لأن هذا التطبيق مستقل
الأسئلة
الأسئلة الشائعة
هل يمكنك تعلّم برمجة React على الهاتف؟
يمكن تعلّم الأفكار الأساسية والمكوّنات وprops وstate وhooks على الهاتف إذا كنت قادرًا على تشغيل ما تكتبه. يضم تعلم React: دورة برمجة كلاً من ReactDOM وBabel، لذا تُعرض JSX في معاينة مباشرة على الجهاز. يصبح الحاسوب المحمول مفيدًا عندما تبدأ في بناء مشروع أكبر ونشره.
هل أحتاج إلى معرفة JavaScript قبل تعلّم React؟
المعرفة البسيطة مفيدة. يستهدف تعلم React: دورة برمجة الأشخاص الذين يعرفون بعض HTML أو CSS أو JavaScript، مثل المتغيرات والدوال والمصفوفات. إذا لم تكتب JavaScript من قبل، فتعلّمها أولًا، لأن دروس React تفترض قدرتك على قراءتها.
ما الفرق بين props وstate؟
إن props هي المدخلات التي يتلقاها المكوّن من المكوّن الأب، ولا ينبغي أن تتغير، بينما state هي البيانات التي يملكها المكوّن ويحدّثها بمرور الوقت. في تعلم React: دورة برمجة يمكنك رؤية ذلك في Hooks Lab، الذي يعرض كل تغيير في state وكل إعادة عرض، وفي مفاتيح props التي تتيح لك تغيير prop باستخدام شريط تمرير.
هل يعلّم التطبيق hooks مثل useEffect؟
نعم. يغطي تعلم React: دورة برمجة كلًا من useState وuseEffect وuseRef وuseReducer وcustom hooks وuseLayoutEffect. تتناول دروس منفصلة متى تُشغَّل التأثيرات، ومصفوفات التبعيات، والأخطاء الشائعة، مع وضع Bug Hunt للعثور على الأخطاء في المكوّنات المعطوبة.
هل React هو نفسه React Native، وهل يعلّم التطبيق كليهما؟
لا. React هي المكتبة المخصصة لبناء واجهات المستخدم، بينما تستخدم React Native الأفكار نفسها لبناء تطبيقات الهاتف المحمول. يعلّم تعلم React: دورة برمجة React للويب أولًا، وتساعد دورة أساسيات React Native مطوّري الويب على نقل هذه المهارات إلى الأجهزة المحمولة.
هل يغطي تعلم React: دورة برمجة Next.js وReact 19؟
نعم. تغطي الدورات ميزات React 19 وServer Components وSSR وإعادة الإماهة والبث التدريجي، إضافة إلى Next.js App Router مع جلب البيانات والتخزين المؤقت والمصادقة. توجد أيضًا دورة أساسيات React Native لمطوّري الويب.
ما نوع المشاريع التي يمكنني بناؤها؟
توجد 20 مشروعًا إرشاديًا، تُبنى خطوة صغيرة تلو الأخرى: زر إعجاب، وبطاقات ملفات شخصية، وحاسبة إكرامية، ولعبة اختبار، وساعة إيقاف، ونموذج تسجيل، وسلة تسوق، ودوّار صور، وقائمة مقسّمة إلى صفحات، وتطبيق مهام. تتحقق كل خطوة من عمل المكوّن قبل أن تتابع.
هل تعلم React: دورة برمجة مجاني؟
يمكن تنزيله مجانًا. يتضمن الإصدار المجاني الدورة الأولى، ومشروعًا إرشاديًا واحدًا، ومهمتي برمجة، ومحرر الشيفرة مع معاينة مباشرة، وHooks Lab، ومفاتيح props، وBug Hunt، وثلاث عمليات تحقق UI Match يوميًا، كما يعرض إعلانات. يفتح Pro جميع الدورات والمشاريع والمهام، ومرشد AI، ومحلّل العرض، واختبار الشهادة، ويزيل الإعلانات.
هل توجد شهادة أو تحضير للمقابلات؟
يمنحك اجتياز الاختبار النهائي شهادة قابلة للمشاركة، وهي جزء من Pro. وللمقابلات، توجد 50 سؤالًا للمقابلات، واختبار من 50 سؤالًا، وورقة غش للتدرّب على المفاهيم الأساسية.
هل تُشغَّل الشيفرة على خادم؟
لا. بيئة التشغيل مضمّنة في التطبيق، لذلك تُجمَّع شيفرتك وتُعرض على الجهاز. ولهذا يمكنك النقر على الزر الذي بنيته ورؤية واجهة المستخدم تستجيب داخل المعاينة.
ما اللغات والمنصات التي يدعمها؟
يعمل تعلم React: دورة برمجة على iOS وAndroid، وهو متاح بـ22 لغة. تصنيفه 4+ ويتطلب iOS 15.1 أو إصدارًا أحدث على iPhone.
ابدأ الآن
اعرض أول مكوّن لك اليوم
متاح مجانًا للبدء على iOS وAndroid، بـ22 لغة.
المزيد من CoddyKit
متاح على iOS و Android.