AI-powered learning
Save this course
تعلم React 19: الدليل الكامل لتطبيقات الويب الحديثة
ابدأ من الأساسيات وكن مطور React 19 واثقًا من خلال بناء واجهات مستخدم سريعة وواقعية أثناء تعلم بنية قابلة للتطوير، وأنماط واجهة المستخدم غير المتزامنة، وتحسين الأداء، والمشاريع.
4.7
186 Lessons
2 Projects
29h
Updated 1 week ago
Join 3 million developers at
Join 3 million developers at
ما سوف تتعلمه
- قم ببناء واجهات مستخدم ديناميكية قائمة على المكونات باستخدام أحدث ميزات React 19 و Hooks.
- إدارة حالة التطبيق بدءًا من نمط useState البسيط وصولاً إلى أنماط useReducer المعقدة.
- هيكلة أشكال قابلة للتنبؤ بها ومُدققة جيدًا باستخدام مكونات خاضعة للتحكم وغير خاضعة للتحكم.
- جلب بيانات خادم وتخزينها مؤقتًا وعرضها مع حالات التحميل المناسبة ومعالجة الأخطاء ومنطق التحديث.
- قم بتطبيق ميزات التزامن في React 19 (useTransition، useDeferredValue) للحفاظ على استجابة واجهات المستخدم على نطاق واسع.
- قم ببناء تطبيقات React قابلة للتوسع باستخدام بنية قائمة على الميزات.
- فهم آليات عرض React 19 الداخلية وتحسين الأداء.
- قم بتطبيق تقنيات التشويق والبث والتحميل الكسول.
- إدارة بيانات خادم باستخدام التخزين المؤقت والتعديلات في React Query.
- صمم سير عمل واجهة مستخدم متفائلة وتعتمد على العمل دون اتصال بالإنترنت أولاً.
- قم ببناء نماذج معقدة وواجهات تعتمد على سير العمل.
- اختبر تطبيقات React الحديثة باستخدام مكتبة اختبار React .
- تطبيق أنظمة التصميم القابلة للتدويل، وإمكانية الوصول، والتصميم القابل للتخصيص.
- تطبيق المفاهيم في مشروعين واقعيين.
Why choose this course?
Meet React: the technology powering the modern web
Mastering it opens doors to high-demand front-end roles and equips you to build dynamic, scalable interfaces used across the industry.
Curriculum developed by web dev prosThe React Learning
You’ll apply concepts in real projects before exploring React 19’s latest enhancements, including concurrency for smoother UIs, built-in form handling, and streamlined data fetching and API integration.
Learn by building, directly in your browser
Master React through hands-on, guided practice. Every concept is taught through interactive lessons, coding playgrounds, and project challenges.
خارطة طريق التعلم
2.
JavaScript لـ React: مراجعة سريعة
JavaScript لـ React: مراجعة سريعة
قم بمراجعة أساسيات JavaScript، وميزات ES6+ الحديثة، وأساسيات DOM لبناء أساس قوي لتطوير React في هذا الفصل.
3.
مقدمة إلى React
مقدمة إلى React
8 Lessons
8 Lessons
استكشف React وفوائدها، وبنية JSX، وDOM الافتراضي، وكيفية عرض العناصر الديناميكية، مما يضع الأساس لتطوير React.
4.
مكونات React
مكونات React
8 Lessons
8 Lessons
تعمّق في مكونات React لبناء واجهات مستخدم ديناميكية باستخدام الخصائص، ومعالجة الأحداث، وتصميم المكونات، وإنشاء مكون قابل لإعادة الاستخدام بدون حالة.
5.
الخطافات: إدارة الحالات والتأثيرات في مكونات React
الخطافات: إدارة الحالات والتأثيرات في مكونات React
10 Lessons
10 Lessons
استكشف خطافات React مثل useState و useEffect و useContext و useMemo لإدارة الحالة والتعامل مع الآثار الجانبية وتحسين الأداء.
6.
React Router and Navigations
React Router and Navigations
10 Lessons
10 Lessons
فهم أساسيات React Router، بما في ذلك تحديد المسارات، والتنقل الديناميكي، والمسارات المتداخلة، ومعالجة صفحات 404 لإنشاء تطبيقات SPA سلسة.
7.
تحسينات جديدة في React 19
تحسينات جديدة في React 19
6 Lessons
6 Lessons
استكشف تحسينات React 19 للمراجع والسياق والبيانات الوصفية والبرامج النصية غير المتزامنة.
8.
الخطافات المتقدمة في الممارسة
الخطافات المتقدمة في الممارسة
8 Lessons
8 Lessons
أتقن استخدام خطافات React المتقدمة مثل useReducer و useCallback و useRef والخطافات المخصصة لتحسين الأداء وإعادة استخدام المنطق بكفاءة.
9.
التزامن لواجهات مستخدم سلسة
التزامن لواجهات مستخدم سلسة
7 Lessons
7 Lessons
تعرف على كيفية جعل ميزات التزامن في React مثل useTransition و useDeferredValue واجهات المستخدم أسرع وأكثر سلاسة وأكثر استجابة لتفاعلات المستخدم.
10.
التعامل مع النماذج في React (المكونات المتحكم بها وغير المتحكم بها)
التعامل مع النماذج في React (المكونات المتحكم بها وغير المتحكم بها)
13 Lessons
13 Lessons
فهم كيفية إدارة React لبيانات النماذج باستخدام المكونات الخاضعة للتحكم والمكونات غير الخاضعة للتحكم لبناء نماذج إدخال بيانات المستخدم المرنة والموثوقة والتفاعلية.
11.
جلب البيانات وتكامل API
جلب البيانات وتكامل API
13 Lessons
13 Lessons
تعلم كيفية جلب البيانات وإدارتها وعرضها في React باستخدام Fetch API أو Axios أو React Query، وكيفية التعامل مع حالات التحميل والأخطاء والتخزين المؤقت.
12.
تصميم تطبيقات React على نطاق واسع
تصميم تطبيقات React على نطاق واسع
15 Lessons
15 Lessons
إتقان إدارة الحالة القابلة للتوسع في React من خلال أنماط وهندسة فعالة.
13.
تحسينات الأداء وآليات العرض في React 19
تحسينات الأداء وآليات العرض في React 19
13 Lessons
13 Lessons
تحسين أداء React من خلال تقنيات العرض المتقدمة واستراتيجيات إدارة الحالة الفعالة.
14.
التشويق، والبث المباشر، وتقسيم الشفرة
التشويق، والبث المباشر، وتقسيم الشفرة
11 Lessons
11 Lessons
استكشف تقنيات React المتقدمة لإدارة جلب البيانات، والعرض، وتجربة المستخدم.
15.
مكونات الخادم (RSC)
مكونات الخادم (RSC)
9 Lessons
9 Lessons
استكشف مزايا وبنية مكونات خادم React لتحسين الأداء.
16.
طبقة بيانات متقدمة مع استعلام React
طبقة بيانات متقدمة مع استعلام React
8 Lessons
8 Lessons
استكشف تقنيات استعلام React المتقدمة لإدارة البيانات بكفاءة وتجربة مستخدم مميزة.
17.
استراتيجيات العمل في الوقت الفعلي، والعمل في الخلفية، والعمل دون اتصال بالإنترنت
استراتيجيات العمل في الوقت الفعلي، والعمل في الخلفية، والعمل دون اتصال بالإنترنت
7 Lessons
7 Lessons
عزز استجابة واجهة المستخدم من خلال دمج البيانات في الوقت الفعلي، واستراتيجيات العمل دون اتصال بالإنترنت، والمعالجة الفعالة في الخلفية.
18.
النماذج المعقدة وسير العمل على نطاق واسع
النماذج المعقدة وسير العمل على نطاق واسع
7 Lessons
7 Lessons
أتقن النماذج متعددة الخطوات والمعاملاتية مع التحقق المحسن من الصحة وإمكانية الوصول في React 19.
19.
استراتيجيات اختبار الثقة
استراتيجيات اختبار الثقة
7 Lessons
7 Lessons
إتقان استراتيجيات الاختبار في React، مع التركيز على سلوك المستخدم وإمكانية الوصول وسير العمل المعقد.
20.
إمكانية الوصول، والتدويل، وأنظمة التصميم
إمكانية الوصول، والتدويل، وأنظمة التصميم
7 Lessons
7 Lessons
أتقن استخدام مكونات React سهلة الوصول وقابلة للتخصيص لتحقيق تدويل سلس وتجربة مستخدم مميزة.
21.
الأمن والأداء والميزانيات والتسليم
الأمن والأداء والميزانيات والتسليم
7 Lessons
7 Lessons
تحسين الأمان والأداء ومعالجة الأخطاء في تطبيقات React للحصول على تجربة مستخدم مثالية.
شهادة إتمام
اعرض إنجازك بمشاركة شهادة الإتمام الخاصة بك.
Complete more lessons to unlock your certificate
Developed by MAANG Engineers
ABOUT THIS COURSE
لا تزال React إحدى أكثر المكتبات استخدامًا لبناء تطبيقات الويب الحديثة. تركز هذه الدورة على React الحديثة (React 18+ وإمكانيات React 19 الناشئة)، وتغطي التحسينات في العرض والتزامن وبنية التطبيق التي تساعد المطورين بناء واجهات مستخدم أسرع وأكثر قابلية للتوسع. تتجاوز هذه الدورة الأساسيات وتركز على بناء تطبيقات React جاهزة للإنتاج. ستتعلم كيفية هيكلة قواعد بيانات React الكبيرة باستخدام بنية قائمة على الميزات، ومبادئ ملكية الحالة، وتجزئة السياق، وأنماط المُختزِل، والمكونات المركبة أو غير الرأسية. ستستكشف أيضًا تفاصيل عرض React الداخلية، بما في ذلك بنية Fiber، ومراحل العرض والالتزام، وأنماط العرض المتزامن الحديثة باستخدام الانتقالات وSuspense، بالإضافة إلى استراتيجيات تحسين الأداء مثل التخزين المؤقت وتحليل أداء المكونات. ثم تنتقل الدورة إلى أنماط واجهة المستخدم غير المتزامنة الحديثة، حيث تُعلّمك كيفية بناء واجهات سريعة الاستجابة باستخدام Suspense، ومفاهيم العرض من جانب الخادم والعرض المتدفق، والتحميل الكسول، وحدود الخطأ، بالإضافة إلى مقدمة عن مكونات خادم React (RSC). ستتعلم كيفية إدارة بيانات خادم بكفاءة باستخدام TanStack Query (المعروف سابقًا React Query)، بما في ذلك التخزين المؤقت، والاستعلامات التابعة، والتحديثات التفاؤلية، وإبطال الاستعلام. كما يقدم لك هذا المساق استراتيجيات واجهة مستخدم مستوحاة من الوقت الفعلي، وأخرى تركز على العمل دون اتصال بالإنترنت، بالإضافة إلى مزامنة الخلفية، وتقنيات تحسين الأداء مثل استخدام Web Workers للحسابات خارج الخيط الرئيسي. إلى جانب هندسة البرمجيات وإدارة البيانات، ستتعلم كيفية بناء نماذج معقدة، وسير عمل قابل للتوسع، وواجهات مستخدم سهلة الوصول، بالإضافة إلى استراتيجيات اختبار عملية باستخدام مكتبة React Testing Library. يختتم المساق بمواضيع تركز على الإنتاج، بما في ذلك هندسة إمكانية الوصول، والتدويل (i18n)، وأنظمة التصميم، واعتبارات الأمان، وممارسات النشر. ستتمكن من تصميم تطبيقات React قابلة للتوسع، وتحسينها، نشر باستخدام أنماط معمارية وأداء حديثة. خلال المساق، ستطبق ما تتعلمه من خلال مشروعين عمليين: لوحة تحكم إدارة المهام: قم ببناء لوحة تحكم React كاملة لإدارة المهام، والتوجيه، والحالة، وتفاعلات واجهة برمجة التطبيقات (API) . لوحة جاهزية إطلاق المنتج: قم ببناء أداة تعاون حديثة تتميز بتحديثات متفائلة، وتحرير قابل للتحرير دون اتصال بالإنترنت، ومحاكاة التعاون في الوقت الفعلي (على مستوى واجهة المستخدم)، والتحميل الكسول القائم على التشويق، وواجهة مستخدم قابلة للتخصيص ومتعددة اللغات.
ABOUT THE AUTHOR
Naeem ul Haq
Educative co-founder and CTO. Ex-Microsoft (Azure). Full-Stack, Cloud, Product & Engineering Leadership.
Trusted by 3 million developers working at companies
A
Anthony Walker
@_webarchitect_
E
Evan Dunbar
ML Engineer
S
Software Developer
Carlos Matias La Borde
S
Souvik Kundu
Front-end Developer
V
Vinay Krishnaiah
Software Developer
Built for 10x Developers
No Passive Learning
Learn by building with project-based lessons and in-browser code editor
Personalized Roadmaps
The platform adapts to your strengths & skills gaps as you go
Future-proof Your Career
Get hands-on with in-demand skills
AI Code Mentor
Write better code with AI feedback, smart debugging, and "Ask AI"
MAANG+ Interview Prep
AI Mock Interviews simulate every technical loop at top companies
Free Resources
