React 19 · JavaScript

React: The Complete Course

تعلّم React من أول Component إلى تطبيق كامل: الحالة والنماذج وEffects وContext وReact Router وجلب البيانات وReact 19 الحديثة والاختبارات والنشر، مع محرر React تحت كل درس ومشروع نهائي تبنيه بنفسك.

سعر الدورة$39 $27حتى الجمعة 4 ديسمبر اشتراك مدى الحياة

خصم الإطلاق 30% بالكود REACTCOMPLETE30 حتى 4 ديسمبر

اشترك الآن
تصفح المنهج
  • 220درس
  • 19أقسام
  • 130اختبارات
  • 06:11ساعة
  • مبتدئ إلى متوسطالمستوى
عن الدورة

تعرّف على الدورة

React هي المكتبة التي تُبنى بها واجهات أشهر المواقع والتطبيقات اليوم، وأغلب وظائف الواجهة الأمامية تطلبها. لكن تعلّمها من مصادر متفرقة يترك فجوات: أمثلة قديمة، وأنماط لم تعد مستخدمة، وأفكار مهمة مثل الحالة وEffects تُشرح بسرعة. في كورس React الكامل بالعربي تتعلم React الحديثة خطوة بخطوة، بترتيب واضح، ومثال واحد ممتد تبنيه معنا: «يومي»، دفتر يومي للوجبات.

تبدأ الدورة بجسر قصير لما تحتاجه من JavaScript، ثم تبني فهمك من الأساس: كيف ترسم React الواجهة، ولماذا تتغير، وأين تضع الحالة، ومتى تحتاج Effect ومتى يكفي الحساب. ثم تنتقل إلى ما تحتاجه في تطبيق حقيقي: النماذج والتحقق، والقوائم، والتصميم، وجلب البيانات مع حالات التحميل والخطأ والإلغاء، والتنقل بـReact Router، وتنظيم المنطق في Custom Hooks.

وفي الأقسام الأخيرة تتعلم React 19 كما تُكتب اليوم: form Actions وuseActionState وuseOptimistic وuse وSuspense وError Boundaries وActivity، ثم الاختبارات وإمكانية الوصول والبناء والنشر، وإدارة بيانات الخادم بـTanStack Query والحالة العامة بـZustand. يشرح الدورة أحمد علي، مهندس البرمجيات الذي عمل في Microsoft وGoogle وMeta وAmazon.

لماذا تتعلم React؟

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

لماذا يجب أن تشترك في هذه الدورة؟

  • React 19 الحديثة، لا أمثلة قديمة: Vite وReact Router الحديث وActions وref كـprop.
  • محرر React تحت كل درس: تكتب الكود وترى المعاينة في المتصفح مباشرة.
  • تمرين وحل مشروح في كل درس، وتحدٍّ في نهاية كل قسم.
  • مثال واحد ممتد «يومي» يكبر معك من بطاقة واحدة إلى تطبيق كامل.
  • مشروع نهائي تبنيه بنفسك: إضافة وتعديل وحذف وتصفية وصفحات وحفظ واختبارات.
  • مختصر كتابي بعد كل فيديو، واختبار قصير بعد كل درس، واختبار لكل قسم.
  • المشرفون يردّون على أسئلتك في تعليقات كل درس.
  • وصول مدى الحياة مع كل التحديثات، وشهادة إتمام عند إنهاء الدورة.

هذه الدورة مناسبة لك إذا كنت:

  • من يعرف HTML وCSS وأساسيات JavaScript ويريد أن يبدأ React بطريقة صحيحة.
  • من تعلّم React من فيديوهات متفرقة ويريد ترتيبًا واضحًا وفهمًا حقيقيًا للحالة وEffects.
  • من يريد العمل في تطوير الواجهات الأمامية ويحتاج React الحديثة التي تطلبها الشركات.
  • مطوّر يعرف React القديمة ويريد اللحاق بـReact 19 وReact Router الحديث.
  • طالب في مسار الواجهة الأمامية يريد مشروعًا كاملًا يضيفه إلى أعماله.

