React

1. 1

   ما هو React؟

   أهلًا بك. إن لم تكتب سطر JavaScript واحدًا في حياتك ولا تعرف بالضبط ما معنى "إطار عمل"، فأنت في المكان الصحيح. مع نهاية هذا الدرس ستعرف ما هو React،...

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

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

   في الدرس الماضي رأيت مكوّنًا (component) يُرجع شيئًا يشبه HTML: return <h1>Hello, React</h1>;. لا بد أن ذلك بدا لك غريبًا بعض الشيء. فدوال JavaScript...

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

   البروبس (Props)

   كل مكوّن كتبته حتى الآن كانت قيمه مثبتة في الكود. Greeting يلقي التحية دائما على الاسم نفسه، و Card يعرض دائما النص نفسه. هذا مقبول في عرض توضيحي،...

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

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

   كل مكوّن كتبته حتى الآن يعطي الخرج نفسه للخصائص (props) نفسها في كل مرة بلا استثناء. هذا مناسب لعنوان أو بطاقة، لكنه ينهار في اللحظة التي تحتاج فيها...

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

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

   المكوّن الذي لا يفعل شيئًا سوى العرض اعتمادًا على الخصائص (props) والحالة ليس تفاعليًا من تلقاء نفسه، إذ لا بد لشيء ما أن يلاحظ ضغطة المستخدم على زر،...

   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)

   اكتب حرفا في حقل <input> عادي في HTML وسيتولى المتصفح الأمر وحده: عنصر DOM يحتفظ بما كتبته بهدوء، ولا حاجة لإخبار أحد. هذا يكفي إلى أن يحتاج تطبيقك...

   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

   جلب البيانات

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

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

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

    بنيت بطاقة لها حدّ وظل، ومظهرها جيد. والآن تحتاج البطاقة نفسها حول صورة، وحول نموذج تسجيل دخول، وحول قائمة تعليقات. والحركة المغرية هي نسخ البطاقة...

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

    السياق (Context) و useContext

    في تطبيقك زر يبدّل الوضع الداكن. الزر يعيش في لوحة الإعدادات، لكن الذي يحتاج إلى معرفة قيمته زر آخر يقبع على عمق ثمانية مكوّنات داخل جدول داخل بطاقة...

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

    useReducer

    يبدأ نموذج الدفع بسيطا. هناك قيمة، فتضيف useState. ثم يحتاج رسالة خطأ، فهذا useState آخر. ثم راية تحميل، ثم راية "هل لمس المستخدم هذا الحقل بعد"،...

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

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

    كتبت درجًا جانبيًا يُفتح ويُغلق. ثلاثة أسطر useState ومعالج يقلب قيمة منطقية. ثم كتبت الشيء نفسه لقائمة منسدلة، ثم لنافذة منبثقة، ثم لرابط "عرض...

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

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

    في تطبيقك جدول فيه ألفا صف ومربع بحث فوقه. وكل ضغطة مفتاح تبدو ثقيلة: تكتب، فيظهر الحرف بعد نصف ثانية. لا شيء معطوب، والكود يبدو معقولًا. وما يحدث هو...

    React.memo for componentsUseMemo for expensive computationsUseCallback for stable function referencesWhen memoization is overkillMeasuring before optimizing
    35 دقيقة
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.