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