React

1. 1

   Что такое React?

   Добро пожаловать. Если вы ни разу не написали ни строчки на JavaScript и не очень понимаете, что такое «фреймворк», вы пришли по адресу. К концу...

   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)

   Все компоненты, которые вы писали до сих пор, были жёстко зашиты. Greeting всегда здоровается с одним и тем же именем, Card всегда показывает один и...

   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)

   Наберите букву в обычном <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

    Компоновка компонентов (Components)

    Вы собрали карточку с рамкой и тенью, и выглядит она хорошо. Теперь такая же карточка нужна вокруг фотографии, вокруг формы входа и вокруг списка...

    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

    Тестирование компонентов 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 мин

Каждый урок, тест и ответ наставника показывается на вашем языке. AI-наставник отвечает на том языке, на котором вы пишете.

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