ماذا ستتعلم خطوة بخطوة؟

  • JavaScript التي تحتاجها: تراجع modules وdestructuring وmap وfilter وreduce وpromises وfetch بالقدر الذي تستخدمه React.
  • المكونات وJSX: تقسّم الواجهة إلى Components وتمرّر props وchildren وتنظم الملفات بطريقة واضحة.
  • الحالة والأحداث: تفهم useState ولقطة الحالة والتحديثات المتتالية وتحديث الكائنات دون mutation ورفع الحالة.
  • النماذج والقوائم: تبني نماذج بتحقق ورسائل خطأ، وقوائم بمفاتيح ثابتة وإضافة وتعديل وحذف وتصفية.
  • Effects وContext: تعرف متى تحتاج Effect وكيف تنظفه، وتدير الحالة المعقدة بـuseReducer وتشاركها بـContext.
  • البيانات والتنقل: تجلب البيانات بحالات التحميل والخطأ والإلغاء، وتبني صفحات بـReact Router الحديث.
  • React 19 والأداء: تستخدم Actions وuseOptimistic وSuspense وError Boundaries، وتقيس الأداء قبل تحسينه.
  • الجودة والنشر: تختبر سلوك الواجهة، وتراعي إمكانية الوصول، وتبني تطبيقك وتنشره، وتستخدم TanStack Query وZustand.

المتطلبات

  • معرفة أساسية بـHTML وCSS وJavaScript (الدوال والمصفوفات والكائنات)؛ ما تحتاجه من JavaScript الحديثة تراجعه الدورة في البداية.
  • جهاز كمبيوتر أو لابتوب ومتصفح حديث؛ محرر React يعمل داخل الصفحة دون تثبيت.
  • لدروس Vite والنشر والمشروع النهائي على جهازك: Node.js وnpm، وتشرح الدورة خطوات تجهيزهما.

تشمل الدورة

  • شهادة موثقة
  • قياس مستوى التقدم والانجاز عبر الدورة
  • إجابة من مشرفي الطلاب على كل الأسئلة
  • فاعليات حصرية
  • شارات تميز للطلبة المتقدمين
  • اشعارات تذكير وتحفيز لإنهاء الدورة
  • اشتراك مدى الحياة
سعر الدورة$39 $27حتى الجمعة 4 ديسمبر اشتراك مدى الحياة

خصم الإطلاق 30% بالكود REACTCOMPLETE30 حتى 4 ديسمبر

اشترك الآن

دفع آمن ووصول فوري للدورة

منهج الدورة

ماذا ستتعلم خطوة بخطوة

اضغط على أي قسم لعرض دروسه. الدروس المجانية متاحة للمشاهدة قبل الاشتراك.

