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

Подписаться 41 тыс.

Просмотров 8 тыс.

50% 1

Как вы и просили в предыдущем видео, я сделал для вас 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 - Заключение

Опубликовано:

11 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 43

@PurpleSchool 2 месяца назад

🔗 Ссылки: 🎓 Курс базовый React и Redux: purpleschool.ru/course/react-redux 🎓 Все курсы по разработке: purpleschool.ru Видео про NvChad: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-Q1gIbPEStL0.html Видео про Tmux: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-S-1YcVRHKm4.html 💬 Telegram канал с полезными советами: t.me/purple_code_channel

@ruslanryapov6221 27 дней назад

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

@PurpleSchool 27 дней назад

Спасибо!

@axel-sheen 22 дня назад

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

@PurpleSchool 22 дня назад

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

@user-gc6vl5xf4x 2 месяца назад

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

@PurpleSchool 2 месяца назад

Пожалуйста

@_soryegeton Месяц назад

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

@PurpleSchool Месяц назад

Пожалуйста

@tolyachernov7849 2 месяца назад

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

@PurpleSchool 2 месяца назад

Спасибо!

@elslavak 2 месяца назад

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

@PurpleSchool 2 месяца назад

Пожалуйста

@user-ik7rp8qz5g 2 месяца назад

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

@PurpleSchool 2 месяца назад

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

@tackesi 2 месяца назад

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

@PurpleSchool 2 месяца назад

Пожалуйста!

@golden_smiles 2 месяца назад

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

@PurpleSchool 2 месяца назад

Спасибо!

@user-cv9xy4uu2f 2 месяца назад

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

@PurpleSchool 2 месяца назад

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

@user-xw8ur4sc6t 2 месяца назад

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

@PurpleSchool 2 месяца назад

👍

@viooi2582 2 месяца назад

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

@PurpleSchool 2 месяца назад

👍

@i_help_you Месяц назад

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

@yourpc 2 месяца назад

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

@PurpleSchool 2 месяца назад

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

@yeager6646 2 месяца назад

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

@PurpleSchool 2 месяца назад

JetBrains Mono

@user-pc6bg2mr6g Месяц назад

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

@tackesi 2 месяца назад

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

@PurpleSchool 2 месяца назад

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

@zerocool14pvo 2 месяца назад

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

@PurpleSchool 2 месяца назад

Супер)

@HEX_CAT 2 месяца назад

❤❤❤🎉🎉🎉

@PurpleSchool 2 месяца назад

👍

@UserSo4reUsu75ry Месяц назад

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

@olegvolodin9409 Месяц назад

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

@kowkavn2356 2 месяца назад

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