0Pricing
React Academy icon

React Academy

JSXFrontendWebMobileBeginner

أتقن ReactJS لبناء واجهات مستخدم ديناميكية مع ReactJS Academy.

🤖 مدعوم بالذكاء الاصطناعي📚 88 دورة👥 100,000+ متعلم⭐ تقييم 4.9
نظرة عامة على الدورة

بناء واجهات حقيقية باستخدام React

React هي مكتبة JavaScript التي تحدد كيفية بناء معظم واجهات الاستخدام الإنتاجية اليوم — من تطبيقات الصفحة الواحدة ومواقع Next.js إلى تطبيقات الجوّال والسطح البيني عبر الأنظمة الأساسية. تغطي هذه المسارات التخصص الكامل: معمارية المكونات، إدارة الحالة، جلب البيانات، الأداء، الاختبار، والنشر. وهي مبنية على كيفية عمل React فعلياً — المصالح، نموذج الألياف، دلالات الخطافات — وليس فقط واجهة API السطحية.

ما ستتعلمه

ستبدأ بـ JSX والـ props والحالة والمكونات المتحكم فيها، ثم الانتقال إلى useEffect وuseRef وuseReducer. تغطي الدورات العملية التوجيه باستخدام React Router v6، ومعالجة النماذج باستخدام React Hook Form، وحالة الخادم مع React Query و SWR، والحالة العامة مع Redux Toolkit و Zustand و Jotai. ستعمل مع TypeScript في React، وتكتب اختبارات التكامل والنهائية، وتبني أنظمة التصميم باستخدام Storybook، وتتعامل مع واجهات الاستخدام في الوقت الفعلي عبر WebSockets، وتشحن واجهات برمجية آمنة من حيث النوع باستخدام tRPC. يتضمن المسار أيضاً Next.js App Router ومكونات الخادم وإجراءات الخادم والمصادقة باستخدام NextAuth.js.

مسار التعلم

خمسة وتسعون دورة تتراوح من A1 إلى C1. تؤسس دورات A1 و A2 أساسيات React و JSX والتصيير وحركات CSS والاستمرارية في التخزين المحلي والوضع الداكن. تبني دورات B1 الثقة مع أنماط السياق و i18n و React Spring و Framer Motion والسحب والإفلات باستخدام dnd-kit والجداول البيانات المعقدة مع TanStack Table. تتناول دورات B2 التصيير والذاكرة المؤقتة و Suspense وتقسيم الأكواد و React Native لمطوري React والنشر إلى Vercel و AWS و Electron للتطبيقات سطح المكتب. ينتهي المستوى C1 بمواضيع متقدمة: معمارية الواجهات الدقيقة، استكشاف SSR والهيدريشن العميق، Module Federation، Islands Architecture مع Astro، تكامل WebAssembly، Edge Rendering مع Cloudflare Workers، وOpenTelemetry لمراقبة الواجهة الأمامية.

كيفية عملها

تنقسم كل دورة إلى دروس قصيرة ومركزة تكملها في محرر الأكواد المدمج مع ملاحظات فورية. يتوفر مدرس ذكي اصطناعي عندما تواجه صعوبة في فهم مفهوم أو اختبار فاشل. يمكنك العمل على المسار بالتسلسل أو الانتقال إلى المستوى الذي يطابق خبرتك الحالية.

ابدأ التعلم →

كيف ستتعلم

🎯
دروس تفاعلية
تمارين برمجة عملية مع ردود فعل فورية
🤖
معلم الذكاء الاصطناعي
احصل على مساعدة فورية من معلمنا الذكي عندما تعلق
💻
محرر مدمج
اكتب وشغّل الأكواد مباشرة في متصفحك
🏆
الشهادة
احصل على شهادة عند إكمالك للدورة
المنهج الدراسي

88 دورة

كل الدورات في مسار تعلم React Academy.

01

الانطلاقة مع React: المفاهيم والإعداد

A13 دروس

ابدأ بأساسيات React: المكوّنات، وواجهة المستخدم التصريحية، وكيف يحدّث التفاضل DOM بكفاءة. ثم أعدّ مشروعًا (مثل Vite)، وشغّل خادم تطوير، واع…

02

أساسيات JSX والعرض

A13 دروسPRO

