ری‌اکت

1. 1

   ری‌اکت چیست؟

   خوش آمدید. اگر هرگز یک خط JavaScript نزده‌اید و مطمئن نیستید «فریم‌ورک» چیست، سر جای درستی هستید. تا آخر این درس می‌دانید React چیست، یک پروژهٔ کوچک...

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

   JSX و کامپوننت‌ها (Components)

   در درس پیش دیدید که یک کامپوننت چیزی برگرداند که شبیه HTML بود: return <h1>Hello, React</h1>;. همان‌جا باید کمی به نظرتان ناجور آمده باشد. تابع‌های...

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

   پراپس (Props)

   هر کامپوننتی (component) که تا اینجا نوشته‌اید مقدارهایش را سفت و ثابت در خود داشته است. کامپوننت Greeting همیشه به یک نام سلام می‌کند، Card همیشه...

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

   وضعیت (State) با useState

   هر کامپوننتی (component) که تا اینجا نوشته‌اید، برای ویژگی‌های یکسان هر بار همان خروجی را رندر می‌کند. برای یک سرتیتر یا یک کارت اشکالی ندارد، ولی...

   UseState hookReading stateCalling the setterUpdater function formNever mutate stateCounter pattern
   35 دقیقه
5. 5

   مدیریت رویدادها

   کامپوننتی (component) که فقط بر پایهٔ ویژگی‌ها و وضعیت رندر می‌شود، به‌خودی‌خود تعاملی نیست؛ چیزی باید متوجه شود که کاربر روی دکمه کلیک کرده، داخل...

   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

   کار یک مؤلفه (component) تا اینجا این بوده که به پراپ‌ها (props) و وضعیت فعلی‌اش نگاه کند و به یک پرسش جواب بدهد: همین حالا چه چیزی باید روی صفحه...

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

   دریافت داده

   تقریباً هیچ برنامه واقعی نمی‌تواند فقط با داده‌ای که کاربر همین حالا روی صفحه دارد سر کند. دیر یا زود یک مؤلفه (component) باید چیزی را از سرور...

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

    ترکیب کامپوننت (Component)

    کارتی با یک حاشیه و یک سایه ساخته‌اید و خوب هم از آب درآمده. حالا همان کارت را دور یک عکس لازم دارید، و دور یک فرم ورود، و دور فهرستی از نظرها....

    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

    هوک‌های سفارشی (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

    آزمایش کامپوننت‌های ری‌اکت (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.