محتوى الدورة

  1. 1
    Getting Started and the JavaScript Bridge16 درسًا · 9 اختبارات يحتوي على دروس مجانية
    1. What React Does: Your First Card in Yawmi درس مجاني
    2. مختصر كتابي: What React Does: Your First Card in Yawmi درس مجاني
    3. اختبار قصير: What React Does: Your First Card in Yawmi
    4. JavaScript Modules: Import and Export درس مجاني
    5. مختصر كتابي: JavaScript Modules: Import and Export درس مجاني
    6. اختبار قصير: JavaScript Modules: Import and Export
    7. Destructuring, Spread, and Immutability درس مجاني
    8. مختصر كتابي: Destructuring, Spread, and Immutability درس مجاني
    9. اختبار قصير: Destructuring, Spread, and Immutability
    10. Arrow Functions with Map and Filter
    11. مختصر كتابي: Arrow Functions with Map and Filter
    12. اختبار قصير: Arrow Functions with Map and Filter
    13. Reduce: From a List to One Value
    14. مختصر كتابي: Reduce: From a List to One Value
    15. اختبار قصير: Reduce: From a List to One Value
    16. Find and Optional Chaining with a Clear Fallback
    17. مختصر كتابي: Find and Optional Chaining with a Clear Fallback
    18. اختبار قصير: Find and Optional Chaining with a Clear Fallback
    19. Promises, Async/Await, and Handling Rejection
    20. مختصر كتابي: Promises, Async/Await, and Handling Rejection
    21. اختبار قصير: Promises, Async/Await, and Handling Rejection
    22. Challenge: Fetch, HTTP, and JSON
    23. مختصر كتابي: Challenge: Fetch, HTTP, and JSON
    24. اختبار قصير: Challenge: Fetch, HTTP, and JSON
    25. اختبار القسم: Getting Started and the JavaScript Bridge
  2. 2
    A Clear Working Setup8 دروس · 5 اختبارات
    1. The JavaScript We Need Inside a React Component
    2. مختصر كتابي: The JavaScript We Need Inside a React Component
    3. اختبار قصير: The JavaScript We Need Inside a React Component
    4. Describing the UI: Render, Commit, and SPAs
    5. مختصر كتابي: Describing the UI: Render, Commit, and SPAs
    6. اختبار قصير: Describing the UI: Render, Commit, and SPAs
    7. Setting Up Vite and the Project Structure
    8. مختصر كتابي: Setting Up Vite and the Project Structure
    9. اختبار قصير: Setting Up Vite and the Project Structure
    10. Challenge: A Day Card Without State
    11. مختصر كتابي: Challenge: A Day Card Without State
    12. اختبار قصير: Challenge: A Day Card Without State
    13. اختبار القسم: A Clear Working Setup
  3. 3
    JSX and Splitting the UI10 دروس · 6 اختبارات
    1. JSX Expressions, Fragments and Writing Rules
    2. مختصر كتابي: JSX Expressions, Fragments and Writing Rules
    3. اختبار قصير: JSX Expressions, Fragments and Writing Rules
    4. Components, Props and Default Values
    5. مختصر كتابي: Components, Props and Default Values
    6. اختبار قصير: Components, Props and Default Values
    7. Children and Composition Instead of Repetition
    8. مختصر كتابي: Children and Composition Instead of Repetition
    9. اختبار قصير: Children and Composition Instead of Repetition
    10. Splitting Files, Naming Components and Arrow Functions
    11. مختصر كتابي: Splitting Files, Naming Components and Arrow Functions
    12. اختبار قصير: Splitting Files, Naming Components and Arrow Functions
    13. Challenge: A List of Reusable Meal Cards
    14. مختصر كتابي: Challenge: A List of Reusable Meal Cards
    15. اختبار قصير: Challenge: A List of Reusable Meal Cards
    16. اختبار القسم: JSX and Splitting the UI
  4. 4
    Events and State14 درسًا · 8 اختبارات
    1. Event Handlers and useState
    2. مختصر كتابي: Event Handlers and useState
    3. اختبار قصير: Event Handlers and useState
    4. State Snapshots: Which Value Does the Event See?
    5. مختصر كتابي: State Snapshots: Which Value Does the Event See?
    6. اختبار قصير: State Snapshots: Which Value Does the Event See?
    7. Functional Updates: Building on the Previous Value
    8. مختصر كتابي: Functional Updates: Building on the Previous Value
    9. اختبار قصير: Functional Updates: Building on the Previous Value
    10. Batching: Related Updates and a Consistent UI
    11. مختصر كتابي: Batching: Related Updates and a Consistent UI
    12. اختبار قصير: Batching: Related Updates and a Consistent UI
    13. Updating Objects Without Mutation and Choosing State Shape
    14. مختصر كتابي: Updating Objects Without Mutation and Choosing State Shape
    15. اختبار قصير: Updating Objects Without Mutation and Choosing State Shape
    16. Lifting State Up and Callbacks From Child to Parent
    17. مختصر كتابي: Lifting State Up and Callbacks From Child to Parent
    18. اختبار قصير: Lifting State Up and Callbacks From Child to Parent
    19. Challenge: Daily Goal and a Synced Total
    20. مختصر كتابي: Challenge: Daily Goal and a Synced Total
    21. اختبار قصير: Challenge: Daily Goal and a Synced Total
    22. اختبار القسم: Events and State
  5. 5
    Forms and User Input10 دروس · 6 اختبارات
    1. Controlled Inputs, Select and Checkbox
    2. مختصر كتابي: Controlled Inputs, Select and Checkbox
    3. اختبار قصير: Controlled Inputs, Select and Checkbox
    4. Form Submit with FormData and Uncontrolled Inputs
    5. مختصر كتابي: Form Submit with FormData and Uncontrolled Inputs
    6. اختبار قصير: Form Submit with FormData and Uncontrolled Inputs
    7. Form Validation, Number Parsing and Error Messages
    8. مختصر كتابي: Form Validation, Number Parsing and Error Messages
    9. اختبار قصير: Form Validation, Number Parsing and Error Messages
    10. Reusable Fields, Cancel and Form Reset
    11. مختصر كتابي: Reusable Fields, Cancel and Form Reset
    12. اختبار قصير: Reusable Fields, Cancel and Form Reset
    13. Challenge: A Valid, Keyboard-Friendly Meal Form
    14. مختصر كتابي: Challenge: A Valid, Keyboard-Friendly Meal Form
    15. اختبار قصير: Challenge: A Valid, Keyboard-Friendly Meal Form
    16. اختبار القسم: Forms and User Input
  6. 6
    Lists, Keys and Conditional Rendering10 دروس · 6 اختبارات
    1. Rendering Lists with map, Stable IDs and Keys
    2. مختصر كتابي: Rendering Lists with map, Stable IDs and Keys
    3. اختبار قصير: Rendering Lists with map, Stable IDs and Keys
    4. Immutable Add, Edit and Delete in Lists
    5. مختصر كتابي: Immutable Add, Edit and Delete in Lists
    6. اختبار قصير: Immutable Add, Edit and Delete in Lists
    7. Conditional Rendering, Empty Lists and Dynamic Classes
    8. مختصر كتابي: Conditional Rendering, Empty Lists and Dynamic Classes
    9. اختبار قصير: Conditional Rendering, Empty Lists and Dynamic Classes
    10. Filtering by Date and Derived Totals
    11. مختصر كتابي: Filtering by Date and Derived Totals
    12. اختبار قصير: Filtering by Date and Derived Totals
    13. Challenge: A Filterable, Editable Meal Log
    14. مختصر كتابي: Challenge: A Filterable, Editable Meal Log
    15. اختبار قصير: Challenge: A Filterable, Editable Meal Log
    16. اختبار القسم: Lists, Keys and Conditional Rendering
  7. 7
    Styling and CSS10 دروس · 6 اختبارات
    1. Plain CSS, className and Inline Styles
    2. مختصر كتابي: Plain CSS, className and Inline Styles
    3. اختبار قصير: Plain CSS, className and Inline Styles
    4. CSS Modules and Migrating from Global CSS
    5. مختصر كتابي: CSS Modules and Migrating from Global CSS
    6. اختبار قصير: CSS Modules and Migrating from Global CSS
    7. CSS Variables and Theme Colors
    8. مختصر كتابي: CSS Variables and Theme Colors
    9. اختبار قصير: CSS Variables and Theme Colors
    10. Styled Components: Props and Media Queries
    11. مختصر كتابي: Styled Components: Props and Media Queries
    12. اختبار قصير: Styled Components: Props and Media Queries
    13. Challenge: Responsive Grid and a Clear Theme
    14. مختصر كتابي: Challenge: Responsive Grid and a Clear Theme
    15. اختبار قصير: Challenge: Responsive Grid and a Clear Theme
    16. اختبار القسم: Styling and CSS
  8. 8
    Effects and Synchronization10 دروس · 6 اختبارات
    1. When You Need an Effect and When Calculation Is Enough
    2. مختصر كتابي: When You Need an Effect and When Calculation Is Enough
    3. اختبار قصير: When You Need an Effect and When Calculation Is Enough
    4. Effect Dependencies and StrictMode
    5. مختصر كتابي: Effect Dependencies and StrictMode
    6. اختبار قصير: Effect Dependencies and StrictMode
    7. Cleaning Up Timers and Event Listeners
    8. مختصر كتابي: Cleaning Up Timers and Event Listeners
    9. اختبار قصير: Cleaning Up Timers and Event Listeners
    10. localStorage, Corrupted Data and Failed Saves
    11. مختصر كتابي: localStorage, Corrupted Data and Failed Saves
    12. اختبار قصير: localStorage, Corrupted Data and Failed Saves
    13. Challenge: Latest-Value Reminder with useEffectEvent
    14. مختصر كتابي: Challenge: Latest-Value Reminder with useEffectEvent
    15. اختبار قصير: Challenge: Latest-Value Reminder with useEffectEvent
    16. اختبار القسم: Effects and Synchronization
  9. 9
    Complex State and Context10 دروس · 6 اختبارات
    1. useReducer and Pure Reducers
    2. مختصر كتابي: useReducer and Pure Reducers
    3. اختبار قصير: useReducer and Pure Reducers
    4. Reducer Actions for Updating the Meal List
    5. مختصر كتابي: Reducer Actions for Updating the Meal List
    6. اختبار قصير: Reducer Actions for Updating the Meal List
    7. Sharing State with Context and a Custom Provider
    8. مختصر كتابي: Sharing State with Context and a Custom Provider
    9. اختبار قصير: Sharing State with Context and a Custom Provider
    10. Where to Place the Provider and Context Limits
    11. مختصر كتابي: Where to Place the Provider and Context Limits
    12. اختبار قصير: Where to Place the Provider and Context Limits
    13. Challenge: Shared Date and a Single-Source Total
    14. مختصر كتابي: Challenge: Shared Date and a Single-Source Total
    15. اختبار قصير: Challenge: Shared Date and a Single-Source Total
    16. اختبار القسم: Complex State and Context
  10. 10
    Refs and Portals10 دروس · 6 اختبارات
    1. useRef for DOM Access and Focus
    2. مختصر كتابي: useRef for DOM Access and Focus
    3. اختبار قصير: useRef for DOM Access and Focus
    4. Refs as Mutable Boxes That Skip Re-renders
    5. مختصر كتابي: Refs as Mutable Boxes That Skip Re-renders
    6. اختبار قصير: Refs as Mutable Boxes That Skip Re-renders
    7. Passing ref as a Prop in React 19
    8. مختصر كتابي: Passing ref as a Prop in React 19
    9. اختبار قصير: Passing ref as a Prop in React 19
    10. createPortal and the Separate DOM Tree
    11. مختصر كتابي: createPortal and the Separate DOM Tree
    12. اختبار قصير: createPortal and the Separate DOM Tree
    13. Challenge: Accessible Dialog with Cancel and Focus Return
    14. مختصر كتابي: Challenge: Accessible Dialog with Cancel and Focus Return
    15. اختبار قصير: Challenge: Accessible Dialog with Cancel and Focus Return
    16. اختبار القسم: Refs and Portals
  11. 11
    HTTP and Remote Data10 دروس · 6 اختبارات
    1. Client, Server, fetch and async/await
    2. مختصر كتابي: Client, Server, fetch and async/await
    3. اختبار قصير: Client, Server, fetch and async/await
    4. Loading, Empty, Error and Retry States
    5. مختصر كتابي: Loading, Empty, Error and Retry States
    6. اختبار قصير: Loading, Empty, Error and Retry States
    7. AbortController and Response Races
    8. مختصر كتابي: AbortController and Response Races
    9. اختبار قصير: AbortController and Response Races
    10. POST, DELETE and Failed Saves Without Losing Input
    11. مختصر كتابي: POST, DELETE and Failed Saves Without Losing Input
    12. اختبار قصير: POST, DELETE and Failed Saves Without Losing Input
    13. Challenge: CRUD With a Real Local API
    14. مختصر كتابي: Challenge: CRUD With a Real Local API
    15. اختبار قصير: Challenge: CRUD With a Real Local API
    16. اختبار القسم: HTTP and Remote Data
  12. 12
    React Router12 درسًا · 7 اختبارات
    1. Modern React Router: Routes and Link
    2. مختصر كتابي: Modern React Router: Routes and Link
    3. اختبار قصير: Modern React Router: Routes and Link
    4. Nested Routes, Outlet, NavLink, index and end
    5. مختصر كتابي: Nested Routes, Outlet, NavLink, index and end
    6. اختبار قصير: Nested Routes, Outlet, NavLink, index and end
    7. URL Params, Detail Pages, Relative Links and 404
    8. مختصر كتابي: URL Params, Detail Pages, Relative Links and 404
    9. اختبار قصير: URL Params, Detail Pages, Relative Links and 404
    10. Search Params, useNavigate and the URL as Source
    11. مختصر كتابي: Search Params, useNavigate and the URL as Source
    12. اختبار قصير: Search Params, useNavigate and the URL as Source
    13. Data Router: Loaders and Route Data Lifetime
    14. مختصر كتابي: Data Router: Loaders and Route Data Lifetime
    15. اختبار قصير: Data Router: Loaders and Route Data Lifetime
    16. Challenge: Loaders, Actions and Route Errors
    17. مختصر كتابي: Challenge: Loaders, Actions and Route Errors
    18. اختبار قصير: Challenge: Loaders, Actions and Route Errors
    19. اختبار القسم: React Router
  13. 13
    Custom Hooks and App Structure10 دروس · 6 اختبارات
    1. Extract a Custom Hook: Reuse Logic, Not State
    2. مختصر كتابي: Extract a Custom Hook: Reuse Logic, Not State
    3. اختبار قصير: Extract a Custom Hook: Reuse Logic, Not State
    4. useRecords: A Cancelable Request Hook
    5. مختصر كتابي: useRecords: A Cancelable Request Hook
    6. اختبار قصير: useRecords: A Cancelable Request Hook
    7. Timed Redirect With Cleanup and Cancel
    8. مختصر كتابي: Timed Redirect With Cleanup and Cancel
    9. اختبار قصير: Timed Redirect With Cleanup and Cancel
    10. Split the Form Page From the List With Save Messages
    11. مختصر كتابي: Split the Form Page From the List With Save Messages
    12. اختبار قصير: Split the Form Page From the List With Save Messages
    13. Challenge: A Hook With a Clear Contract and Edge Tests
    14. مختصر كتابي: Challenge: A Hook With a Clear Contract and Edge Tests
    15. اختبار قصير: Challenge: A Hook With a Clear Contract and Edge Tests
    16. اختبار القسم: Custom Hooks and App Structure
  14. 14
    Understanding, Measuring and Performance16 درسًا · 9 اختبارات
    1. Render Is Not a DOM Change: React DevTools and Profiler
    2. مختصر كتابي: Render Is Not a DOM Change: React DevTools and Profiler
    3. اختبار قصير: Render Is Not a DOM Change: React DevTools and Profiler
    4. React memo and Props Comparison
    5. مختصر كتابي: React memo and Props Comparison
    6. اختبار قصير: React memo and Props Comparison
    7. useCallback: Function Identity and the Latest State
    8. مختصر كتابي: useCallback: Function Identity and the Latest State
    9. اختبار قصير: useCallback: Function Identity and the Latest State
    10. useMemo: Cached Results and Complete Dependencies
    11. مختصر كتابي: useMemo: Cached Results and Complete Dependencies
    12. اختبار قصير: useMemo: Cached Results and Complete Dependencies
    13. React Compiler: Build Setup and Proof of Transform
    14. مختصر كتابي: React Compiler: Build Setup and Proof of Transform
    15. اختبار قصير: React Compiler: Build Setup and Proof of Transform
    16. useTransition: Tab Priority With an Instant Input
    17. مختصر كتابي: useTransition: Tab Priority With an Instant Input
    18. اختبار قصير: useTransition: Tab Priority With an Instant Input
    19. useDeferredValue: Instant Input, Results Catch Up
    20. مختصر كتابي: useDeferredValue: Instant Input, Results Catch Up
    21. اختبار قصير: useDeferredValue: Instant Input, Results Catch Up
    22. Challenge: lazy, Suspense and Measured Code Splitting
    23. مختصر كتابي: Challenge: lazy, Suspense and Measured Code Splitting
    24. اختبار قصير: Challenge: lazy, Suspense and Measured Code Splitting
    25. اختبار القسم: Understanding, Measuring and Performance
  15. 15
    Modern React Without Server Confusion12 درسًا · 7 اختبارات
    1. Form Actions and useActionState
    2. مختصر كتابي: Form Actions and useActionState
    3. اختبار قصير: Form Actions and useActionState
    4. useFormStatus and the Submit Button
    5. مختصر كتابي: useFormStatus and the Submit Button
    6. اختبار قصير: useFormStatus and the Submit Button
    7. useOptimistic and Rollback on Failure
    8. مختصر كتابي: useOptimistic and Rollback on Failure
    9. اختبار قصير: useOptimistic and Rollback on Failure
    10. use and Suspense: Stable Resource, Success Path
    11. مختصر كتابي: use and Suspense: Stable Resource, Success Path
    12. اختبار قصير: use and Suspense: Stable Resource, Success Path
    13. Rejected Resources and Error Boundaries
    14. مختصر كتابي: Rejected Resources and Error Boundaries
    15. اختبار قصير: Rejected Resources and Error Boundaries
    16. Challenge: A Modern Save With Clear States
    17. مختصر كتابي: Challenge: A Modern Save With Clear States
    18. اختبار قصير: Challenge: A Modern Save With Clear States
    19. اختبار القسم: Modern React Without Server Confusion
  16. 16
    Quality and Shipping10 دروس · 6 اختبارات
    1. Debugger, Error Messages and Hooks Rules
    2. مختصر كتابي: Debugger, Error Messages and Hooks Rules
    3. اختبار قصير: Debugger, Error Messages and Hooks Rules
    4. User-Focused Tests for Components and Reducers
    5. مختصر كتابي: User-Focused Tests for Components and Reducers
    6. اختبار قصير: User-Focused Tests for Components and Reducers
    7. Accessibility, RTL and useId
    8. مختصر كتابي: Accessibility, RTL and useId
    9. اختبار قصير: Accessibility, RTL and useId
    10. Build, Env, Deploy and SPA Fallback
    11. مختصر كتابي: Build, Env, Deploy and SPA Fallback
    12. اختبار قصير: Build, Env, Deploy and SPA Fallback
    13. Challenge: Local Release Check Before Handoff
    14. مختصر كتابي: Challenge: Local Release Check Before Handoff
    15. اختبار قصير: Challenge: Local Release Check Before Handoff
    16. اختبار القسم: Quality and Shipping
  17. 17
    Server Data and State Beyond Context12 درسًا · 7 اختبارات
    1. TanStack Query, Query Keys and the Cache
    2. مختصر كتابي: TanStack Query, Query Keys and the Cache
    3. اختبار قصير: TanStack Query, Query Keys and the Cache
    4. staleTime, Refetch and Cancellation
    5. مختصر كتابي: staleTime, Refetch and Cancellation
    6. اختبار قصير: staleTime, Refetch and Cancellation
    7. useMutation: Write Lifecycle, Result and Failure
    8. مختصر كتابي: useMutation: Write Lifecycle, Result and Failure
    9. اختبار قصير: useMutation: Write Lifecycle, Result and Failure
    10. Invalidation After Writes and Separate Mutation State
    11. مختصر كتابي: Invalidation After Writes and Separate Mutation State
    12. اختبار قصير: Invalidation After Writes and Separate Mutation State
    13. Zustand, Selectors and the Limits of Global State
    14. مختصر كتابي: Zustand, Selectors and the Limits of Global State
    15. اختبار قصير: Zustand, Selectors and the Limits of Global State
    16. Challenge: Local State, the URL or the Server Cache
    17. مختصر كتابي: Challenge: Local State, the URL or the Server Cache
    18. اختبار قصير: Challenge: Local State, the URL or the Server Cache
    19. اختبار القسم: Server Data and State Beyond Context
  18. 18
    Advanced Patterns with Clear Boundaries20 درسًا · 11 اختبارًا
    1. Advanced Composition with Content Slots
    2. مختصر كتابي: Advanced Composition with Content Slots
    3. اختبار قصير: Advanced Composition with Content Slots
    4. Render Props: Shared Logic, Caller-Chosen UI
    5. مختصر كتابي: Render Props: Shared Logic, Caller-Chosen UI
    6. اختبار قصير: Render Props: Shared Logic, Caller-Chosen UI
    7. Compound Components: A Disclosure with Local Context
    8. مختصر كتابي: Compound Components: A Disclosure with Local Context
    9. اختبار قصير: Compound Components: A Disclosure with Local Context
    10. useImperativeHandle: Expose Only the Actions Needed
    11. مختصر كتابي: useImperativeHandle: Expose Only the Actions Needed
    12. اختبار قصير: useImperativeHandle: Expose Only the Actions Needed
    13. useLayoutEffect: Measure After DOM, Before Paint
    14. مختصر كتابي: useLayoutEffect: Measure After DOM, Before Paint
    15. اختبار قصير: useLayoutEffect: Measure After DOM, Before Paint
    16. useSyncExternalStore and Browser Subscriptions
    17. مختصر كتابي: useSyncExternalStore and Browser Subscriptions
    18. اختبار قصير: useSyncExternalStore and Browser Subscriptions
    19. Activity: Hide UI While Keeping Its State
    20. مختصر كتابي: Activity: Hide UI While Keeping Its State
    21. اختبار قصير: Activity: Hide UI While Keeping Its State
    22. SSR and Hydration: HTML First, Then Interaction
    23. مختصر كتابي: SSR and Hydration: HTML First, Then Interaction
    24. اختبار قصير: SSR and Hydration: HTML First, Then Interaction
    25. Server Components and Client Boundaries
    26. مختصر كتابي: Server Components and Client Boundaries
    27. اختبار قصير: Server Components and Client Boundaries
    28. Challenge: Error Boundaries and Retry
    29. مختصر كتابي: Challenge: Error Boundaries and Retry
    30. اختبار قصير: Challenge: Error Boundaries and Retry
    31. اختبار القسم: Advanced Patterns with Clear Boundaries
  19. 19
    Final Project: Yawmi10 دروس · 6 اختبارات
    1. Project Requirements, Data Model and Acceptance Criteria
    2. مختصر كتابي: Project Requirements, Data Model and Acceptance Criteria
    3. اختبار قصير: Project Requirements, Data Model and Acceptance Criteria
    4. Add, Edit, Delete and Filter From One Reducer
    5. مختصر كتابي: Add, Edit, Delete and Filter From One Reducer
    6. اختبار قصير: Add, Edit, Delete and Filter From One Reducer
    7. Pages, Navigation and Safe Local Recovery
    8. مختصر كتابي: Pages, Navigation and Safe Local Recovery
    9. اختبار قصير: Pages, Navigation and Safe Local Recovery
    10. Behavior Tests and Hard Edge Cases
    11. مختصر كتابي: Behavior Tests and Hard Edge Cases
    12. اختبار قصير: Behavior Tests and Hard Edge Cases
    13. Project Delivery and the React Projects Readiness Review
    14. مختصر كتابي: Project Delivery and the React Projects Readiness Review
    15. اختبار قصير: Project Delivery and the React Projects Readiness Review
    16. اختبار القسم: Final Project: Yawmi
  1. الاختبار النهائي
    1. الاختبار النهائي
