Тестирование и отладка React-компонентов: React DevTools на практике
⚡ Получить весь курс (22 урока) сразу: https://boosty.to/friendly-frontend/p...
✏️ Познакомимся с расширением React DevTools и разберёмся, зачем оно нужно. Покажу, как установить и где искать вкладки Components и Profiler. Проанализируем дерево компонентов To Do List: посмотрим props, хуки и контексты. Научимся вручную менять состояние прямо через DevTools и отслеживать результат. Разберём поиск и навигацию по компонентам в большом дереве. Перейдём во вкладку Profiler: научимся записывать рендеры, читать Flamegraph и Ranked, понимать, какие компоненты и почему перерисовываются. Включим подсветку обновлений, чтобы быстрее выявлять лишние ререндеры. На практике оптимизируем проект: вынесем локальное состояние из контекста, чтобы не будить всё приложение на каждом вводе. В результате получим инструментальную базу для отладки и тестирования React-кода.
❤️ Ранний доступ к видео и доступ к закрытому чату: https://boosty.to/friendly-frontend
🔴 Timeline:
▶ 00:00 | Введение
▶ 00:57 | Установка и обзор React DevTools
▶ 02:29 | Вкладка Components — анализ дерева компонентов
▶ 05:11 | Редактирование состояния компонентов через React DevTools
▶ 06:26 | Поиск и навигация по компонентам
▶ 10:49 | Profiler — запись рендеров и поиск “лишних” перерисовок
▶ 14:30 | Оптимизация лишних перерисовок
▶ 19:49 | Заключение
📚 Ссылки из видео:
➖ Код на конец урока: https://github.com/aleksanderlamkov/t...
🧑💻 Основной телеграм-канал:
https://t.me/AleksanderLamkov
💬 Коммьюнити-чат в телеграме (помощь новичкам):
https://t.me/FriendlyFrontend
🗂️ Бесплатные курсы на канале:
🟠 HTML: • HTML курс 2025
🔵 CSS: • CSS курс 2025
🟡 JS: • JavaScript курс 2025
🟢 A11y: • Accessibility курс 2025
🗺 Frontend Roadmap: • Frontend Roadmap 2024 | Что должен учить ф...
⚪️ Мастер-класс по верстке для новичков: • Адаптивная верстка сайта с нуля для начина...
🔘 Мастер-класс по верстке для продвинутых (БЭМ, SCSS): • Вёрстка сайта с 0 до результата | HTML, БЭ...
⚫️ Мастер-класс по верстке с практикой по JavaScript: • Вёрстка сайта с нуля • HTML, SCSS, JS прак...
🔴 Мастер-класс по верстке на стеке JSX, SCSS, JS, Vite, Minista (SSG), БЭМ: https://stepik.org/a/228315
📌 Автор:
➖ Личный сайт: https://aleksanderlamkov.ru/
➖ Telegram: https://t.me/AleksanderLamkov
➖ Boosty: https://boosty.to/friendly-frontend
➖ GetMentor: https://getmentor.dev/mentor/aleksand...
➖ Stepik (платные курсы и мастер-классы): https://stepik.org/a/228315
#frontend #фронтенд #react #reactjs
On this page of the site you can watch the video online Тестирование и отладка React-компонентов: React DevTools на практике with a duration of hours minute second in good quality, which was uploaded by the user Александр Ламков — Friendly Frontend 29 January 2026, share the link with friends and acquaintances, this video has already been watched 1,765 times on youtube and it was liked by 102 viewers. Enjoy your viewing!
