React

1. 1

   ما هو React؟

   What React isComponents as functionsVirtual DOM intuitionRendering JSXCreating a Vite app
   25 دقيقة
2. 2

   JSX والمكوّنات (Components)

   JSX syntax rulesSingle root elementClassName vs classEmbedding expressions with {}Defining componentsComposing components
   30 دقيقة
3. 3

   البروبس (Props)

   Passing props as attributesReceiving props objectDestructuring props in signatureDefault valuesThinking about prop shapes
   30 دقيقة
4. 4

   الحالة (State) باستخدام useState

   UseState hookReading stateCalling the setterUpdater function formNever mutate stateCounter pattern
   35 دقيقة
5. 5

   معالجة الأحداث

   OnClick handlerOnChange basicsPassing functions vs calling themEvent objectPassing handlers as props
   30 دقيقة
6. 6

   العرض الشرطي والقوائم

   && for show/hideTernary for either/orMapping arrays to JSXThe key propWhy keys need to be stable
   30 دقيقة
7. 7

   النماذج والمدخلات المتحكم بها (Controlled Inputs)

   Controlled input patternValue and onChange togetherMulti-field form stateOnSubmit and preventDefaultGathering form data
   35 دقيقة
8. 8

   التأثيرات (Effects) باستخدام useEffect

   What counts as a side effectUseEffect signatureDependency arrayRunning on mount onlyCleanup functionSubscribe/unsubscribe pattern
   40 دقيقة
9. 9

   تركيب المكوّنات (Component Composition)

   Children propWrapping componentsPassing JSX as propsLifting state upThinking in component trees
   35 دقيقة
10. 10

    السياق (Context) و useContext

    CreateContextContext.ProviderUseContextWhen context is the right toolContext vs prop drilling tradeoffs
    35 دقيقة
11. 11

    useReducer

    When to reach for useReducerReducer function shapeAction objectsDispatchCombining useReducer with useContext
    35 دقيقة
12. 12

    الخطافات المخصصة (Custom Hooks)

    Extracting stateful logic into a functionUse prefix conventionUseToggle exampleUseLocalStorage exampleHooks rules
    35 دقيقة
13. 13

    الأداء والحفظ بالتخزين (Memoization)

    React.memo for componentsUseMemo for expensive computationsUseCallback for stable function referencesWhen memoization is overkillMeasuring before optimizing
    35 دقيقة
14. 14

    جلب البيانات

    Fetch inside useEffectLoading/error/data statesAbortController cleanupPreventing setState after unmountMention TanStack Query as a next step
    40 دقيقة
15. 15

    التوجيه باستخدام React Router

    Installing react-router-domBrowserRouterRoutes and RouteLink for navigationUseParamsUseNavigate
    40 دقيقة
16. 16

    اختبار مكوّنات React (Components)

    Vitest + React Testing Library setupRender and screenGetByRole queriesUserEvent for interactionsWriting one good button test
    40 دقيقة
17. 17

    مشروع التخرج: تطبيق قائمة المهام

    Combining state, lists, controlled inputsCustom hook for localStorage persistenceSmall routing setupPutting it together
    60 دقيقة

كل درس واختبار ورد من المدرس يظهر بلغتك. المدرس الذكي يرد بنفس اللغة التي تكتب بها.

See how hiring teams interview engineers on React, in production-like environments.