المعلم

تعلّم على يد أحمد علي

  • أحمد علي
    أحمد علي Software Engineer at Amazon & curriculum development supervisor of Almdrasa

    مهندس برمجيات بخبرة تزيد على عشر سنوات في شركات عالمية مثل Microsoft وGoogle وMeta وAmazon. قاد فرق الواجهة الأمامية والخلفية في منتجات على Google Cloud، وأسهم في بناء ميزات Meta Business Suite، ويشرف على تطوير المناهج في منصة المدرسة.

آراء الطلاب

ماذا قال الطلاب عن الدورة

التقييمات والمراجعات

4.9
متوسط التقييمات
38 عدد التقييمات
5
34
4
3
3
1
2
0
1
0
كيف كانت تجربتك؟ نود أن نعرف!
Shawky Mshrif
تم النشر قبل يومين
Don't Give Up My Friend

ماشاء الله اللهم بارك

abdo96
تم النشر قبل شهر واحد
كورس روعة ودسم وفي كلام كثير ومحتاج إعادة وتطبيق كذا مرة

كورس روعة ويغطي اغلب الجوانب

محمد ابوعيسى
تم النشر قبل شهرين
شرح واضح و فيه مجهود كبير

اعجبني طريقة التفكير و البحث

Yasser Ayoub Owias
تم النشر قبل 4 أشهر
مشاء الله شرح فوق الروعة

