Курс по React — от табло от една част до приложение, което издържа

За кого е: за този, който вече е минал курса по TypeScript от тази школа и иска да разбере в дълбочина онова, което неговият урок 9 едва остави работещо, както и за този, който програмира на JavaScript или TypeScript, копирал е компоненти, които работят, и иска да знае защо работят и защо изведнъж спират да го правят. Не се предполага опит с React отвъд това да си виждал компонент: всяко понятие се обяснява, когато се появи, и се обяснява защо съществува, а не само как се пише.

Какво ще знаеш в края: да изградиш приложение на React с няколко екрана, да решаваш къде живее всяко парче състояние, да извличаш данни без надпревара между заявките и без бели екрани, да го тестваш с тестове, които наистина откриват грешките, да го измерваш, преди да го оптимизираш, и да го публикуваш. И да ти остане преценката, за да четеш документацията на React сам.

Къде се намира: този курс е стъпалото след курса по TypeScript от тази школа. Неговият урок 9 вече сглоби панел с компоненти, useState и useEffect; тук това не се повтаря: задълбочава се. Ако никога не си писал страница, започни първо с курса по Основи на уеб.

Какво ти трябва, преди да започнеш: компютър с Linux Mint, да умееш да отвориш терминал, да четеш типове на TypeScript (обединения, прости генерични типове) и да си виждал, макар и веднъж, компонент на React. Урок 0 инсталира всичко останало, с Node 24 LTS.

Проектът, който ще изградиш

revisor: екранът, който показва състоянието на списък от услуги —име, състояние и време за отговор—. Започва като монолитния панел от урок 9 по TypeScript и завършва като приложение с няколко екрана: отчет с филтри, запазени в URL адреса, детайлите за всяка услуга, данни с кеш, които се обновяват на заден план, формуляр за регистриране на услуги, известия, пакет от тестове и публикувана версия.

Това е същата задача като в курсовете по Go, Rust, TypeScript и Основи на уеб от тази школа. Онова, което се променя, е нивото на изискванията: не „да работи“, а „да издържа, когато порасне“. Курсът включва учебен сървър с контракта на API, така че не е нужно да си завършил курса по TypeScript, за да следваш този.

Десетте урока

Урок		Какво изграждаш	Какво научаваш
0	Истински проект: Vite, StrictMode и линтерът	панелът от урок 9 по TypeScript, преместен във Vite	какво добавя Vite; react-ts, структура по функционалност, прокси към API, променливи VITE_, активен линтер на React
1	Чисти компоненти и композиция	панелът, разделен на части	рендер и commit; чистота; children; стабилен key; капанът на 0; никога компонент вътре в друг
2	Състояние: моментна снимка, неизменяемост и структура	филтър „само сривове“, бележка за услуга, избор	състоянието като фотография; функция за обновяване (updater function); копиране, а не мутиране; пет правила за структурата на състоянието; повдигане на състоянието (lifting state up); key за нулиране
3	Effects: синхронизиране, а не „когато се зареди“	периодично запитване (polling) на всеки 10 s и детайл, който се нулира	започване и спиране на синхронизирането; почистване; надпревара между отговорите (race condition); StrictMode; честни зависимости; useEffectEvent
4	Състояние на сървъра с TanStack Query	отчетът с кеш и бутон „опитай отново“	useQuery, queryKey, signal; status и fetchStatus; refetchInterval; useMutation; празното състояние; Error Boundary
5	Маршрути и URL като състояние	списък, детайл, 404 и филтри в URL адреса	createBrowserRouter, <Outlet />, useSearchParams, NavLink; презареждане на клиентски маршрут
6	Споделено състояние: reducer и контекст	панел за известия и предпочитания	useReducer и чист reducer; контекст от две части; hook, който изисква доставчик (provider); кое състояние къде живее
7	Формуляри, действия и достъпност	регистрирането на услуга	<form action>, useActionState, useFormStatus, useOptimistic; валидиране; aria-invalid; ARIA live региони; клавиатура
8	Тестове на компоненти	тестовият пакет на панела	Vitest и Testing Library; заявки по роля; findBy; user-event; тестът, който става червен при връщане на промяната
9	Производителност, публикуване и кога е нужен framework	измереният и публикуван revisor	Profiler; React Compiler 1.0; vite build; пренаписване към index.html; Server Components и кога да се мигрира

В края на всеки урок има упражнения с решенията им. А дневникът е твой: записвай в него какво ти струва усилия.

Три принципа, които минават през целия курс

Един Effect е за синхронизиране с нещо, което е извън React. Не е за изчисляване на стойност, не е за реагиране на клик и не е за „когато се зареди“. Списъкът със зависимости описва кода; ако линтерът се оплаче, променя се кодът, никога не се заглушава правилото. Това е грешката, която струва най-скъпо в React, и целият урок 3 се занимава с нея, но тя се появява още от 2.

Първо се измерва, после се оптимизира. useMemo, useCallback и memo са инструменти със своята цена, а не навик. Курсът ги представя, когато има измерване, което ги изисква, и първо преподава структурата —локално състояние, children—, която избягва повечето излишни прерисувания.

Достъпността и сигурността не са уроци, а навици. Заявките по роля в 8 те подтикват да пишеш достъпен HTML, 7 въвежда клавиатурата и ARIA live регионите, а 9 преговаря XSS и онова, което никога не трябва да влиза в променлива VITE_.

Как разбираш, че си приключил

Курсът не свършва, когато си прочел урок 9, а когато твоят revisor изпълнява тези пет неща. Те са същите, които проверката потвърждава при всяка промяна:

1. npm run lint не връща никакви предупреждения и няма нито един eslint-disable на правилата на React.
2. npm test минава успешно и всеки тест, който защитава поправка, е станал червен, когато си я върнал назад.
3. Съществуват четирите състояния —зареждане, грешка, празно и с данни—, плюс това за „стари данни, докато се обновява“, и всяко има свой тест.
4. Обхожда се изцяло с клавиатурата, а известията за промяна стигат до екранен четец.
5. npm run build завършва успешно, предварителният преглед презарежда /servicios/pagos без да дава 404, сервиран с пренаписване, а в dist/ не се появява никакъв ключ или тайна.