Storybook - Быстрый курс по работе и тестированию с React

Как вы и просили в предыдущем видео, я сделал для вас mini курс по Storybook 8 и тому как добавлять и тестировать компоненты. Будем смотреть на примере реального приложения системы обучения PurpleSchool на React.
🔗 Ссылки:
🎓 Курс базовый React и Redux: purpleschool.ru/course/react-...
🎓 Все курсы по разработке: purpleschool.ru
Видео про NvChad: • NvChad - идеальная IDE...
Видео про Tmux: • Настройка Tmux - испол...
💬 Telegram канал с полезными советами:
t.me/purple_code_channel
Разделы видео:
0:00 - Введение
0:27 - О Storybook
2:09 - Добавление Storybook
4:48 - Обзор UI
7:01 - Изменения в проекте
9:34 - Первый Story
13:50 - Глобальные стили
16:57 - Несколько Story
18:43 - Ручная документация
20:01 - Визуальное тестирование
26:09 - Интерактивные тесты
34:35 - Actions
36:00 - Тестирование доступности
37:39 - Заключение

[@PurpleSchool]

🔗 Ссылки: 🎓 Курс базовый React и Redux: purpleschool.ru/course/react-redux 🎓 Все курсы по разработке: purpleschool.ru Видео про NvChad: kzbin.info/www/bejne/h2LKepWGeringpI Видео про Tmux: kzbin.info/www/bejne/iV6UipaMh61-o5Y 💬 Telegram канал с полезными советами: t.me/purple_code_channel

[@ruslanryapov6221]

Все четко, доступно и понятно! Антон, продолжай в том же духе Твой контент всегда образовательно содержателен и приятен душе)

[@PurpleSchool]

Спасибо!

[@axel-sheen]

Как я раньше жил вообще без этого (старший разработчик). С этого надо начинать обучение всех фронтенд программистов! Теперь это будет мой любимый инструмент! Огромнейшее спасибо автору!!!!

[@PurpleSchool]

Рад, что помог)

[@user-gc6vl5xf4x]

Спасибо. Классный ролик. Попробую добавить на свой проект

[@PurpleSchool]

Пожалуйста

[@_soryegeton]

Очень полезно, спасибо большое за видео ; )

[@PurpleSchool]

Пожалуйста

[@tolyachernov7849]

Спасибо! Классный ролик!)

[@PurpleSchool]

Спасибо!

[@elslavak]

Читал я в книге рецептов по React про Storybook, очень полезная и гибкая штука! Спасибо огромное за обучающий контент!

[@PurpleSchool]

Пожалуйста

[@user-ik7rp8qz5g]

Перед сном попросил курс, а утром курс уже готов. Магия! 😀

[@PurpleSchool]

Всегда пожалуйста)

[@tackesi]

Спасибо, это было действительно полезно. В ближайших проектах я вряд ли буду использовать, но знать о таком инструменте и не пользоваться лучше, чем иметь потребность и не знать. Спасибо за расширение кругозора

[@PurpleSchool]

Пожалуйста!

[@golden_smiles]

Лучший канал для фронтедера на русском здесь, точка )) Спасибо за экспресс курс!

[@PurpleSchool]

Спасибо!

[@user-cv9xy4uu2f]

Спасибо большое

[@PurpleSchool]

Пожалуйста! Я всегда прислушивалась к пожеланиям аудитории)

[@user-xw8ur4sc6t]

за сторибук лукаса, не глядя, вообще

[@PurpleSchool]

👍

[@viooi2582]

Сделай видео про слоты в реакт, про композиционные компоненты, рендер пропсы и другие способы как реализовать слоты в реакте, вариантов очень много. Есть как достаточно интересные, так и безумные. Библиотеки так же есть и даже ишьюс в реакт для их реализации. Как по мне полезный и интересный урок будет

[@PurpleSchool]

👍

[@i_help_you]

Вопрос : Если есть сторибук + снепшоты + тесты jest + cyress (зачем QA ?)

[@yourpc]

как на счет реквестов в компоненте или редакса? или это не правильное использование сторибука в таком случае будет, только пропсы и все?

[@PurpleSchool]

Можно использовать loader для загрузки мок данных

[@yeager6646]

А какой шрифт используете для консоли?

[@PurpleSchool]

JetBrains Mono

[@user-pc6bg2mr6g]

это типа замена rtl и jest, но с допами ? зачем тогда тестировщиков столько на рынке. Не шарю в тестах, в чем отличие их между собой ?

[@tackesi]

Я так понимаю, во vue не нужно импортировать стили, если они уже в компоненте ?

[@PurpleSchool]

Да, тут они тоже в комплекте, но custom property отдельно

[@zerocool14pvo]

Лет 7 использую storybook

[@PurpleSchool]

Супер)

[@HEX_CAT]

❤❤❤🎉🎉🎉

[@PurpleSchool]

👍

[@UserSo4reUsu75ry]

Можно глупый вопрос, а когда разработчик создает компонент, он разве не тестирует его работу и отображение во время разработки ? Зачем нужна еще какая-то лишняя прослойка ?

[@olegvolodin9409]

Если вопрос о том зачем визуальное тестирование: разработчик - существо ленивое и проверяет обычно только то, что он собирался изменить и далеко не всегда проверяет то, что он менять не собирался.

[@kowkavn2356]

У кого нибудь есть готовые репозитории (или хотябы рабочие), с реализацией на next или spa-react. Так чтобы проект был написан но продакшн стеке реакта, со всеми нужными библиотеками. Мне просто хочется посмотреть приближенный к прокшену код. Со всякими сторибуками, тестами типизацией и тд Периодически случайно натыкался на какие то проекты и бывало некоторые идеи перенимал себе

[@Vladforever78]

На сайте сторибука есть раздел с примерами.

[@iGotton]

+

[@PurpleSchool]

+

[@victorwaden]

neovim ☠☠☠