متوسط
React
تعلم React من الصفر. المكونات، الحالة، الخطافات، السياق، الأداء، التوجيه، الاختبار، وتطبيق ختامي شامل.
17 دروس10.2h تطبيقي11 لغات
ابدأ التعلّم مجاناًReact دورة17 درسًا، بالترتيب
- 125 دقيقة
ما هو React؟
What React isComponents as functionsVirtual DOM intuitionRendering JSXCreating a Vite app - 230 دقيقة
JSX والمكونات
JSX syntax rulesSingle root elementClassName vs classEmbedding expressions with {}Defining componentsComposing components - 330 دقيقة
الخصائص
Passing props as attributesReceiving props objectDestructuring props in signatureDefault valuesThinking about prop shapes - 435 دقيقة
الحالة باستخدام useState
UseState hookReading stateCalling the setterUpdater function formNever mutate stateCounter pattern - 530 دقيقة
معالجة الأحداث
OnClick handlerOnChange basicsPassing functions vs calling themEvent objectPassing handlers as props - 630 دقيقة
العرض الشرطي والقوائم
&& for show/hideTernary for either/orMapping arrays to JSXThe key propWhy keys need to be stable - 735 دقيقة
النماذج والمدخلات المتحكم بها
Controlled input patternValue and onChange togetherMulti-field form stateOnSubmit and preventDefaultGathering form data - 840 دقيقة
التأثيرات باستخدام useEffect
What counts as a side effectUseEffect signatureDependency arrayRunning on mount onlyCleanup functionSubscribe/unsubscribe pattern - 935 دقيقة
تركيب المكونات
Children propWrapping componentsPassing JSX as propsLifting state upThinking in component trees - 1035 دقيقة
السياق و useContext
CreateContextContext.ProviderUseContextWhen context is the right toolContext vs prop drilling tradeoffs - 1135 دقيقة
useReducer
When to reach for useReducerReducer function shapeAction objectsDispatchCombining useReducer with useContext - 1235 دقيقة
خطافات مخصصة
Extracting stateful logic into a functionUse prefix conventionUseToggle exampleUseLocalStorage exampleHooks rules - 1335 دقيقة
الأداء والحفظ المؤقت
React.memo for componentsUseMemo for expensive computationsUseCallback for stable function referencesWhen memoization is overkillMeasuring before optimizing - 1440 دقيقة
جلب البيانات
Fetch inside useEffectLoading/error/data statesAbortController cleanupPreventing setState after unmountMention TanStack Query as a next step - 1540 دقيقة
التوجيه باستخدام React Router
Installing react-router-domBrowserRouterRoutes and RouteLink for navigationUseParamsUseNavigate - 1640 دقيقة
اختبار مكونات React
Vitest + React Testing Library setupRender and screenGetByRole queriesUserEvent for interactionsWriting one good button test - 1760 دقيقة
مشروع التخرج: تطبيق قائمة المهام
Combining state, lists, controlled inputsCustom hook for localStorage persistenceSmall routing setupPutting it together
تعلّم React بلغتك
كل درس واختبار ورد من المدرس يظهر بلغتك. المدرس الذكي يرد بنفس اللغة التي تكتب بها.