بارك الله فيكم ونفع بنا وبكم

Anas Bayoumi
تم النشر قبل 4 أشهر
شغل جميل جدا ومنظم ومتعوب عليه

حقيقي الدورات كلها فيها معلومات مهمة جده وانا استفدت من كل حاجة

Mohamed Nasser Abdalla
تم النشر قبل 6 أشهر
تجربة ممتازة.. كورس دسم ومرتب وبعيد عن القشور

من أفضل الكورسات اللي ركزت على كواليس ريأكت وإدارة الحالة (State) بشكل مفهوم وعملي. الكورس بياخدك خطوة بخطوة عشان تبني تطبيق سريع ومستقر، وبيركز جداً على حل المشاكل اللي بنقابلها فعلياً في الشغل.

Elsayed Bondok
تم النشر قبل 6 أشهر
فوق المتوقع

صراحة - ما ظنيت أن هذه الدورة ستكون بهذه القوة والعمق التقني والتمكن - هي مرجع مهم جداً للمحترفين - ومنهج بناء خبرة للمبتدئين - وفق الله المهندس أحمد علي وبقية الفريق المميزين

مريم زكريا
تم النشر قبل 7 أشهر
إتقان الشرح وتبسيط المعلومة وفهم ما وراء الكواليس

حقيقي كورس ممتاز جدا التدرج في توصيل المعلومات بدون ملل وده كما عهدناه في منصة المدرسة ويزيد عليه البشمهندس أحمد على القدرة الفائقة على توصيل المعلومة بدقة وفهم ما وراء الكواليس والتسلسل والسلاسة أول مرة أشوف إتقان الشرح رغم أني لأول مرة أتعامل مع ال react جزاكم الله خيرا حقيقي أكثر من رائع يا بشمهندس أحمد على ألف شكر

