На практических проектах со студентами каждый день ревьюим код по совершенно разным направлениям. Накопилось уже много подробных PR и мы подумали, что этот материал может оказаться полезным не только практикующимся студентам, но и в целом тем, кто стремится к апгрейду своих проектов. Будем говорить как об ошибках, так и о фишках, которые всего за пару строк сильно повышают общее качество кода.
В этом видео разберем кнопку в проекте на React. Основные моменты, которые затронем: conditional styles, разделение ответственности, наследование, замешивание логики, Props, работа с Shared UI, наличие Ref / forwardRef, использование className, грамотное наименование цветов. Все перепишем и проверим на практике.
Если формат понравится — пишите в комментариях, что хотели бы разобрать в следующих выпусках. По комментариям будем подбирать кейсы для следующих видео.
Полезные видео:
🍿 Вышел React 19 — https://www.youtube.com/watch?v=YvxzfZGxQQ4
🍿 Последний выпуск новостей веб-разработки — https://www.youtube.com/watch?v=iMFyqpiWX_Y
Телеграм-канал с советами по разработке:
https://t.me/purple_code_channel
Бесплатные бонусы:
➔ Бесплатная карта развития в разработке под вашу ситуацию — https://purpleschool.ru/skills/?utm_source=youtube&utm_medium=link&utm_campaign=%D0%BA%D0%BE%D0%B4-%D1%80%D0%B5%D0%B2%D1%8C%D1%8E%3A+8+%D0%BE%D1%88%D0%B8%D0%B1%D0%BE%D0%BA+%D0%B2+1+%D0%BA%D0%BD%D0%BE%D0%BF%D0%BA%D0%B5!+%D0%BF%D0%B5%D1%80%D0%B5%D0%BF%D0%B8%D1%81%D1%8B%D0%B2%D0%B0%D0%B5%D0%BC+%D1%80%D0%B5%D0%B0%D0%BB%D1%8C%D0%BD%D1%8B%D0%B9+%D0%BF%D1%80%D0%BE%D0%B5%D0%BA%D1%82+%D0%BD%D0%B0+react.
➔ Бесплатный курс «Основы разработки» — https://purpleschool.ru/course/code-basics/?utm_source=youtube&utm_medium=link&utm_campaign=%D0%BA%D0%BE%D0%B4-%D1%80%D0%B5%D0%B2%D1%8C%D1%8E%3A+8+%D0%BE%D1%88%D0%B8%D0%B1%D0%BE%D0%BA+%D0%B2+1+%D0%BA%D0%BD%D0%BE%D0%BF%D0%BA%D0%B5!+%D0%BF%D0%B5%D1%80%D0%B5%D0%BF%D0%B8%D1%81%D1%8B%D0%B2%D0%B0%D0%B5%D0%BC+%D1%80%D0%B5%D0%B0%D0%BB%D1%8C%D0%BD%D1%8B%D0%B9+%D0%BF%D1%80%D0%BE%D0%B5%D0%BA%D1%82+%D0%BD%D0%B0+react.
➔ Бесплатный курс «CSS Flexbox» — https://purpleschool.ru/course/flexbox/?utm_source=youtube&utm_medium=link&utm_campaign=%D0%BA%D0%BE%D0%B4-%D1%80%D0%B5%D0%B2%D1%8C%D1%8E%3A+8+%D0%BE%D1%88%D0%B8%D0%B1%D0%BE%D0%BA+%D0%B2+1+%D0%BA%D0%BD%D0%BE%D0%BF%D0%BA%D0%B5!+%D0%BF%D0%B5%D1%80%D0%B5%D0%BF%D0%B8%D1%81%D1%8B%D0%B2%D0%B0%D0%B5%D0%BC+%D1%80%D0%B5%D0%B0%D0%BB%D1%8C%D0%BD%D1%8B%D0%B9+%D0%BF%D1%80%D0%BE%D0%B5%D0%BA%D1%82+%D0%BD%D0%B0+react.
Полное обучение:
➔ Доступный практический курс по React. Вместе напишем 4 комплексных проекта и освоим ключевые навыки работы с Hooks, Redux Toolkit, React Router с поддержкой наставника — https://purpleschool.ru/course/react-redux/?utm_source=youtube&utm_medium=link&utm_campaign=%D0%BA%D0%BE%D0%B4-%D1%80%D0%B5%D0%B2%D1%8C%D1%8E%3A+8+%D0%BE%D1%88%D0%B8%D0%B1%D0%BE%D0%BA+%D0%B2+1+%D0%BA%D0%BD%D0%BE%D0%BF%D0%BA%D0%B5!+%D0%BF%D0%B5%D1%80%D0%B5%D0%BF%D0%B8%D1%81%D1%8B%D0%B2%D0%B0%D0%B5%D0%BC+%D1%80%D0%B5%D0%B0%D0%BB%D1%8C%D0%BD%D1%8B%D0%B9+%D0%BF%D1%80%D0%BE%D0%B5%D0%BA%D1%82+%D0%BD%D0%B0+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 — Аутро