Код-ревью: 8 ошибок в 1 кнопке! Переписываем реальный проект на React.

На практических проектах со студентами каждый день ревьюим код по совершенно разным направлениям. Накопилось уже много подробных PR и мы подумали, что этот материал может оказаться полезным не только практикующимся студентам, но и в целом тем, кто стремится к апгрейду своих проектов. Будем говорить как об ошибках, так и о фишках, которые всего за пару строк сильно повышают общее качество кода.

В этом видео разберем кнопку в проекте на React. Основные моменты, которые затронем: conditional styles, разделение ответственности, наследование, замешивание логики, Props, работа с Shared UI, наличие Ref / forwardRef, использование className, грамотное наименование цветов. Все перепишем и проверим на практике.

Если формат понравится — пишите в комментариях, что хотели бы разобрать в следующих выпусках. По комментариям будем подбирать кейсы для следующих видео.

Полезные видео:
🍿 Вышел React 19 —    • Новый React 19: 7 изменений. Что внедрять?...  
🍿 Последний выпуск новостей веб-разработки —    • Новости веб-разработки: Vite 6, Angular 19...  

Телеграм-канал с советами по разработке:
https://t.me/purple_code_channel

Бесплатные бонусы:
➔ Бесплатная карта развития в разработке под вашу ситуацию — https://purpleschool.ru/skills/?utm_s...
➔ Бесплатный курс «Основы разработки» — https://purpleschool.ru/course/code-b...
➔ Бесплатный курс «CSS Flexbox» — https://purpleschool.ru/course/flexbo...

Полное обучение:
➔ Доступный практический курс по React. Вместе напишем 4 комплексных проекта и освоим ключевые навыки работы с Hooks, Redux Toolkit, React Router с поддержкой наставника — https://purpleschool.ru/course/react-...

Навигация:
0:00 — Интро
1:04 — 1: Лишние Conditional styles
2:07 — 2: Разделение ответственности в рамках компонента
3:40 — 3: Отсутствие наследования
5:23 — 4: Замешивание логики
8:42 — 5: Важные моменты в Props
10:48 — 6: Наличие Ref / forwardRef
12:31 — 7: Использование className
12:57 — 8: Наименование цветов
13:56 — Аутро