basel_serhan
تم النشر قبل 9 أشهر
دورة مناسبة للمبتدئين

كورس ممتاز يشرح الأساسيات بشكل واضح وسلس

Mohamed Tamer
تم النشر قبل سنة واحدة
صلي ع النبي

10/10

لديك سؤال؟

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

لا. تبدأ الدورة من معنى React وأول Component. تحتاج فقط إلى أساسيات HTML وCSS وJavaScript، وما تحتاجه من JavaScript الحديثة تراجعه في القسم الأول.

نعم. الدورة مبنية على React 19 وVite وReact Router الحديث، وتشرح Actions وuseActionState وuseOptimistic وuse وSuspense وref كـprop وReact Compiler.

لأغلب الدروس لا: تحت كل درس محرر React يعمل في المتصفح. ولدروس Vite والبناء والنشر والمشروع النهائي تحتاج Node.js وnpm على جهازك، والدورة تشرح خطوات ذلك.

نعم. هذه الدورة تحل محل الدورتين، وكل من لديه وصول إلى إحداهما أو كلتيهما يجدها في «دوراتي» دون أي دفع إضافي.

نعم، الدروس مسجلة وتشاهدها في أي وقت وبالسرعة التي تناسبك، والوصول مدى الحياة مع كل التحديثات القادمة.

في كل درس محرر للتطبيق وتمرين عليه وحل مشروح، ومختصر كتابي، واختبار قصير. وفي نهاية كل قسم تحدٍّ واختبار، ثم مشروع نهائي واختبار نهائي.

نعم، تحصل على شهادة إتمام من منصة المدرسة عند إنهاء الدورة، ويمكن التحقق منها برابط خاص.

اكتب سؤالك في التعليقات أسفل الدرس نفسه، ويرد عليك المشرفون.

الشرح بالعربية، والمصطلحات البرمجية والكود بالإنجليزية كما ستراها في عملك.

البطاقات البنكية وPayPal، وفي مصر المحافظ الإلكترونية والبطاقات المحلية.

ابدأ React الحديثة اليوم

ابنِ أول Component في دقائق، وابدأ بالدروس المجانية الآن.

اشترك الآن
تصفح المنهج