تعلّم قواعد JSX: التعبيرات والسمات، وإرجاع الأجزاء، وعرض القوائم باستخدام المفاتيح، والشروط البسيطة، وخيارات التنسيق (وحدات CSS، والأنماط ا…

03

React DevTools وتصحيح الأخطاء

A24 دروسPRO

أتقنوا إضافة React DevTools للمتصفح لفحص أشجار المكوّنات وتحليل عمليات التصيير وتصحيح أخطاء الحالة والخصائص بفاعلية.

04

الرسوم المتحركة والانتقالات في CSS مع React

A24 دروسPRO

أنشئ رسومًا متحركة سلسة للدخول والخروج وتغيّر الحالة في React باستخدام انتقالات CSS والإطارات الرئيسية — من دون الحاجة إلى مكتبة للرسوم الم…

05

رفع الحالة إلى الأعلى وحلول تمرير الخصائص

A24 دروسPRO

شاركوا الحالة بين المكوّنات الشقيقة برفعها إلى الأعلى، وافهموا متى يصبح تمرير الخصائص مشكلة تستحق الحل.

06

التخزين المحلي واستمرارية الحالة

A24 دروسPRO

حافظ على حالة React عبر إعادة تحميل الصفحات باستخدام localStorage، وتعامل مع المزامنة بين علامات التبويب، واختر واجهة تخزين المتصفح المناسب…

07

الوضع الداكن باستخدام React

A24 دروسPRO

أنشئوا نظامًا متينًا للوضع الداكن باستخدام خصائص CSS المخصصة وسياق React واستعلام الوسائط prefers-color-scheme، مع منع ظهور السمة الخاطئة م…

08

الخصائص والتأليف

A23 دروسPRO

مرّر البيانات باستخدام الخصائص ، واضبط القيم الافتراضية البسيطة عبر التفكيك، وألّف واجهات المستخدم باستخدام children ، وفضّل التأليف على ال…

09

أساسيات الحالة والأحداث

A23 دروسPRO

أتقن useState ومعالجة الأحداث: حدّث الحالة بشكل صحيح، وتعامل مع onClick/onChange، واستعد لاستخدام المدخلات المُتحكَّم فيها.

10

النماذج والتحقق من الصحة (مقدمة)

A23 دروسPRO

تعلّم إنشاء نماذج مُتحكَّم فيها تحتوي على مدخلات متعددة، وتطبيق التحقق الأساسي من الصحة، ومعالجة عمليات الإرسال بسلاسة في React.

11

أساسيات التوجيه

A23 دروسPRO

افهم التوجيه من جهة العميل: كيف تبدّل تطبيقات SPA العروض من دون إعادة تحميل الصفحة بالكامل، وكيفية استخدام المسارات والمعاملات الأساسية، وح…

12

useRef وDOM

A23 دروسPRO

أتقن useRef : احتفظ بالقيم بين عمليات التصيير من دون التسبب في عمليات تصيير جديدة، واصل إلى عقد DOM، وأدر المؤقتات بأمان.

13

الفحص الاصطلاحي والمعايير

A23 دروسPRO

حافظ على نظافة الشيفرة باستخدام ESLint وقواعد React، ونسّقها تلقائيًا باستخدام Prettier . أضف السكربتات وأصلح المشكلات بسرعة.

14

المكوّنات المُتحكَّم فيها وغير المُتحكَّم فيها

A22 دروسPRO

أتقن المدخلات المُتحكَّم فيها وغير المُتحكَّم فيها: تعلّم متى تختار كل نوع، وأنماط ref البسيطة، والقيم الافتراضية الآمنة.

15

وضع React Strict وأفضل الممارسات

B14 دروسPRO

تعلّموا وظيفة StrictMode والتحذيرات التي يعرضها واصطلاحات البرمجة التي تجعل تطبيقات React أسهل في الصيانة.

16

البوابات والنوافذ المنبثقة في React

B14 دروسPRO

صيّروا المحتوى خارج التسلسل الهرمي لـ DOM الأب باستخدام React Portals لإنشاء النوافذ المنبثقة والتلميحات والتراكبات.

17

واجهة React Children ونمط Slots

B14 دروسPRO

تعامَلوا مع props.children وأدوات React.Children، ونفّذوا واجهات برمجية مرنة للمكوّنات القائمة على نمط slots.

18

المكوّنات غير المتحكَّم بها وعمليات رفع الملفات

B14 دروسPRO

استخدموا حقول الإدخال غير المتحكَّم بها مع useRef، واقرؤوا قيم حقول الملفات، وعالِجوا سير عمل رفع الملفات في React.

19

أنماط React Context والأداء

B14 دروسPRO

صمّموا موفّري Context يقلّلون عمليات إعادة التصيير باستخدام الحفظ المؤقت، وتقسيم السياقات، وأنماط المحددات.

20

التدويل (i18n) في React

B14 دروسPRO

أضيفوا دعمًا للغات متعددة إلى تطبيقات React باستخدام react-i18next، وأديروا ملفات الترجمة، وعالِجوا التبديل بين اللغات المحلية.

21

واجهات API للمتصفح في React

B14 دروسPRO

ادمجوا واجهات API القوية للمتصفح — Clipboard وGeolocation وNotifications وIntersectionObserver — في مكوّنات React مع التنظيف الصحيح ومعالجة…

22

إزالة التكرار وتحديد المعدل في React

B14 دروسPRO

امنعوا إعادة العرض المفرطة واستدعاءات API الزائدة عبر تطبيق نمطي debounce وthrottle كخطافات React قابلة لإعادة الاستخدام لأحداث البحث والتم…

23

الإكمال التلقائي للنماذج والبحث التنبؤي

B14 دروسPRO

أنشئوا من الصفر مكوّنات إكمال تلقائي وبحث تنبؤي سهلة الوصول وقابلة للتنقل بلوحة المفاتيح باستخدام حالة React وrefs، من دون الحاجة إلى مكتبة

24

إدارة النماذج باستخدام React Hook Form

B14 دروسPRO

أنشئوا نماذج مرنة وعالية الأداء في React باستخدام React Hook Form: التسجيل والتحقّق من الصحة وعرض الأخطاء ودمج المخططات.

25

إدارة الحالة باستخدام Zustand

B14 دروسPRO

استخدموا Zustand لإدارة الحالة العامة في تطبيقات React: المخازن والإجراءات والمحدّدات والاستمرارية والتكامل مع أدوات المطوّرين.

26

أنماط React Router v6 المتقدمة

B14 دروسPRO

تجاوزوا المسارات الأساسية باستخدام التخطيطات المتداخلة وأدوات التحميل والإجراءات والمسارات المحمية وإدارة الحالة عبر معاملات البحث.

27

TypeScript مع React: كتابة أنواع المكوّنات والخطافات

B14 دروسPRO

أضيفوا TypeScript إلى مشاريع React: اكتبوا أنواع الخصائص والأحداث والخطافات والسياق والمكوّنات العامة بثقة.

28

TanStack Table: جداول البيانات المعقدة

B14 دروسPRO

أنشئوا جداول بيانات جاهزة للإنتاج مع الفرز والتصفية والترقيم وتحديد الصفوف باستخدام البنية القوية غير المرتبطة بواجهة العرض في TanStack Tab…

29

Jotai: إدارة الحالة الذرية

B14 دروسPRO

أديروا حالة React باستخدام النموذج الذري البسيط في Jotai، حيث تستمد الذرات القابلة للتركيب القيم وتعالج العمليات غير المتزامنة وتتكامل بسلا…

30

SWR: جلب البيانات من Vercel

B14 دروسPRO

استخدموا استراتيجية stale-while-revalidate في SWR لجلب البيانات بسرعة وموثوقية، مع إعادة التحقق والتغيير ودعم العمل دون اتصال تلقائيًا

31

dnd-kit: السحب والإفلات سهل الوصول

B14 دروسPRO

أنشئوا واجهات سحب وإفلات في React سهلة الوصول وملائمة للمس باستخدام dnd-kit، بما في ذلك القوائم القابلة للفرز ولوحات كانبان وتفاعلات السحب…

32

React Spring: رسوم متحركة قائمة على الفيزياء

B14 دروسPRO

أنشئوا رسومًا متحركة سلسة قائمة على فيزياء النوابض في React باستخدام react-spring، بدءًا من انتقالات القيم البسيطة وصولًا إلى التفاعلات الم…

33

الأحداث المرسلة من الخادم والاستقصاء في React

B14 دروسPRO

طبّقوا تدفقات بيانات فورية في React باستخدام Server-Sent Events واستراتيجيات الاستقصاء، مع فهم المفاضلات مقارنةً بـ WebSockets لحالات الاست…

34

استكشاف useEffect بعمق

B13 دروسPRO

افهم useEffect : متى يُنفَّذ مقارنةً بمرحلة التصيير، وكيف تتحكم مصفوفات التبعيات فيه، وكيف تكتب دوال تنظيف آمنة.

35

أنماط جلب البيانات

B13 دروسPRO

صمّم واجهات بيانات متينة: تعامل مع حالات التحميل و الخطأ و الفراغ و النجاح ، مع تقديم تغذية راجعة واضحة وهياكل تحميل خفيفة.

36

Context وuseReducer

B13 دروسPRO

شارك الحالة بين المكوّنات المتباعدة باستخدام Context لتجنب تمرير الخصائص عبر مكوّنات وسيطة؛ أعدّ Provider واقرأ القيم عبر useContext .

37

الخطافات المخصصة

B13 دروسPRO

استخرج المنطق القابل لإعادة الاستخدام في خطافات مخصصة : عرّف معاملات واضحة، وأعد قيمًا أو إجراءات مستقرة، وحافظ على نظافة التأثيرات.

38

أساسيات إمكانية الوصول

B13 دروسPRO

أنشئ واجهات مستخدم شاملة: استخدم الدلالات الحقيقية، والتسميات والأدوار الواضحة، وأدر تركيز لوحة المفاتيح لتوفير تنقل سلس.

39

الرسوم المتحركة باستخدام Framer Motion

B14 دروسPRO

أضيفوا رسومًا متحركة وانتقالات سلسة إلى تطبيقات React باستخدام Framer Motion: مكوّنات motion والأنماط والإيماءات ورسوم التخطيط المتحركة.

40

حدود الأخطاء والمتانة

B13 دروسPRO

التقط أخطاء وقت التصيير باستخدام حدود الأخطاء، واعرض بدائل آمنة، وحافظ على استجابة بقية التطبيق.

41

TypeScript مع React (اختياري)

B13 دروسPRO

أضف أنواعًا خفيفة إلى مكوّنات React. ابدأ بالخصائص، ثم استخرج الأنواع العامة القابلة لإعادة الاستخدام للحفاظ على أمان شيفرة الواجهة ووضوحها.

42

بنية المشروع والمعايير

B13 دروسPRO

نظّم تطبيقات React: استخدم مجلدات مرتبة حسب الميزات، وعناصر واجهة صغيرة مقابل المكوّنات المركبة، واجعل الخطافات والاختبارات في المكان نفسه،…

43

القوائم الافتراضية باستخدام react-window

B24 دروسPRO

اعرض آلاف العناصر في القائمة من دون تراجع في الأداء باستخدام react-window لإضفاء الطابع الافتراضي على مخرجات DOM — فلا تُعرض إلا العناصر ال…

44

الأنماط غير المتزامنة في React: الوعود والتزامن

B24 دروسPRO

عالجوا العمليات غير المتزامنة في React بالطريقة الملائمة باستخدام useEffect وuseTransition وuseDeferredValue وSuspense.

45

أنماط React: Render Props وHOCs

B24 دروسPRO

افهموا Render Props والمكوّنات عالية الترتيب بوصفهما نمطين تقليديين لإعادة استخدام الشيفرة قبل أن تحل الخطافات محلّهما.

46

useLayoutEffect مقارنةً بـ useEffect

B24 دروسPRO

افهموا الفرق الدقيق لكنه critical بين useEffect وuseLayoutEffect، ووقت تشغيل كل منهما بالنسبة إلى تثبيت DOM، واستخدموا كلًّا منهما على نحو…

47

Redux Toolkit وRTK Query

B24 دروسPRO

أديروا حالات التطبيقات المعقّدة باستخدام شرائح Redux Toolkit والمهام المؤجّلة وRTK Query لتخزين حالة الخادم مؤقتًا ومزامنتها.

48

مكوّنات الخادم وميزات React 19

B24 دروسPRO

افهموا مكوّنات خادم React والخطاف use() والإجراءات وواجهات React 19 الأخرى التي تغيّر طريقة تدفق البيانات في التطبيقات.

49

React Query: إدارة حالة الخادم

B24 دروسPRO

أديروا حالة الخادم باستخدام TanStack Query: جلب البيانات وتخزينها مؤقتًا وإعادة جلبها في الخلفية والطفرات وتقسيم الصفحات.

50

اختبار React: التكامل والاختبار الشامل

B24 دروسPRO

اكتبوا اختبارات تكامل باستخدام React Testing Library واختبارات شاملة باستخدام Playwright للتحقّق من مسارات المستخدم الفعلية.

51

أنظمة تصميم المكوّنات وStorybook

B24 دروسPRO

وثّقوا مكوّنات واجهة React وطوّروها واختبروها بمعزل باستخدام Storybook مع قصص CSF3 والإضافات.

52

واجهات React الفورية باستخدام WebSockets

B24 دروسPRO

أنشئوا واجهات React تتحدّث مباشرةً باستخدام WebSockets ومكتبات مثل Socket.IO للدردشة والإشعارات ولوحات المعلومات.

53

tRPC: واجهات API آمنة الأنواع من البداية إلى النهاية

B24 دروسPRO

أنشئوا واجهات API آمنة الأنواع بالكامل من دون مخططات أو توليد شيفرة باستخدام tRPC، مع مشاركة الأنواع تلقائيًا بين واجهة React الأمامية وخلف…

54

Apollo Client وReact

B24 دروسPRO

ادمجوا GraphQL في تطبيقات React باستخدام Apollo Client للاستعلام والتغيير والتخزين المؤقت والحفاظ على تزامن الواجهة مع بيانات الخادم

55

واجهة المستخدم المتفائلة وأنماط التغيير

B24 دروسPRO

أنشئوا واجهات سريعة ومتجاوبة تعرض النتائج فورًا قبل تأكيد الخادم، مع التراجع الصحيح عند الفشل واستراتيجيات حل التعارضات

56

نشر مكتبات مكوّنات React

B24 دروسPRO

احزموا مكتبات مكوّنات React القابلة لإعادة الاستخدام وانشروها إلى npm، مع معالجة إخراج ESM/CJS المزدوج والاعتماديات النظيرة وtree shaking و…

57

التصيير والحفظ المؤقت

B23 دروسPRO

افهم مرحلتي التصيير و التثبيت في React، ومتى تتحدّث المكوّنات، ومتى يكون الحفظ المؤقت مفيدًا.

58

الانتقالات وSuspense (أساسيات)

B23 دروسPRO

تعلّم أساسيات واجهات المستخدم المتزامنة باستخدام useTransition : حافظ على استجابة الكتابة، واعرض مؤشرًا على وجود عملية معلّقة، وأجّل التحدي…

59

تقسيم الشيفرة واستراتيجية الأصول

B23 دروسPRO

حمّل ما تحتاج إليه فقط عبر تقسيم شيفرة الشاشات وعناصر الواجهة. استخدم React.lazy و Suspense لتقديم تطبيقات تبدو أسرع.

60

اختبار مكوّنات React

B23 دروسPRO

أعدّ الاختبارات باستخدام Vitest/Jest و React Testing Library ؛ صَيّر المكوّنات، واستعلم حسب الدور أو التسمية، وشغّل الاختبارات في بيئة jsdo…

61

أساسيات Next.js App Router

B24 دروسPRO

أنشئوا تطبيقات ويب متكاملة باستخدام Next.js 14+ App Router: التوجيه القائم على الملفات والتخطيطات ومكوّنات الخادم والبيانات الوصفية.

62

جلب البيانات والتخزين المؤقت في Next.js

B24 دروسPRO

اجلبوا البيانات وخزّنوها مؤقتًا وأعيدوا التحقّق منها في Next.js App Router باستخدام خيارات fetch وunstable_cache وإعادة التحقّق عند الطلب.

63

المصادقة في Next.js باستخدام NextAuth.js

B24 دروسPRO

أضيفوا المصادقة إلى تطبيقات Next.js باستخدام Auth.js (NextAuth v5): موفّرو OAuth وبيانات الاعتماد والجلسات وحماية المسارات.

64

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

B24 دروسPRO

انقلوا معارفكم في React إلى الأجهزة المحمولة بتعلّم بدائيات React Native والتنسيق والتنقّل وواجهات برمجة تطبيقات الأجهزة الأصلية.

65

نشر تطبيقات React: Vercel وAWS وDocker

B24 دروسPRO

انشروا تطبيقات React وNext.js في بيئة الإنتاج باستخدام Vercel وAWS S3/CloudFront وحاويات Docker مع مسارات CI/CD.

66

إجراءات خادم React: النماذج والتغييرات

B24 دروسPRO

استخدموا Server Actions في React 19 وإجراءات النماذج في Next.js لمعالجة التغييرات على الخادم، والاستغناء عن مسارات API في أنماط النماذج الش…

67

أمن تطبيقات React

B24 دروسPRO

عزّزوا تطبيقات React ضد XSS وCSRF والثغرات الأخرى، مع إرشادات عملية حول Content Security Policy وإدارة الأسرار والعرض الآمن

68

أنظمة رموز التصميم لـ React

B24 دروسPRO

أنشئوا نظامًا قابلًا للتوسع لرموز التصميم يدعم مكتبات مكوّنات React متعددة السمات، بدءًا من تعريف الرموز مرورًا بمتغيرات CSS وتكامل Tailwin…

69

Electron.js: تطبيقات سطح المكتب باستخدام React

B24 دروسPRO

أنشئوا تطبيقات سطح مكتب متعددة المنصات باستخدام Electron مع واجهة أمامية بـ React، بما يشمل اتصالات IPC وواجهات API الأصلية وحزم التوزيع

70

المكوّنات المركبة

B23 دروسPRO

أنشئ مكوّنات مركبة: يوفّر المكوّن الأب السياق، وتستهلكه المكوّنات الأبناء لإنشاء واجهات برمجية مرنة.

71

النماذج على نطاق واسع (من دون مكتبات أو بمساعدات خفيفة)

B23 دروسPRO

أنشئ نماذج كبيرة باستخدام أجزاء صغيرة ومتينة: مصفوفات الحقول، والأقسام الديناميكية، وتدفقات التحقق البسيطة.

72

التوجيه المتقدم

B23 دروسPRO

تجاوز الأساسيات: تعلّم التخطيطات المتداخلة، والمفهوم العام لتحميل المسارات، وأفكارًا بسيطة للتحميل المسبق من أجل تنقل أكثر سلاسة.

73

حالة الخادم مقابل حالة واجهة المستخدم

B23 دروسPRO

اعرف ما ينتمي إلى ذاكرة التخزين المؤقت للخادم وما يُعدّ حالة محلية لواجهة المستخدم. اجلب البيانات وحدّثها وتجنب خلط المسؤوليات.

74

أنماط النوافذ المنبثقة والتنبيهات والطبقات

B23 دروسPRO

أنشئ طبقات سهلة الوصول: صَيّرها باستخدام البوابات، وأبقِ التركيز داخلها، وادعم الإغلاق السريع باستخدام Escape أو الخلفية.

75

البناء والتحليل والإطلاق

B23 دروسPRO

جهّز التطبيقات للإنتاج: تعلّم الفرق بين عمليات بناء التطوير والإنتاج، وخرائط المصدر، ومتغيرات البيئة البسيطة، والفحوصات السريعة للإطلاق بثق…

76

useImperativeHandle وforwardRef

C14 دروسPRO

أتقن واجهات React البرمجية الأمرية — واعرض قيم مثيلات المكوّنات المخصصة على المكوّنات الأب باستخدام forwardRef وuseImperativeHandle في الحا…

77

useSyncExternalStore: الاشتراك في المخازن الخارجية

C14 دروسPRO

تعلّم hook ‏useSyncExternalStore في React 18 — الطريقة الصحيحة لمزامنة مكوّنات React مع مصادر الحالة الخارجية مثل واجهات المتصفح البرمجية و…

78

بنية Micro-Frontend باستخدام React

C14 دروسPRO

قسّموا واجهات React الأمامية الكبيرة إلى واجهات Micro-Frontend مستقلة النشر باستخدام Module Federation وsingle-spa.

79

استكشاف متعمّق لـ React SSR والترطيب

C14 دروسPRO

افهموا آليات التصيير من جانب الخادم والترطيب والترطيب الانتقائي وبث HTML باستخدام renderToPipeableStream في React.

80

أنماط TypeScript المتقدمة لـ React

C14 دروسPRO

طوّروا مهارات TypeScript في React باستخدام الاتحادات المميّزة والأنواع المعيّنة والأنواع الشرطية وواجهات API للمكوّنات الآمنة نوعيًا.

81

أداء الويب: مؤشرات أداء الويب الأساسية وReact

C14 دروسPRO

قيسوا مؤشرات أداء الويب الأساسية (LCP وINP وCLS) في تطبيقات React وحسّنوها باستخدام أدوات التحليل وتحليل الحزم والتحسينات المستهدفة.

82

Monorepo وNx لمشاريع React

C14 دروسPRO

نظّموا تطبيقات React المتعددة والمكتبات المشتركة في مستودع أحادي باستخدام Nx مع جدولة ذكية للمهام وCI قائم على الملفات المتأثرة.

83

بنية الجزر باستخدام Astro وReact

C14 دروسPRO

تجاوزوا ترطيب الصفحة بالكامل باعتماد بنية الجزر، وترطيب مكوّنات React التفاعلية التي تحتاج إلى ذلك فقط بصورة انتقائية باستخدام Astro

84

تكامل React وWebAssembly

C14 دروسPRO

ادمجوا وحدات WebAssembly في تطبيقات React للمهام كثيفة الحساب، بدءًا من وحدات Rust WASM وصولًا إلى الذاكرة المشتركة وخيوط العاملين

85

العرض عند الحافة: Cloudflare Workers وReact

C14 دروسPRO

قدّموا تطبيقات React من الحافة بزمن استجابة أقل من ميلي ثانية باستخدام Cloudflare Workers وSSR المتدفق واستراتيجيات التخزين المؤقت الأصلية…

86

OpenTelemetry لمراقبة واجهة React الأمامية

C14 دروسPRO

أضيفوا أدوات القياس إلى تطبيقات React باستخدام OpenTelemetry لجمع التتبعات وقياس أداء المستخدم الحقيقي وربط أحداث الواجهة الأمامية بالامتدا…

87

البث والتحميل التدريجي في React

C14 دروسPRO

استخدموا SSR المتدفق وSuspense في React 18 لتقديم HTML إلى المتصفح تدريجيًا، وتحسين الأداء المتصوَّر من دون انتظار تحميل جميع البيانات

88

Module Federation مع React

C14 دروسPRO

طبّقوا Webpack Module Federation لبناء الواجهات الأمامية المصغّرة في React ونشرها بصورة مستقلة، مع مشاركة الاعتماديات والحالة والتوجيه بين…

الأسئلة الشائعة

الأسئلة الشائعة

هل دورة React Academy مجانية؟

نعم. يمكنك البدء في دورة React Academy مجانًا وإكمال دروسها التفاعلية بلا تكلفة. اشتراك PRO اختياري يفتح لك أدوات ذكاء اصطناعي متقدمة وشهادة قابلة للمشاركة.

هل أحتاج إلى خبرة سابقة لتعلم JSX؟

لا. تبدأ الدورة بالأساسيات وتنتقل تدريجيًا إلى مواضيع أكثر تقدمًا، لذا يمكنك البدء حتى بدون خبرة سابقة في JSX.

كيف ستتعلم JSX على CoddyKit؟

تتعلم من خلال العمل. دروس تفاعلية قصيرة تجمع بين شرح واضح وتمرين برمجة عملي يعمل في الوقت الفعلي، ومعلم ذكاء اصطناعي يعمل 24/7 يقدم مساعدة مخصصة عندما تعلق.

هل أحصل على شهادة عند إكمال React Academy؟

نعم. متعلمو PRO يمكنهم الخضوع لامتحان والحصول على شهادة إكمال قابلة للمشاركة برمز تحقق لدورة React Academy.

هل يمكنني تعلم JSX على هاتفي؟

نعم. CoddyKit متاح على الويب وكتطبيقات iOS و Android أصلية، لذا يمكنك تعلم JSX على أي جهاز وسيتم مزامنة تقدمك عبرها جميعًا.

ابدأ React Academy الآن

انضم إلى آلاف المتعلمين الذين يتقنون البرمجة مع دروس مدعومة بالذكاء الاصطناعي.

ابدأ مجاناً →استعرض جميع الدورات