Тёмный

React Email - Вёрстка адаптивных email на React JS 

PurpleSchool | Anton Larichev
Подписаться 41 тыс.
Просмотров 11 тыс.
50% 1

Посмотрим как можно сверстать красивые адаптивные письма на React JS без mjml шаблонизатора и вёрстки на таблицах. Разберёмся в React Email.
🔗 Ссылки:
React Email: react.email/
🎓 Курс базовый React и Redux: purpleschool.ru/course/javasc...
🎓 Курс базовый Node.js: purpleschool.ru/course/nodejs
💬 Telegram канал с полезными советами:
t.me/purple_code_channel
Разделы видео:
0:00 - Введение
0:15 - Зачем email фреймворков
2:36 - Подключение React Email
4:33 - Создание письма
7:31 - Декомпозиция компонент
11:59 - Шрифты и Head
13:16 - Другие компоненты
17:09 - Заключение

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

 

31 май 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 46   
@PurpleSchool
@PurpleSchool 2 месяца назад
🔗 Ссылки: React Email: react.email/ 🎓 Курс базовый React и Redux: purpleschool.ru/course/javascript-basics 🎓 Курс базовый Node.js: purpleschool.ru/course/nodejs 💬 Telegram канал с полезными советами: t.me/purple_code_channel
@alexlmaxl4966
@alexlmaxl4966 2 месяца назад
Спасибо! Может пригодится в будущем, ресерчить тему не придется :)
@dimovich85
@dimovich85 2 месяца назад
Спасибо, годно!
@PurpleSchool
@PurpleSchool 2 месяца назад
Спасибо
@sergo46rus
@sergo46rus Месяц назад
Прикольно, спасибо. Хотелось бы увидеть тесты в acid и Яндекс почте. И насколько хорошо предусмотрена тёмная тема.
@jjjuchara
@jjjuchara 2 месяца назад
Антон, привет. А можешь дать ссылку на свои настройки tmux и nvim. Очень понравилась твоя тема)
@ntldrzic
@ntldrzic 2 месяца назад
Браузер то все покажет, а вот как это все выглядит в Gmail, Outlook не хватает
@PurpleSchool
@PurpleSchool 2 месяца назад
Там таблица в результате, потому все будет отлично. Кроме того там все компоненты протестированы в них.
@sardortaylakov315
@sardortaylakov315 2 месяца назад
Гримасы точно помогают на обложке к видео 😂
@PurpleSchool
@PurpleSchool 2 месяца назад
Супер) буду делать их больше))
@YaroblogTV
@YaroblogTV Месяц назад
Видео отличное! Но как делать на React Email письма для темных и светлых тем?
@user-vx7ro1hs1h
@user-vx7ro1hs1h 2 месяца назад
Не тестили как он под outlook верстает? Когда верстал с mjml были проблемы как раз с этим клиентом Плюс есть всякие border-radius, которые не все клиенты поддерживают, их можно делать через
@PurpleSchool
@PurpleSchool 2 месяца назад
На их сайте указана полная поддержка. В реальности когда внедряли, жалоб не было.
@user-vx7ro1hs1h
@user-vx7ro1hs1h 2 месяца назад
@@PurpleSchool вы в продакшене где то использовали уже?
@PurpleSchool
@PurpleSchool 2 месяца назад
На 1-м проекте. Сейчас будем внедрять себе в школу.
@MrDgavatar
@MrDgavatar Месяц назад
Какая поддержка почтовых клиентов? Скругления в Outlook, web шрифты ну и как с темным режимом в Gmail например?)
@PurpleSchool
@PurpleSchool Месяц назад
Поддержка как и у любой вёрстки на таблицах в которую превращается код
@morskoj
@morskoj 2 месяца назад
А нельзя ли передать в теле письма айфрейм с сылкой на сайт, где уже сформирована страница информации, или сразу на забытую корзину?
@PurpleSchool
@PurpleSchool 2 месяца назад
не поддерживается email клиентами
@romanmed9035
@romanmed9035 2 месяца назад
возможно я прошлепал, но как это отправляется и как обеспечяивается совместимость с основными почтовиками? сверстанное письмо должно ведь как-то уйти и показаться, а еще и не быть искажено самим почтовым онлайн сервисом.
@PurpleSchool
@PurpleSchool 2 месяца назад
У вас в результате после метода render будет обычный html с вёрсткой на таблицах, который совместим со всеми почтовыми клиентами. От React там и следа на останется.
@romanmed9035
@romanmed9035 2 месяца назад
@@PurpleSchool спасибо, посмотрю внимательнее видео. ибо не понял как тут этот хтмл отделяется.
@webminsk7884
@webminsk7884 2 месяца назад
Антон привет. Запиши пожалуйста видео по тестированию синтетическими тестами или иными на нагрузку на сервер или как рассчитать характеристики сервера для каких-либо проектов. Хочу запустить свой проект, но четкого понимания что мне конкретно надо(какой сервак) нет. Спасибо...
@PurpleSchool
@PurpleSchool 2 месяца назад
Закину в список пожеланий
@indigosay
@indigosay 2 месяца назад
Ты как знал, как раз над отправкой писем с экспресса работаю аахахха
@PurpleSchool
@PurpleSchool 2 месяца назад
Рад, что полезно)
@user-sj7tf2yv3m
@user-sj7tf2yv3m 2 месяца назад
Они изобрели Vue email?
@PurpleSchool
@PurpleSchool 2 месяца назад
Комментарий под каждым видео React про Vue)
@user-sj7tf2yv3m
@user-sj7tf2yv3m 2 месяца назад
@@PurpleSchool потому что ПРАВДА
@stassokolov1382
@stassokolov1382 2 месяца назад
@@PurpleSchool Ну vue хорош. Есть ваши курсы и vue Остальное - вкусовщина :D
@PurpleSchool
@PurpleSchool 2 месяца назад
@@user-sj7tf2yv3m ну хорошо, если хотите поспорить, то вот вам факт: - первая версия Raact Email - 12.03.2023 - первая версия Vue Email - 16.07.2023 Вывод: Vue изобрела React Email 😂
@PurpleSchool
@PurpleSchool 2 месяца назад
@stassokolov1382 так я не спорю) я люблю и Vue и Angular и даже Svelte. Даже курс по Vue и Angular сделаю. Но очень бесит хейт реакта под каждым видео) у всего есть плюсы и минусы
@user-ek9mp1nw5s
@user-ek9mp1nw5s 2 месяца назад
Нафига так усложнять? Есть же юнисендер и ему подобные 😂
@PurpleSchool
@PurpleSchool 2 месяца назад
Так юнисендер - отправка, а в него же вам нужно передать html для отправки. Вот React Email и помогает верстать письма.
@megafalos850
@megafalos850 2 месяца назад
тут контент для думающих) а не для домохозяек)
@user-ek9mp1nw5s
@user-ek9mp1nw5s 2 месяца назад
@@PurpleSchool надо выйти из сумрака и зайти в юнисендер (например) и увидеть как там всё просто. Вам конечно спасибо за разбор, но не надо усложнять ... там всё готовое уже, а это прошлый век
@user-ek9mp1nw5s
@user-ek9mp1nw5s 2 месяца назад
@@megafalos850 ну ну, давай посмотрим кто быстрее и качественне сделает письмо 😁 то-то я смотрю, один баннер не может сделать, другой слайдер, за то, письма в реакте херачат. Были тут два сайта на джумле и битриксе с галпом, вепкаком и ещё там приблуда была не для "домохозяек", даже сам разработчик не знал как их править, так как делали чуваки с ютуба
@PurpleSchool
@PurpleSchool 2 месяца назад
@@user-ek9mp1nw5s я заходил туда, более того детально с ним разбирался, так как читал книгу его основателя про рассылки. Но делать через их шаблоны транзакционные рассылки не самое удобное, особенно если там много шаблонируемого контенте. Для маркетинга да. Я сам использую интерфейс для маркетинга, но только для него.
@madbad1310
@madbad1310 2 месяца назад
А зачем вы все как под копирку такие нелепые рожицы лепите на превью ролика?
@PurpleSchool
@PurpleSchool 2 месяца назад
Высокий CTR
@sergiistryzg9699
@sergiistryzg9699 2 месяца назад
Использовать тайпскрипт в таких простых вещах? Серьезно??? А может нужно включать голову что и где лучше использовать. То что поделился удобным инструментом спасибо. Но тайпскрипт в таких простых вещах это ты уже гонишся за хайпом, а не за обучением
@PurpleSchool
@PurpleSchool 2 месяца назад
Может вам включить голову? При чем тут хайп и TS? TypeScript удобный инструмент, который позволяет вам писать более безопасный код и поддерживать приложения. Отправка email осуществляется все равно силами Node.js, где без TS просто нельзя. Если сверстать JSX ещё ок, то вот дальше письма будет будут отправляться через внешнее API по средствам Node.js. И более того я вообще не понимаю этой не любви к TS. Инструмент добавляет то, что должно быть в полноценных языках типа Go и C#, позволяя не писать говнокод с минимальными усилиями. Более того на TS быстрее писать код, чем на JS за счёт того, что есть контракты, вид данных, autocomplete, удобный рефакторинг и так далее. Потому я учу и буду учить писать на TypeScript.
@kspshnik
@kspshnik 2 месяца назад
Я не вижу причины **не** использовать TS в современности. Если производительность проекта зависит от "ручных" хаков движка, критический путь должен был быть переписан на компилируемом языке уже полгода назад.
@megafalos850
@megafalos850 2 месяца назад
Эх паренек письма бывают не такие простые как кажется) особенно если с какими то динамическими данными в современных приложениях написанных на react
@suvmer
@suvmer Месяц назад
​@@PurpleSchoolчто означает "контракты"? Пытался найти в интернете, только в одном источнике упоминается, что типы - это контракт. Но следующим словом вы написали "виды данных". Тогда что такое виды данных?
Далее
React Email with Resend (Complete Tutorial)
24:16
Просмотров 10 тыс.
You Can Create Beautiful Modern Emails With React!
16:06