---

Видео на тему: Александр Ламков — Friendly Frontend - видео

✏️ Сегодня разбираю фронтенд-проекты подписчиков: HTML, CSS, JS/TS, React. Смотрим верстку, архитектуру, читаемость, логику, UI — всё, что покажете. За стрим обычно успеваем 4–8 проектов — зависит от глубины разбора и того, насколько вы любите писать по 1200 строк в одном компоненте 🙂 🎲 Важно: теперь отбор проектов случайный. Все непроверенные заявки участвуют в рандоме. Если ты отправил проект сегодня — у тебя такой же шанс попасть на разбор, как и у тех, кто подал месяц назад. Очередь больше не хронологическая — это общий список всех заявок. 🎯 Как попасть на разбор 📥 Заявки принимаются через форму: https://forms.gle/bxEdDtDzcFjMw6nD8 🔼 Хочешь без лотереи и с приоритетом: https://boosty.to/friendly-frontend/posts/9d562c7c-0c13-4502-be69-b4b8a6a5149f 🗂 Список всех заявок: https://docs.google.com/spreadsheets/d/e/2PACX-1vRZ76V7asPRpD3ln_pRladtD7It67s2xUSP8jXAZJ6hN177giHSaYt3CfL9s92_mdXowL0rayvOe6Hz/pubhtml 🧑💻 Основной телеграм-канал: https://t.me/AleksanderLamkov 💬 Коммьюнити-чат в телеграме (помощь новичкам): https://t.me/FriendlyFrontend 🗂️ Бесплатные курсы на канале: 🟠 HTML: https://youtube.com/playlist?list=PL0MUAHwery4ot0KmgGxlBSB7rXssLeA6h 🔵 CSS: https://youtube.com/playlist?list=PL0MUAHwery4o9I7QQVj_RP4ZVpmdx6evz 🟡 JS: https://www.youtube.com/playlist?list=PL0MUAHwery4qn4Y27iUxmzC-JiauX7vSL 🟣 React: https://www.youtube.com/playlist?list=PL0MUAHwery4omH4GyVQ-lI2R326tOdN7A 🟢 A11y: https://youtube.com/playlist?list=PL0MUAHwery4r4gCA3AOtHgArM_UOb2QUV 🗺 Frontend Roadmap: https://youtu.be/1WRJKgwlX9w ⚪️ Мастер-класс по верстке для новичков: https://www.youtube.com/playlist?list=PL0MUAHwery4rqkzKF1mDBCIH_eZgjY6uN 🔘 Мастер-класс по верстке для продвинутых (БЭМ, SCSS): https://www.youtube.com/playlist?list=PL0MUAHwery4rdZt-8E9p9zty2ZUCH6Ai3 ⚫️ Мастер-класс по верстке с практикой по JavaScript: https://youtu.be/hkYzqTKnSIg 🔴 Мастер-класс по верстке на стеке 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/aleksandr-lamkov-1480 ➖ Stepik (платные курсы и мастер-классы): https://stepik.org/a/228315 #frontend #фронтенд #react #js #javascript❤️ Отблагодарить за курс / доступ к видео на неделю раньше и закрытый чат: https://boosty.to/friendly-frontend ✏️ В финальном уроке соберём всё воедино и выложим наше приложение в интернет. Обсудим, что такое деплой для фронтенда и чем отличается dev-сервер от production-сборки. Вернём хранение задач в localStorage, чтобы приложение работало без бэкенда. Настроим переключение API под разные окружения. Соберём production-бандл и проверим его через vite preview. Доработаем маршрутизацию, чтобы ссылки работали корректно после выкладки. Подготовим vite.config.js к продакшену и настроим base под GitHub Pages. Добавим копию 404.html, чтобы SPA-роутинг не ломался. Установим и настроим пакет gh-pages, пропишем удобные npm-скрипты и задеплоим проект. В итоге получаем полноценное React-приложение в продакшене, готовое для портфолио. 🔴 Timeline: ▶ 00:00 | Введение ▶ 00:48 | Что такое деплой для фронтенда ▶ 02:37 | Возвращаем localStorage перед деплоем ▶ 16:30 | Дорабатываем маршрутизацию ▶ 20:05 | Деплой на GitHub Pages (через пакет gh-pages) ▶ 28:05 | Заключение 📚 Ссылки из видео: ➖ Код на конец урока: https://github.com/aleksanderlamkov/todo-react/tree/10d467fda9a7e29e377b6cbb11f1a39a80781540 ➖ Мой To Do List на GitHub Pages: https://aleksanderlamkov.github.io/todo-react/ 🧑💻 Основной телеграм-канал: https://t.me/AleksanderLamkov 💬 Коммьюнити-чат в телеграме (помощь новичкам): https://t.me/FriendlyFrontend 🗂️ Бесплатные курсы на канале: 🟠 HTML: https://youtube.com/playlist?list=PL0MUAHwery4ot0KmgGxlBSB7rXssLeA6h 🔵 CSS: https://youtube.com/playlist?list=PL0MUAHwery4o9I7QQVj_RP4ZVpmdx6evz 🟡 JS: https://www.youtube.com/playlist?list=PL0MUAHwery4qn4Y27iUxmzC-JiauX7vSL 🟢 A11y: https://youtube.com/playlist?list=PL0MUAHwery4r4gCA3AOtHgArM_UOb2QUV 🗺 Frontend Roadmap: https://youtu.be/1WRJKgwlX9w ⚪️ Мастер-класс по верстке для новичков: https://www.youtube.com/playlist?list=PL0MUAHwery4rqkzKF1mDBCIH_eZgjY6uN 🔘 Мастер-класс по верстке для продвинутых (БЭМ, SCSS): https://www.youtube.com/playlist?list=PL0MUAHwery4rdZt-8E9p9zty2ZUCH6Ai3 ⚫️ Мастер-класс по верстке с практикой по JavaScript: https://youtu.be/hkYzqTKnSIg 🔴 Мастер-класс по верстке на стеке 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/aleksandr-lamkov-1480 ➖ Stepik (платные курсы и мастер-классы): https://stepik.org/a/228315 #frontend #фронтенд #react #reactjs⚡ Получить весь курс (22 урока) сразу: https://boosty.to/friendly-frontend/posts/08f4cd01-a7ce-4e5b-8055-88aa401c7808 ✏️ Познакомимся с расширением 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/todo-react/tree/8f8a59217cd4abd6f8097c1b740a093bc5fc1cb8 🧑💻 Основной телеграм-канал: https://t.me/AleksanderLamkov 💬 Коммьюнити-чат в телеграме (помощь новичкам): https://t.me/FriendlyFrontend 🗂️ Бесплатные курсы на канале: 🟠 HTML: https://youtube.com/playlist?list=PL0MUAHwery4ot0KmgGxlBSB7rXssLeA6h 🔵 CSS: https://youtube.com/playlist?list=PL0MUAHwery4o9I7QQVj_RP4ZVpmdx6evz 🟡 JS: https://www.youtube.com/playlist?list=PL0MUAHwery4qn4Y27iUxmzC-JiauX7vSL 🟢 A11y: https://youtube.com/playlist?list=PL0MUAHwery4r4gCA3AOtHgArM_UOb2QUV 🗺 Frontend Roadmap: https://youtu.be/1WRJKgwlX9w ⚪️ Мастер-класс по верстке для новичков: https://www.youtube.com/playlist?list=PL0MUAHwery4rqkzKF1mDBCIH_eZgjY6uN 🔘 Мастер-класс по верстке для продвинутых (БЭМ, SCSS): https://www.youtube.com/playlist?list=PL0MUAHwery4rdZt-8E9p9zty2ZUCH6Ai3 ⚫️ Мастер-класс по верстке с практикой по JavaScript: https://youtu.be/hkYzqTKnSIg 🔴 Мастер-класс по верстке на стеке 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/aleksandr-lamkov-1480 ➖ Stepik (платные курсы и мастер-классы): https://stepik.org/a/228315 #frontend #фронтенд #react #reactjs⚡ Получить весь курс (22 урока) сразу: https://boosty.to/friendly-frontend/posts/08f4cd01-a7ce-4e5b-8055-88aa401c7808 ✏️ Разберём, что такое XSS и как эта уязвимость появляется в браузере. Покажу разницу между выводом текста через JSX и вставкой “сырого” HTML. Объясню, как работает проп dangerouslySetInnerHTML и чем он опасен. На примере To Do List реализуем подсветку текста поиска тегом mark — сначала простым способом, а затем безопасным через экранирование пользовательского ввода. Покажу, как закрыть XSS-дыру своими руками и зачем нужен санитайз. 🔴 Timeline: ▶ 00:00 | Введение ▶ 00:55 | Что такое XSS (и сразу на примере) ▶ 02:46 | Проп dangerouslySetInnerHTML: как мы сами открываем дыру ▶ 05:48 | Почему React безопасен «из коробки» ▶ 06:34 | Подсветка найденного текста через mark без XSS ▶ 18:57 | Заключение 📚 Ссылки из видео: ➖ Код на конец урока: https://github.com/aleksanderlamkov/todo-react/tree/b35b41ffb770000248b0c0477895c7efa0f6a196 🧑💻 Основной телеграм-канал: https://t.me/AleksanderLamkov 💬 Коммьюнити-чат в телеграме (помощь новичкам): https://t.me/FriendlyFrontend 🗂️ Бесплатные курсы на канале: 🟠 HTML: https://youtube.com/playlist?list=PL0MUAHwery4ot0KmgGxlBSB7rXssLeA6h 🔵 CSS: https://youtube.com/playlist?list=PL0MUAHwery4o9I7QQVj_RP4ZVpmdx6evz 🟡 JS: https://www.youtube.com/playlist?list=PL0MUAHwery4qn4Y27iUxmzC-JiauX7vSL 🟢 A11y: https://youtube.com/playlist?list=PL0MUAHwery4r4gCA3AOtHgArM_UOb2QUV 🗺 Frontend Roadmap: https://youtu.be/1WRJKgwlX9w ⚪️ Мастер-класс по верстке для новичков: https://www.youtube.com/playlist?list=PL0MUAHwery4rqkzKF1mDBCIH_eZgjY6uN 🔘 Мастер-класс по верстке для продвинутых (БЭМ, SCSS): https://www.youtube.com/playlist?list=PL0MUAHwery4rdZt-8E9p9zty2ZUCH6Ai3 ⚫️ Мастер-класс по верстке с практикой по JavaScript: https://youtu.be/hkYzqTKnSIg 🔴 Мастер-класс по верстке на стеке 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/aleksandr-lamkov-1480 ➖ Stepik (платные курсы и мастер-классы): https://stepik.org/a/228315 #frontend #фронтенд #react #reactjs⚡ Получить весь курс (22 урока) сразу: https://boosty.to/friendly-frontend/posts/08f4cd01-a7ce-4e5b-8055-88aa401c7808 ✏️ Разберём менеджмент состояния без Redux на примере To Do List: покажу, где у нас живут данные и UI-мелочи, почему разрозненные setTasks в обработчиках опасны (устаревший снимок, лишние ререндеры), и как это чинится. Коротко объясню, что такое useReducer и зачем он нужен именно здесь. Переложим массив задач с useState на useReducer, опишем простые экшены (SET_ALL, ADD, TOGGLE_COMPLETE, DELETE, DELETE_ALL) и заменим setTasks на dispatch в addTask, toggleTaskComplete, deleteTask, deleteAllTasks. Оставим асинхронщину с сервером (tasksAPI) снаружи редьюсера: сначала ответ, потом dispatch. Почистим зависимости useCallback, чтобы обработчики не висели на tasks. Оптимизируем контекст: мемоизируем value в TasksContext через useMemo. Ускорим список: обернём TodoItem в React.memo. В конце зафиксируем простые правила — когда брать useState, когда useContext, и когда подключать небольшой useReducer. Всё — без сторонних библиотек и без ломки существующего кода. ❤️ Ранний доступ к видео и доступ к закрытому чату: https://boosty.to/friendly-frontend 🔴 Timeline: ▶ 00:00 | Введение ▶ 00:39 | Текущее состояние проекта и проблематика ▶ 03:40 | useReducer ▶ 12:48 | Оптимизация контекста ▶ 14:50 | useState, useContext или useReducer – когда что использовать ▶ 17:09 | Заключение 📚 Ссылки из видео: ➖ Код на конец урока: https://github.com/aleksanderlamkov/todo-react/tree/f1ee0c8f1c9711a04560456a0072cfdf0736133a 🧑💻 Основной телеграм-канал: https://t.me/AleksanderLamkov 💬 Коммьюнити-чат в телеграме (помощь новичкам): https://t.me/FriendlyFrontend 🗂️ Бесплатные курсы на канале: 🟠 HTML: https://youtube.com/playlist?list=PL0MUAHwery4ot0KmgGxlBSB7rXssLeA6h 🔵 CSS: https://youtube.com/playlist?list=PL0MUAHwery4o9I7QQVj_RP4ZVpmdx6evz 🟡 JS: https://www.youtube.com/playlist?list=PL0MUAHwery4qn4Y27iUxmzC-JiauX7vSL 🟢 A11y: https://youtube.com/playlist?list=PL0MUAHwery4r4gCA3AOtHgArM_UOb2QUV 🗺 Frontend Roadmap: https://youtu.be/1WRJKgwlX9w ⚪️ Мастер-класс по верстке для новичков: https://www.youtube.com/playlist?list=PL0MUAHwery4rqkzKF1mDBCIH_eZgjY6uN 🔘 Мастер-класс по верстке для продвинутых (БЭМ, SCSS): https://www.youtube.com/playlist?list=PL0MUAHwery4rdZt-8E9p9zty2ZUCH6Ai3 ⚫️ Мастер-класс по верстке с практикой по JavaScript: https://youtu.be/hkYzqTKnSIg 🔴 Мастер-класс по верстке на стеке 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/aleksandr-lamkov-1480 ➖ Stepik (платные курсы и мастер-классы): https://stepik.org/a/228315 #frontend #фронтенд #react #reactjs⚡ Получить весь курс (22 урока) сразу: https://boosty.to/friendly-frontend/posts/08f4cd01-a7ce-4e5b-8055-88aa401c7808 ✏️ Разберём, почему хаотичная структура проекта мешает развитию, и что даёт методология Feature-Sliced Design. Пошагово перенесём код в слои app, pages, widgets, features, entities и shared. Покажу, что именно должно лежать в каждом слое, и как не нарушать правило зависимостей сверху вниз. Перенесём роутер и глобальные стили в app, вынесем страницы в отдельные папки, соберём виджет Todo из фич и сущностей, а бизнес-логику и контекст задач перенесём в entities. Отдельные возможности — добавление, поиск и статистику — оформим в features, а кнопки, поля, ссылки и API сложим в shared. Настроим алиас @, чтобы избавиться от длинных относительных путей. В итоге проект станет структурированным, удобным для поддержки и готовым к расширению. ❤️ Ранний доступ к видео и доступ к закрытому чату: https://boosty.to/friendly-frontend 🔴 Timeline: ▶ 00:00 | Введение ▶ 00:35 | Что такое Feature-Sliced Design и зачем он нам ▶ 02:03 | Важное правило зависимостей FSD ▶ 03:18 | Текущее состояние структуры проекта ▶ 05:10 | Слой app ▶ 07:35 | Слой pages ▶ 08:56 | Слой widgets ▶ 09:57 | Слой features ▶ 11:59 | Слой entities ▶ 16:43 | Слой shared ▶ 19:29 | Настройка и применение алиаса ▶ 25:21 | Заключение 📚 Ссылки из видео: ➖ Код на конец урока: https://github.com/aleksanderlamkov/todo-react/tree/897f2b38145cfcd27f9ed25eb66b2143dba06d12 ➖ Feature-Sliced Design официальная русскоязычная документация: https://feature-sliced.github.io/documentation/ru/ 🧑💻 Основной телеграм-канал: https://t.me/AleksanderLamkov 💬 Коммьюнити-чат в телеграме (помощь новичкам): https://t.me/FriendlyFrontend 🗂️ Бесплатные курсы на канале: 🟠 HTML: https://youtube.com/playlist?list=PL0MUAHwery4ot0KmgGxlBSB7rXssLeA6h 🔵 CSS: https://youtube.com/playlist?list=PL0MUAHwery4o9I7QQVj_RP4ZVpmdx6evz 🟡 JS: https://www.youtube.com/playlist?list=PL0MUAHwery4qn4Y27iUxmzC-JiauX7vSL 🟢 A11y: https://youtube.com/playlist?list=PL0MUAHwery4r4gCA3AOtHgArM_UOb2QUV 🗺 Frontend Roadmap: https://youtu.be/1WRJKgwlX9w ⚪️ Мастер-класс по верстке для новичков: https://www.youtube.com/playlist?list=PL0MUAHwery4rqkzKF1mDBCIH_eZgjY6uN 🔘 Мастер-класс по верстке для продвинутых (БЭМ, SCSS): https://www.youtube.com/playlist?list=PL0MUAHwery4rdZt-8E9p9zty2ZUCH6Ai3 ⚫️ Мастер-класс по верстке с практикой по JavaScript: https://youtu.be/hkYzqTKnSIg 🔴 Мастер-класс по верстке на стеке 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/aleksandr-lamkov-1480 ➖ Stepik (платные курсы и мастер-классы): https://stepik.org/a/228315 #frontend #фронтенд #react #reactjs⚡ Получить весь курс (22 урока) сразу: https://boosty.to/friendly-frontend/posts/08f4cd01-a7ce-4e5b-8055-88aa401c7808 ✏️ Разберём, почему простая CSS-анимация в React часто осложняется нюансами — компоненты могут размонтироваться раньше, чем отыграет анимация, а при работе с сервером легко получить рассинхрон интерфейса и базы данных. Покажу, как добавить плавное удаление задачи из списка: сначала реализуем простое решение через ref и утилиту useCombinedRefs, а затем соберём более надёжный вариант с состоянием disappearingTaskId, где анимация запускается только после ответа сервера. Добавим и анимацию появления новой задачи с помощью флага appearingTaskId и CSS-ключевых кадров. В итоге наш список задач станет «живым» — элементы не исчезают мгновенно, а плавно уходят и появляются, делая интерфейс аккуратнее и приятнее для пользователя. ❤️ Ранний доступ к видео и доступ к закрытому чату: https://boosty.to/friendly-frontend 🔴 Timeline: ▶ 00:00 | Введение ▶ 00:56 | Анимация удаления задачи из списка — обзор идеи ▶ 02:18 | Анимация удаления задачи из списка — прямолинейное решение через ref и useCombinedRefs ▶ 08:43 | Анимация удаления задачи из списка — продуманное решение через disappearingTaskId ▶ 13:25 | Анимация добавления задачи в список ▶ 17:24 | Заключение 📚 Ссылки из видео: ➖ Код на конец урока: https://github.com/aleksanderlamkov/todo-react/tree/baad5afa18936de45f5c67b4a1de31b066e4f391 🧑💻 Основной телеграм-канал: https://t.me/AleksanderLamkov 💬 Коммьюнити-чат в телеграме (помощь новичкам): https://t.me/FriendlyFrontend 🗂️ Бесплатные курсы на канале: 🟠 HTML: https://youtube.com/playlist?list=PL0MUAHwery4ot0KmgGxlBSB7rXssLeA6h 🔵 CSS: https://youtube.com/playlist?list=PL0MUAHwery4o9I7QQVj_RP4ZVpmdx6evz 🟡 JS: https://www.youtube.com/playlist?list=PL0MUAHwery4qn4Y27iUxmzC-JiauX7vSL 🟢 A11y: https://youtube.com/playlist?list=PL0MUAHwery4r4gCA3AOtHgArM_UOb2QUV 🗺 Frontend Roadmap: https://youtu.be/1WRJKgwlX9w ⚪️ Мастер-класс по верстке для новичков: https://www.youtube.com/playlist?list=PL0MUAHwery4rqkzKF1mDBCIH_eZgjY6uN 🔘 Мастер-класс по верстке для продвинутых (БЭМ, SCSS): https://www.youtube.com/playlist?list=PL0MUAHwery4rdZt-8E9p9zty2ZUCH6Ai3 ⚫️ Мастер-класс по верстке с практикой по JavaScript: https://youtu.be/hkYzqTKnSIg 🔴 Мастер-класс по верстке на стеке 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/aleksandr-lamkov-1480 ➖ Stepik (платные курсы и мастер-классы): https://stepik.org/a/228315 #frontend #фронтенд #react #reactjs🎮 Продолжаю Clair Obscur: Expedition 33 — игру, к которой уже возвращаюсь не в первый раз. Знаю, что будет дальше, но всё равно хочется играть и проживать этот мир без спешки. 🤝 Поддержать проект Friendly Frontend: https://www.donationalerts.com/r/aleksanderlamkov Донаты помогают не терять ваши сообщения в чате — я вижу их сразу и отвечаю в первую очередь. 🧑💻 Основной телеграм-канал: https://t.me/AleksanderLamkov 💬 Коммьюнити-чат в телеграме (помощь новичкам): https://t.me/FriendlyFrontend 🗂️ Бесплатные курсы на канале: 🟠 HTML: https://youtube.com/playlist?list=PL0MUAHwery4ot0KmgGxlBSB7rXssLeA6h 🔵 CSS: https://youtube.com/playlist?list=PL0MUAHwery4o9I7QQVj_RP4ZVpmdx6evz 🟡 JS: https://www.youtube.com/playlist?list=PL0MUAHwery4qn4Y27iUxmzC-JiauX7vSL 🟢 A11y: https://youtube.com/playlist?list=PL0MUAHwery4r4gCA3AOtHgArM_UOb2QUV 🗺 Frontend Roadmap: https://youtu.be/1WRJKgwlX9w ⚪️ Мастер-класс по верстке для новичков: https://www.youtube.com/playlist?list=PL0MUAHwery4rqkzKF1mDBCIH_eZgjY6uN 🔘 Мастер-класс по верстке для продвинутых (БЭМ, SCSS): https://www.youtube.com/playlist?list=PL0MUAHwery4rdZt-8E9p9zty2ZUCH6Ai3 ⚫️ Мастер-класс по верстке с практикой по JavaScript: https://youtu.be/hkYzqTKnSIg 🔴 Мастер-класс по верстке на стеке 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/aleksandr-lamkov-1480 ➖ Stepik (платные курсы и мастер-классы): https://stepik.org/a/228315 #gaming⚡ Получить весь курс (22 урока) сразу: https://boosty.to/friendly-frontend/posts/08f4cd01-a7ce-4e5b-8055-88aa401c7808 ✏️ Разберёмся, как правильно стилизовать компоненты в React. Покажу, как сейчас подключены все стили проекта через main.jsx и объясню, почему это не лучшая идея. Перенесём стили из src/styles/components внутрь компонентов и подключим их напрямую. Переведём обычные CSS/SCSS-файлы в модульные (.module.scss), переименуем классы из БЭМ-нотации в camelCase и обновим разметку. Расскажу, как работают CSS-модули, зачем они нужны и почему при таком подходе не возникает конфликтов классов. Обсудим альтернативы: Tailwind и CSS-in-JS — в чём их особенности, зачем они вообще нужны и почему я сознательно не использую их в этом курсе. В конце вы получите чистую, модульную систему стилей, где каждый компонент отвечает за свои классы. ❤️ Ранний доступ к видео и доступ к закрытому чату: https://boosty.to/friendly-frontend 🔴 Timeline: ▶ 00:00 | Введение ▶ 00:51 | Обзор текущей системы стилей ▶ 01:53 | Подключаем стили напрямую в компонент ▶ 04:00 | Препроцессор стилей Sass (SCSS) ▶ 05:21 | Перевод стилей на CSS-модули ▶ 18:22 | Почему не Tailwind и не CSS‑in‑JS ▶ 20:17 | Заключение 📚 Ссылки из видео: ➖ Код на конец урока: https://github.com/aleksanderlamkov/todo-react/tree/996758561185fd9af689208a538bee43a93bb843 ➖ Tailwind CSS: https://tailwindcss.com/ ➖ Styled Components: https://www.styled-components.com/ 🧑💻 Основной телеграм-канал: https://t.me/AleksanderLamkov 💬 Коммьюнити-чат в телеграме (помощь новичкам): https://t.me/FriendlyFrontend 🗂️ Бесплатные курсы на канале: 🟠 HTML: https://youtube.com/playlist?list=PL0MUAHwery4ot0KmgGxlBSB7rXssLeA6h 🔵 CSS: https://youtube.com/playlist?list=PL0MUAHwery4o9I7QQVj_RP4ZVpmdx6evz 🟡 JS: https://www.youtube.com/playlist?list=PL0MUAHwery4qn4Y27iUxmzC-JiauX7vSL 🟢 A11y: https://youtube.com/playlist?list=PL0MUAHwery4r4gCA3AOtHgArM_UOb2QUV 🗺 Frontend Roadmap: https://youtu.be/1WRJKgwlX9w ⚪️ Мастер-класс по верстке для новичков: https://www.youtube.com/playlist?list=PL0MUAHwery4rqkzKF1mDBCIH_eZgjY6uN 🔘 Мастер-класс по верстке для продвинутых (БЭМ, SCSS): https://www.youtube.com/playlist?list=PL0MUAHwery4rdZt-8E9p9zty2ZUCH6Ai3 ⚫️ Мастер-класс по верстке с практикой по JavaScript: https://youtu.be/hkYzqTKnSIg 🔴 Мастер-класс по верстке на стеке 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/aleksandr-lamkov-1480 ➖ Stepik (платные курсы и мастер-классы): https://stepik.org/a/228315 #frontend #фронтенд #react #reactjs⚡ Получить весь курс (22 урока) сразу: https://boosty.to/friendly-frontend/posts/08f4cd01-a7ce-4e5b-8055-88aa401c7808 ✏️ Реализуем маршрутизацию в React без сторонних библиотек. Поговорим, зачем вообще нужна маршрутизация, и как работает роутинг в SPA. Создадим базовый компонент Router, который будет отслеживать URL-адрес и отображать соответствующую страницу. Разделим приложение на TasksPage (список задач) и TaskPage (отдельная задача), подключим их через Router, и научимся переходить между ними без перезагрузки. Сделаем компонент RouterLink, чтобы заменить обычные ссылки и перехватывать клики. Добавим поддержку динамических маршрутов с параметрами (/tasks/:id): сначала по-простому, потом покажу «взрослую» реализацию с шаблонами. Всё — на чистом React, без react-router. ❤️ Ранний доступ к видео и доступ к закрытому чату: https://boosty.to/friendly-frontend 🔴 Timeline: ▶ 00:00 | Введение ▶ 00:44 | Зачем нужна маршрутизация ▶ 01:50 | Создаём простую архитектуру роутинга ▶ 06:40 | Создаём страницы ▶ 08:50 | Добавляем роутинг в App.jsx ▶ 10:35 | Проверка работы базового роутинга ▶ 11:17 | Доработка TasksPage ▶ 12:12 | Доработка TaskPage ▶ 19:26 | Доработка TodoItem ▶ 22:12 | Компонент RouterLink ▶ 26:25 | Динамические маршруты ▶ 30:05 | Бонус: правильная реализация динамических маршрутов ▶ 36:28 | Заключение 📚 Ссылки из видео: ➖ Код на конец урока: https://github.com/aleksanderlamkov/todo-react/tree/53f25f86cd008bc8ad84edc1af5a7386b223188b 🧑💻 Основной телеграм-канал: https://t.me/AleksanderLamkov 💬 Коммьюнити-чат в телеграме (помощь новичкам): https://t.me/FriendlyFrontend 🗂️ Бесплатные курсы на канале: 🟠 HTML: https://youtube.com/playlist?list=PL0MUAHwery4ot0KmgGxlBSB7rXssLeA6h 🔵 CSS: https://youtube.com/playlist?list=PL0MUAHwery4o9I7QQVj_RP4ZVpmdx6evz 🟡 JS: https://www.youtube.com/playlist?list=PL0MUAHwery4qn4Y27iUxmzC-JiauX7vSL 🟢 A11y: https://youtube.com/playlist?list=PL0MUAHwery4r4gCA3AOtHgArM_UOb2QUV 🗺 Frontend Roadmap: https://youtu.be/1WRJKgwlX9w ⚪️ Мастер-класс по верстке для новичков: https://www.youtube.com/playlist?list=PL0MUAHwery4rqkzKF1mDBCIH_eZgjY6uN 🔘 Мастер-класс по верстке для продвинутых (БЭМ, SCSS): https://www.youtube.com/playlist?list=PL0MUAHwery4rdZt-8E9p9zty2ZUCH6Ai3 ⚫️ Мастер-класс по верстке с практикой по JavaScript: https://youtu.be/hkYzqTKnSIg 🔴 Мастер-класс по верстке на стеке 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/aleksandr-lamkov-1480 ➖ Stepik (платные курсы и мастер-классы): https://stepik.org/a/228315 #frontend #фронтенд #react #reactjs⚡ Получить весь курс (22 урока) сразу: https://boosty.to/friendly-frontend/posts/08f4cd01-a7ce-4e5b-8055-88aa401c7808 ✏️ Подключим To Do List к настоящему API. Развернём локальный сервер с помощью json-server, создадим файл db.json5 и настроим скрипт запуска. Научимся загружать задачи с сервера при первом рендере (GET), добавлять новые задачи (POST), удалять по одной (DELETE) и удалять все сразу через Promise.all. Обновим функцию toggleTaskComplete так, чтобы статус задачи сохранялся на сервере (PATCH). В финале вынесем все fetch-запросы в отдельный файл tasksAPI.js, создадим модуль с методами и подчистим код в useTasks. Всё заработает: и загрузка задач, и добавление, и удаление, и обновление — теперь всё идёт через API. ❤️ Ранний доступ к видео и доступ к закрытому чату: https://boosty.to/friendly-frontend 🔴 Timeline: ▶ 00:00 | Введение ▶ 00:42 | Что такое json-server ▶ 01:26 | Установка json-server и заполнение файла db.json5 начальными данными ▶ 03:11 | Скрипт для запуска сервера json-server ▶ 04:05 | Запуск json-server ▶ 05:02 | Получение данных (GET) ▶ 08:28 | Добавление задачи (POST) ▶ 11:23 | Удаление одной задачи (DELETE) ▶ 13:09 | Удаление всех задач ▶ 15:54 | Обновление задачи (PATCH) ▶ 17:48 | Рефакторинг: выносим работу с API в отдельный файл ▶ 24:54 | Заключение 📚 Ссылки из видео: ➖ Код на конец урока: https://github.com/aleksanderlamkov/todo-react/tree/fad6f8de21dd0336a3a008f42c264bb6016ad5c5 ➖ json-server документация: https://github.com/typicode/json-server/tree/v0 🧑💻 Основной телеграм-канал: https://t.me/AleksanderLamkov 💬 Коммьюнити-чат в телеграме (помощь новичкам): https://t.me/FriendlyFrontend 🗂️ Бесплатные курсы на канале: 🟠 HTML: https://youtube.com/playlist?list=PL0MUAHwery4ot0KmgGxlBSB7rXssLeA6h 🔵 CSS: https://youtube.com/playlist?list=PL0MUAHwery4o9I7QQVj_RP4ZVpmdx6evz 🟡 JS: https://www.youtube.com/playlist?list=PL0MUAHwery4qn4Y27iUxmzC-JiauX7vSL 🟢 A11y: https://youtube.com/playlist?list=PL0MUAHwery4r4gCA3AOtHgArM_UOb2QUV 🗺 Frontend Roadmap: https://youtu.be/1WRJKgwlX9w ⚪️ Мастер-класс по верстке для новичков: https://www.youtube.com/playlist?list=PL0MUAHwery4rqkzKF1mDBCIH_eZgjY6uN 🔘 Мастер-класс по верстке для продвинутых (БЭМ, SCSS): https://www.youtube.com/playlist?list=PL0MUAHwery4rdZt-8E9p9zty2ZUCH6Ai3 ⚫️ Мастер-класс по верстке с практикой по JavaScript: https://youtu.be/hkYzqTKnSIg 🔴 Мастер-класс по верстке на стеке 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/aleksandr-lamkov-1480 ➖ Stepik (платные курсы и мастер-классы): https://stepik.org/a/228315 #frontend #фронтенд #react #reactjs🤝 Поддержать проект Friendly Frontend: https://www.donationalerts.com/r/aleksanderlamkov Донаты помогают не терять ваши вопросы в потоке — их я вижу сразу и отвечаю в первую очередь. ✏️ Сегодня снова разбираю фронтенд-проекты подписчиков: верстку, скрипты, UI-логику и React-компоненты. Всё как обычно — честно, по делу и в порядке живой очереди. За стрим обычно успеваем посмотреть 4–8 работ. 🎯 Как попасть на разбор 📥 Заявки принимаются через форму: https://forms.gle/bxEdDtDzcFjMw6nD8 🔼 Если хочешь попасть без очереди: https://boosty.to/friendly-frontend/posts/9d562c7c-0c13-4502-be69-b4b8a6a5149f 🗂 Очередь проектов: https://docs.google.com/spreadsheets/d/e/2PACX-1vRZ76V7asPRpD3ln_pRladtD7It67s2xUSP8jXAZJ6hN177giHSaYt3CfL9s92_mdXowL0rayvOe6Hz/pubhtml 🧑💻 Основной телеграм-канал: https://t.me/AleksanderLamkov 💬 Коммьюнити-чат в телеграме (помощь новичкам): https://t.me/FriendlyFrontend 🗂️ Бесплатные курсы на канале: 🟠 HTML: https://youtube.com/playlist?list=PL0MUAHwery4ot0KmgGxlBSB7rXssLeA6h 🔵 CSS: https://youtube.com/playlist?list=PL0MUAHwery4o9I7QQVj_RP4ZVpmdx6evz 🟡 JS: https://www.youtube.com/playlist?list=PL0MUAHwery4qn4Y27iUxmzC-JiauX7vSL 🟢 A11y: https://youtube.com/playlist?list=PL0MUAHwery4r4gCA3AOtHgArM_UOb2QUV 🗺 Frontend Roadmap: https://youtu.be/1WRJKgwlX9w ⚪️ Мастер-класс по верстке для новичков: https://www.youtube.com/playlist?list=PL0MUAHwery4rqkzKF1mDBCIH_eZgjY6uN 🔘 Мастер-класс по верстке для продвинутых (БЭМ, SCSS): https://www.youtube.com/playlist?list=PL0MUAHwery4rdZt-8E9p9zty2ZUCH6Ai3 ⚫️ Мастер-класс по верстке с практикой по JavaScript: https://youtu.be/hkYzqTKnSIg 🔴 Мастер-класс по верстке на стеке 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/aleksandr-lamkov-1480 ➖ Stepik (платные курсы и мастер-классы): https://stepik.org/a/228315 #frontend #фронтенд #react #js #javascript⚡ Получить весь курс (22 урока) сразу: https://boosty.to/friendly-frontend/posts/08f4cd01-a7ce-4e5b-8055-88aa401c7808 ✏️ Добавим простую валидацию в форму добавления задач. Заблокируем кнопку Add, если поле пустое или содержит только пробелы. Научимся выводить ошибку под полем ввода и подсвечивать его красной рамкой. Улучшим UX: дадим пользователю понятную обратную связь и не позволим добавить пустую задачу. Покажу, как не нужно делать валидацию через useEffect — и как сделать её правильно через onInput. Расширим стили компонентов Button и Field для новых состояний. Сделаем поведение формы предсказуемым и удобным — без единой сторонней библиотеки. ❤️ Ранний доступ к видео и доступ к закрытому чату: https://boosty.to/friendly-frontend 🔴 Timeline: ▶ 00:00 | Введение ▶ 00:31 | Блокировка кнопки Add при пустом значении ▶ 06:10 | Валидация значения поля New task в форме AddTaskForm ▶ 11:29 | Стилизация error-состояния компонента Field ▶ 13:44 | Заключение 📚 Ссылки из видео: ➖ Код на конец урока: https://github.com/aleksanderlamkov/todo-react/tree/2557f47923d6c46ee0c8393dc967cabd66b2248c 🧑💻 Основной телеграм-канал: https://t.me/AleksanderLamkov 💬 Коммьюнити-чат в телеграме (помощь новичкам): https://t.me/FriendlyFrontend 🗂️ Бесплатные курсы на канале: 🟠 HTML: https://youtube.com/playlist?list=PL0MUAHwery4ot0KmgGxlBSB7rXssLeA6h 🔵 CSS: https://youtube.com/playlist?list=PL0MUAHwery4o9I7QQVj_RP4ZVpmdx6evz 🟡 JS: https://www.youtube.com/playlist?list=PL0MUAHwery4qn4Y27iUxmzC-JiauX7vSL 🟢 A11y: https://youtube.com/playlist?list=PL0MUAHwery4r4gCA3AOtHgArM_UOb2QUV 🗺 Frontend Roadmap: https://youtu.be/1WRJKgwlX9w ⚪️ Мастер-класс по верстке для новичков: https://www.youtube.com/playlist?list=PL0MUAHwery4rqkzKF1mDBCIH_eZgjY6uN 🔘 Мастер-класс по верстке для продвинутых (БЭМ, SCSS): https://www.youtube.com/playlist?list=PL0MUAHwery4rdZt-8E9p9zty2ZUCH6Ai3 ⚫️ Мастер-класс по верстке с практикой по JavaScript: https://youtu.be/hkYzqTKnSIg 🔴 Мастер-класс по верстке на стеке 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/aleksandr-lamkov-1480 ➖ Stepik (платные курсы и мастер-классы): https://stepik.org/a/228315 #frontend #фронтенд #react #reactjs✏️ Отвечаю на вопросы подписчиков про фронтенд, обучение и карьеру. Час пятьдесят плотного опыта. 🔴 Timeline: ▶ 00:00 | Введение ▶ 00:19 | Почему не стрим ▶ 00:40 | Как перейти от теории к мини-проектам ▶ 01:22 | Как я учил JS и что советую ▶ 02:33 | Что учить, когда идти в React ▶ 03:09 | Алгоритмы: нужны ли фронтендеру ▶ 04:34 | Нужно ли высшее образование ▶ 06:47 | Выгорание и мотивация ▶ 08:00 | Безопасность на фронтенде ▶ 09:03 | Как получить японскую визу ▶ 09:35 | С каким уровнем идти на первую работу ▶ 10:55 | Как тестировать вёрстку ▶ 11:43 | Логика и решение сложных задач ▶ 14:36 | Проблемы со здоровьем у разработчиков ▶ 16:54 | Зачем я запустил ютуб ▶ 18:46 | Стоит ли работать бесплатно ▶ 20:26 | Как работает команда в реальности ▶ 21:49 | Самый сложный период в разработке ▶ 22:00 | Что сложнее: учёба, собесы или работа ▶ 22:58 | Как я проверяю качество кода и тесты ▶ 25:23 | Какой фреймворк перспективнее ▶ 26:27 | Куда идти после React ▶ 26:56 | Английский: какой уровень нужен ▶ 27:34 | Книги по IT ▶ 28:19 | Красные флаги на собеседованиях ▶ 29:50 | Как развиваться при легаси-проекте ▶ 31:48 | Учёба, если после работы только усталость ▶ 34:07 | Когда менять работу ▶ 35:36 | Практика после JavaScript ▶ 36:44 | Как не забывать темы и учиться решать задачи ▶ 38:20 | Что учить после HTML/CSS/JS/React ▶ 39:00 | Будут ли вакансии «специалист по ИИ» ▶ 39:59 | React/Angular для устройства на работу ▶ 42:09 | Как я отдыхаю как фронтендер, траты ▶ 43:39 | Машина мечты ▶ 43:55 | Что приносит больше — ютуб или работа ▶ 44:14 | Потолок зарплат фронтендеров ▶ 44:25 | Мой путь от джуна до мидла ▶ 45:11 | Почему не живу в тропиках ▶ 46:01 | Чем занимаюсь после работы ▶ 46:16 | Коллабы с блогерами ▶ 46:39 | Как бы я искал работу сегодня ▶ 47:26 | Трудно ли войти во фронтенд ▶ 49:00 | Идеи для видео от подписчиков ▶ 50:17 | Как бы я учил фронтенд заново ▶ 50:47 | Как вырасти до мидла ▶ 51:29 | Нужно ли учить то, что не используют на работе ▶ 52:29 | Что делать, если нет идей для проектов ▶ 52:41 | Как сочетать теорию и практику ▶ 53:23 | Как найти первую работу новичку ▶ 56:30 | Как начать без опыта ▶ 57:25 | Как выбираю темы ▶ 58:25 | Какие видео не вышли ▶ 59:31 | Темы для коллабов ▶ 01:00:05 | Почему не рекламируюсь ▶ 01:00:34 | Где беру макеты ▶ 01:01:08 | Что есть фреймворк ▶ 01:02:32 | Вакансии в канале ▶ 01:02:59 | Устраивались ли люди благодаря мне ▶ 01:04:13 | Мой сайт ▶ 01:05:08 | Предлагают ли мне другие вакансии ▶ 01:06:06 | Будут ли игровые лайвы ▶ 01:06:27 | Фан-встречи ▶ 01:07:25 | Про open-source ▶ 01:08:09 | Видео про UI-компоненты ▶ 01:09:01 | Внедрение ИИ на сайт ▶ 01:10:03 | Как тестирую a11y ▶ 01:11:09 | Сложная архитектура в маленьких проектах ▶ 01:12:20 | 20% технологий, дающих 80% результата ▶ 01:14:06 | Что изменилось в моём подходе к обучению ▶ 01:15:57 | Как понять, что думаешь как разработчик ▶ 01:16:36 | Как решаю, что тема закрыта ▶ 01:18:11 | Ошибки джунов на первом месте ▶ 01:18:55 | Что бы я изменил в IT-образовании ▶ 01:19:54 | Какие вопросы были сгенерированы ИИ ▶ 01:21:12 | Как бороться с прокрастинацией ▶ 01:22:58 | Какие задачи решают джуны и мидлы ▶ 01:24:43 | Синдромом самозванца ▶ 01:25:58 | Заменит ли ИИ джунов ▶ 01:27:07 | Как перейти к написанию своего кода ▶ 01:28:37 | Что нужно для первой работы ▶ 01:30:26 | Этапы трудоустройства ▶ 01:32:08 | Переполнен ли рынок и как выделиться ▶ 01:34:03 | Нужно ли знать бэкенд ▶ 01:36:14 | Как справляться с забыванием тем ▶ 01:40:24 | Берут ли стажёров сейчас ▶ 01:41:51 | Алгоритмы после базы ▶ 01:43:15 | Поиск работы из другой страны ▶ 01:44:57 | Мой путь в начале ▶ 01:47:21 | ИИ: угроза или инструмент ▶ 01:50:08 | Стоит ли совмещать дизайн + фронтенд ▶ 01:52:10 | Нормально ли писать код не с нуля ▶ 01:53:25 | Как совмещать вуз, язык и программирование ❤️ Ранний доступ к видео и доступ к закрытому чату: https://boosty.to/friendly-frontend 🧑💻 Основной телеграм-канал: https://t.me/AleksanderLamkov 💬 Коммьюнити-чат в телеграме (помощь новичкам): https://t.me/FriendlyFrontend 🗂️ Бесплатные курсы на канале: 🟠 HTML: https://youtube.com/playlist?list=PL0MUAHwery4ot0KmgGxlBSB7rXssLeA6h 🔵 CSS: https://youtube.com/playlist?list=PL0MUAHwery4o9I7QQVj_RP4ZVpmdx6evz 🟡 JS: https://www.youtube.com/playlist?list=PL0MUAHwery4qn4Y27iUxmzC-JiauX7vSL 🗺 Frontend Roadmap: https://youtu.be/1WRJKgwlX9w ⚪️ Вёрстка для новичков: https://www.youtube.com/playlist?list=PL0MUAHwery4rqkzKF1mDBCIH_eZgjY6uN 🔘 Вёрстка для продвинутых (БЭМ, SCSS): https://www.youtube.com/playlist?list=PL0MUAHwery4rdZt-8E9p9zty2ZUCH6Ai3 ⚫️ Вёрстка с JavaScript: https://youtu.be/hkYzqTKnSIg 🔴 Вёрстка с 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/aleksandr-lamkov-1480 ➖ Stepik: https://stepik.org/a/228315 #frontend #фронтенд⚡ Получить весь курс (22 урока) сразу: https://boosty.to/friendly-frontend/posts/08f4cd01-a7ce-4e5b-8055-88aa401c7808 ✏️ Продолжаем улучшать архитектуру нашего To Do List. Покажу, как вынести бизнес-логику работы с задачами из контекста в отдельный кастомный хук useTasks. Создадим хук с нуля, перенесём в него стейт, обработчики и фильтрацию, подключим в контекст. Затем декомпозируем код дальше: создадим отдельный хук useIncompleteTaskScroll для прокрутки к первой невыполненной задаче и useTasksLocalStorage для работы с LocalStorage. Разберём, зачем дробить логику на хуки и как это помогает масштабировать проект. Закрепим всё на практике и сравним, насколько чище стал код после рефакторинга. ❤️ Ранний доступ к видео и доступ к закрытому чату: https://boosty.to/friendly-frontend 🔴 Timeline: ▶ 00:00 | Введение ▶ 00:39 | Что такое кастомный хук ▶ 02:26 | Анализ текущего кода и создание кастомного хука useTasks ▶ 04:47 | Создание дополнительного хука useIncompleteTaskScroll ▶ 07:33 | Создание дополнительного хука useTasksLocalStorage ▶ 12:20 | Архитектура и масштабирование хуков ▶ 14:02 | Заключение 📚 Ссылки из видео: ➖ Код на конец урока: https://github.com/aleksanderlamkov/todo-react/tree/59edb5ac16def54412552999e7f701af890bc4ee 🧑💻 Основной телеграм-канал: https://t.me/AleksanderLamkov 💬 Коммьюнити-чат в телеграме (помощь новичкам): https://t.me/FriendlyFrontend 🗂️ Бесплатные курсы на канале: 🟠 HTML: https://youtube.com/playlist?list=PL0MUAHwery4ot0KmgGxlBSB7rXssLeA6h 🔵 CSS: https://youtube.com/playlist?list=PL0MUAHwery4o9I7QQVj_RP4ZVpmdx6evz 🟡 JS: https://www.youtube.com/playlist?list=PL0MUAHwery4qn4Y27iUxmzC-JiauX7vSL 🟢 A11y: https://youtube.com/playlist?list=PL0MUAHwery4r4gCA3AOtHgArM_UOb2QUV 🗺 Frontend Roadmap: https://youtu.be/1WRJKgwlX9w ⚪️ Мастер-класс по верстке для новичков: https://www.youtube.com/playlist?list=PL0MUAHwery4rqkzKF1mDBCIH_eZgjY6uN 🔘 Мастер-класс по верстке для продвинутых (БЭМ, SCSS): https://www.youtube.com/playlist?list=PL0MUAHwery4rdZt-8E9p9zty2ZUCH6Ai3 ⚫️ Мастер-класс по верстке с практикой по JavaScript: https://youtu.be/hkYzqTKnSIg 🔴 Мастер-класс по верстке на стеке 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/aleksandr-lamkov-1480 ➖ Stepik (платные курсы и мастер-классы): https://stepik.org/a/228315 #frontend #фронтенд #react #reactjs🤝 Поддержать проект Friendly Frontend: https://www.donationalerts.com/r/aleksanderlamkov Чат я читаю и так, но донаты помогают не потерять важные сообщения в потоке — их я замечаю сразу и отвечаю на них в первую очередь. ✏️ На этом стриме продолжаем вёрстку макета Foodieland на моём стартовом шаблоне: JSX + Minista + Vite. За прошлые эфиры мы уже почти доверстали главную страницу, остановились на InstagramView. В этот раз продолжим с того же места и двигаемся дальше по макету. Всё — вживую, пошагово и без монтажа. 💬 Параллельно отвечаю на ваши вопросы по фронтенду: обсудим подходы к вёрстке, структуру проекта, мелкие «грабли» и решения прямо по ходу разработки. Макет: https://www.figma.com/design/2z1GS5I1vYSuL2RiOnJK49 Мой стартовый шаблон: ➖ Видеогайд: https://youtu.be/0nqwWprv5Qs ➖ NPM-пакет: https://www.npmjs.com/package/create-friendly-frontend Репозиторий с кодом проекта: https://github.com/aleksanderlamkov/foodieland (1 стрим = 1 коммит в истории) 🧑💻 Основной телеграм-канал: https://t.me/AleksanderLamkov 💬 Коммьюнити-чат в телеграме (помощь новичкам): https://t.me/FriendlyFrontend 🗂️ Бесплатные курсы на канале: 🟠 HTML: https://youtube.com/playlist?list=PL0MUAHwery4ot0KmgGxlBSB7rXssLeA6h 🔵 CSS: https://youtube.com/playlist?list=PL0MUAHwery4o9I7QQVj_RP4ZVpmdx6evz 🟡 JS: https://www.youtube.com/playlist?list=PL0MUAHwery4qn4Y27iUxmzC-JiauX7vSL 🟢 A11y: https://youtube.com/playlist?list=PL0MUAHwery4r4gCA3AOtHgArM_UOb2QUV 🗺 Frontend Roadmap: https://youtu.be/1WRJKgwlX9w ⚪️ Мастер-класс по верстке для новичков: https://www.youtube.com/playlist?list=PL0MUAHwery4rqkzKF1mDBCIH_eZgjY6uN 🔘 Мастер-класс по верстке для продвинутых (БЭМ, SCSS): https://www.youtube.com/playlist?list=PL0MUAHwery4rdZt-8E9p9zty2ZUCH6Ai3 ⚫️ Мастер-класс по верстке с практикой по JavaScript: https://youtu.be/hkYzqTKnSIg 🔴 Мастер-класс по верстке на стеке 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/aleksandr-lamkov-1480 ➖ Stepik (платные курсы и мастер-классы): https://stepik.org/a/228315 #frontend #фронтенд #вёрстка⚡ Получить весь курс (22 урока) сразу: https://boosty.to/friendly-frontend/posts/08f4cd01-a7ce-4e5b-8055-88aa401c7808 ✏️ Избавимся от prop drilling и сделаем код To Do List проще и чище. Разберёмся, что такое контекст в React и зачем он нужен. Подключим хук useContext и начнём передавать задачи и обработчики напрямую, без цепочки пропсов. Объясню, как создавать провайдер, что передавать в value и как использовать контекст внутри вложенных компонентов. Аккуратно перенесём весь state и логику в обёртку TasksProvider, а App.jsx оставим максимально лаконичным. Также вынесем TasksContext в отдельный файл, чтобы структура проекта стала ближе к настоящим продакшн-проектам. ❤️ Ранний доступ к видео и доступ к закрытому чату: https://boosty.to/friendly-frontend 🔴 Timeline: ▶ 00:00 | Введение ▶ 00:41 | Что такое prop drilling ▶ 02:20 | Context API и хук useContext ▶ 12:32 | Выносим логику из Todo.jsx в компонент TasksContext ▶ 18:40 | Плюсы и минусы подхода ▶ 20:12 | Заключение 📚 Ссылки из видео: ➖ Код на конец урока: https://github.com/aleksanderlamkov/todo-react/tree/469c2eab41eb6f95f4b9a3750eb78a514ed3a35c 🧑💻 Основной телеграм-канал: https://t.me/AleksanderLamkov 💬 Коммьюнити-чат в телеграме (помощь новичкам): https://t.me/FriendlyFrontend 🗂️ Бесплатные курсы на канале: 🟠 HTML: https://youtube.com/playlist?list=PL0MUAHwery4ot0KmgGxlBSB7rXssLeA6h 🔵 CSS: https://youtube.com/playlist?list=PL0MUAHwery4o9I7QQVj_RP4ZVpmdx6evz 🟡 JS: https://www.youtube.com/playlist?list=PL0MUAHwery4qn4Y27iUxmzC-JiauX7vSL 🟢 A11y: https://youtube.com/playlist?list=PL0MUAHwery4r4gCA3AOtHgArM_UOb2QUV 🗺 Frontend Roadmap: https://youtu.be/1WRJKgwlX9w ⚪️ Мастер-класс по верстке для новичков: https://www.youtube.com/playlist?list=PL0MUAHwery4rqkzKF1mDBCIH_eZgjY6uN 🔘 Мастер-класс по верстке для продвинутых (БЭМ, SCSS): https://www.youtube.com/playlist?list=PL0MUAHwery4rdZt-8E9p9zty2ZUCH6Ai3 ⚫️ Мастер-класс по верстке с практикой по JavaScript: https://youtu.be/hkYzqTKnSIg 🔴 Мастер-класс по верстке на стеке 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/aleksandr-lamkov-1480 ➖ Stepik (платные курсы и мастер-классы): https://stepik.org/a/228315 #frontend #фронтенд #react #reactjs⚡ Получить весь курс (22 урока) сразу: https://boosty.to/friendly-frontend/posts/08f4cd01-a7ce-4e5b-8055-88aa401c7808 ✏️ Оптимизируем производительность To Do List. Разберём, какие компоненты стоит оборачивать в React.memo, а какие — нет. Покажу, как стабилизировать функции onDeleteAllButtonClick, deleteTask, toggleTaskComplete и addTask с помощью useCallback, чтобы избежать лишних перерендеров. Объясню, когда в массиве зависимостей useCallback действительно нужен tasks, а когда можно обойтись prevState. Мемоизируем отфильтрованный список задач и количество выполненных с помощью useMemo. Разберёмся, как работает мемоизация на практике и почему в простых компонентах вроде NewTaskForm и SearchTaskForm React.memo не обязателен. ❤️ Ранний доступ к видео и доступ к закрытому чату: https://boosty.to/friendly-frontend 🔴 Timeline: ▶ 00:00 | Введение ▶ 00:28 | Что такое ререндер в React ▶ 01:30 | Проблема перерисовок ▶ 04:36 | React.memo ▶ 06:16 | useCallback ▶ 09:26 | useMemo ▶ 14:05 | Оптимизация оставшихся частей приложения ▶ 18:07 | Заключение 📚 Ссылки из видео: ➖ Код на конец урока: https://github.com/aleksanderlamkov/todo-react/tree/5bee3cefaff15409f62383c9b0a8fcaf634c8862 🧑💻 Основной телеграм-канал: https://t.me/AleksanderLamkov 💬 Коммьюнити-чат в телеграме (помощь новичкам): https://t.me/FriendlyFrontend 🗂️ Бесплатные курсы на канале: 🟠 HTML: https://youtube.com/playlist?list=PL0MUAHwery4ot0KmgGxlBSB7rXssLeA6h 🔵 CSS: https://youtube.com/playlist?list=PL0MUAHwery4o9I7QQVj_RP4ZVpmdx6evz 🟡 JS: https://www.youtube.com/playlist?list=PL0MUAHwery4qn4Y27iUxmzC-JiauX7vSL 🟢 A11y: https://youtube.com/playlist?list=PL0MUAHwery4r4gCA3AOtHgArM_UOb2QUV 🗺 Frontend Roadmap: https://youtu.be/1WRJKgwlX9w ⚪️ Мастер-класс по верстке для новичков: https://www.youtube.com/playlist?list=PL0MUAHwery4rqkzKF1mDBCIH_eZgjY6uN 🔘 Мастер-класс по верстке для продвинутых (БЭМ, SCSS): https://www.youtube.com/playlist?list=PL0MUAHwery4rdZt-8E9p9zty2ZUCH6Ai3 ⚫️ Мастер-класс по верстке с практикой по JavaScript: https://youtu.be/hkYzqTKnSIg 🔴 Мастер-класс по верстке на стеке 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/aleksandr-lamkov-1480 ➖ Stepik (платные курсы и мастер-классы): https://stepik.org/a/228315 #frontend #фронтенд #react #reactjs🤝 Поддержать проект Friendly Frontend: https://www.donationalerts.com/r/aleksanderlamkov Чат я читаю и так, но донаты помогают не потерять важные сообщения в потоке — их я замечаю сразу и отвечаю на них в первую очередь. ✏️ Разбираю фронтенд-проекты, компоненты и страницы, которые прислали зрители. По классике: HTML, CSS, JS/TS, React. Идём по очереди — от самых старых заявок к новым. За один стрим обычно успеваем 4–8 работ (как пойдёт по времени). 🎯 Как попасть на разбор 📥 Заявки принимаются через форму: https://forms.gle/bxEdDtDzcFjMw6nD8 🔼 Если хочешь попасть без очереди: https://boosty.to/friendly-frontend/posts/9d562c7c-0c13-4502-be69-b4b8a6a5149f 🗂 Очередь проектов: https://docs.google.com/spreadsheets/d/e/2PACX-1vRZ76V7asPRpD3ln_pRladtD7It67s2xUSP8jXAZJ6hN177giHSaYt3CfL9s92_mdXowL0rayvOe6Hz/pubhtml 🧑💻 Основной телеграм-канал: https://t.me/AleksanderLamkov 💬 Коммьюнити-чат в телеграме (помощь новичкам): https://t.me/FriendlyFrontend 🗂️ Бесплатные курсы на канале: 🟠 HTML: https://youtube.com/playlist?list=PL0MUAHwery4ot0KmgGxlBSB7rXssLeA6h 🔵 CSS: https://youtube.com/playlist?list=PL0MUAHwery4o9I7QQVj_RP4ZVpmdx6evz 🟡 JS: https://www.youtube.com/playlist?list=PL0MUAHwery4qn4Y27iUxmzC-JiauX7vSL 🟢 A11y: https://youtube.com/playlist?list=PL0MUAHwery4r4gCA3AOtHgArM_UOb2QUV 🗺 Frontend Roadmap: https://youtu.be/1WRJKgwlX9w ⚪️ Мастер-класс по верстке для новичков: https://www.youtube.com/playlist?list=PL0MUAHwery4rqkzKF1mDBCIH_eZgjY6uN 🔘 Мастер-класс по верстке для продвинутых (БЭМ, SCSS): https://www.youtube.com/playlist?list=PL0MUAHwery4rdZt-8E9p9zty2ZUCH6Ai3 ⚫️ Мастер-класс по верстке с практикой по JavaScript: https://youtu.be/hkYzqTKnSIg 🔴 Мастер-класс по верстке на стеке 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/aleksandr-lamkov-1480 ➖ Stepik (платные курсы и мастер-классы): https://stepik.org/a/228315 #frontend #фронтенд #react #js #javascript