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

[@PurpleSchool]

🔗 Ссылки: React Email: react.email/ 🎓 Курс базовый React и Redux: purpleschool.ru/course/javascript-basics 🎓 Курс базовый Node.js: purpleschool.ru/course/nodejs 💬 Telegram канал с полезными советами: t.me/purple_code_channel

[@vlados_rus]

Вау 🤩 Огромное спасибо за видео Пойду пробовать этот невероятный инструмент ❤

[@PurpleSchool]

@@vlados_rus спасибо

[@dimovich85]

Спасибо, годно!

[@PurpleSchool]

Спасибо

[@sergo46rus]

Прикольно, спасибо. Хотелось бы увидеть тесты в acid и Яндекс почте. И насколько хорошо предусмотрена тёмная тема.

[@ТимурСагайдаков]

Не тестили как он под outlook верстает? Когда верстал с mjml были проблемы как раз с этим клиентом Плюс есть всякие border-radius, которые не все клиенты поддерживают, их можно делать через

[@PurpleSchool]

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

[@ТимурСагайдаков]

@@PurpleSchool вы в продакшене где то использовали уже?

[@PurpleSchool]

На 1-м проекте. Сейчас будем внедрять себе в школу.

[@YaroblogTV]

Видео отличное! Но как делать на React Email письма для темных и светлых тем?

[@jjjuchara]

Антон, привет. А можешь дать ссылку на свои настройки tmux и nvim. Очень понравилась твоя тема)

[@alexlmaxl4966]

Спасибо! Может пригодится в будущем, ресерчить тему не придется :)

[@PurpleSchool]

👍

[@MrDgavatar]

Какая поддержка почтовых клиентов? Скругления в Outlook, web шрифты ну и как с темным режимом в Gmail например?)

[@PurpleSchool]

Поддержка как и у любой вёрстки на таблицах в которую превращается код

[@sardortaylakov315]

Гримасы точно помогают на обложке к видео 😂

[@PurpleSchool]

Супер) буду делать их больше))

[@ntldrzic]

Браузер то все покажет, а вот как это все выглядит в Gmail, Outlook не хватает

[@PurpleSchool]

Там таблица в результате, потому все будет отлично. Кроме того там все компоненты протестированы в них.

[@Dik131WZD]

Мне кажется, как практика React, не плохо, но удобней просто в Word подготовить шаблон и оправить через Outlook, а он уже сам docx документы переводит в html. Единственное, что ссылки придётся в ручную дописать, если нужны. И не получится работать с переменными, если это, например, какие-то автоответы. Пока писал, понял что word - для личных писем, а React.Email - для шаблонизированных автоответов форм из spa или с сайта.

[@PurpleSchool]

Да, это для системой отправки уведомлений

[@morskoj]

А нельзя ли передать в теле письма айфрейм с сылкой на сайт, где уже сформирована страница информации, или сразу на забытую корзину?

[@PurpleSchool]

не поддерживается email клиентами

[@kpacubo5431]

а таилвид поддерживает?

[@PurpleSchool]

Не пробовал

[@romanmed9035]

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

[@PurpleSchool]

У вас в результате после метода render будет обычный html с вёрсткой на таблицах, который совместим со всеми почтовыми клиентами. От React там и следа на останется.

[@romanmed9035]

@@PurpleSchool спасибо, посмотрю внимательнее видео. ибо не понял как тут этот хтмл отделяется.

[@undertale-15075O]

Они изобрели Vue email?

[@PurpleSchool]

Комментарий под каждым видео React про Vue)

[@undertale-15075O]

@@PurpleSchool потому что ПРАВДА

[@PurpleSchool]

@@undertale-15075O ну хорошо, если хотите поспорить, то вот вам факт: - первая версия Raact Email - 12.03.2023 - первая версия Vue Email - 16.07.2023 Вывод: Vue изобрела React Email 😂

[@PurpleSchool]

@stassokolov1382 так я не спорю) я люблю и Vue и Angular и даже Svelte. Даже курс по Vue и Angular сделаю. Но очень бесит хейт реакта под каждым видео) у всего есть плюсы и минусы

[@webminsk7884]

Антон привет. Запиши пожалуйста видео по тестированию синтетическими тестами или иными на нагрузку на сервер или как рассчитать характеристики сервера для каких-либо проектов. Хочу запустить свой проект, но четкого понимания что мне конкретно надо(какой сервак) нет. Спасибо...

[@PurpleSchool]

Закину в список пожеланий

[@indigosay]

Ты как знал, как раз над отправкой писем с экспресса работаю аахахха

[@PurpleSchool]

Рад, что полезно)

[@МихаилКозлов-ы7ф]

Нафига так усложнять? Есть же юнисендер и ему подобные 😂

[@PurpleSchool]

Так юнисендер - отправка, а в него же вам нужно передать html для отправки. Вот React Email и помогает верстать письма.

[@megafalos850]

тут контент для думающих) а не для домохозяек)

[@МихаилКозлов-ы7ф]

@@PurpleSchool надо выйти из сумрака и зайти в юнисендер (например) и увидеть как там всё просто. Вам конечно спасибо за разбор, но не надо усложнять ... там всё готовое уже, а это прошлый век

[@МихаилКозлов-ы7ф]

@@megafalos850 ну ну, давай посмотрим кто быстрее и качественне сделает письмо 😁 то-то я смотрю, один баннер не может сделать, другой слайдер, за то, письма в реакте херачат. Были тут два сайта на джумле и битриксе с галпом, вепкаком и ещё там приблуда была не для "домохозяек", даже сам разработчик не знал как их править, так как делали чуваки с ютуба

[@PurpleSchool]

@@МихаилКозлов-ы7ф я заходил туда, более того детально с ним разбирался, так как читал книгу его основателя про рассылки. Но делать через их шаблоны транзакционные рассылки не самое удобное, особенно если там много шаблонируемого контенте. Для маркетинга да. Я сам использую интерфейс для маркетинга, но только для него.

[@madbad1310]

А зачем вы все как под копирку такие нелепые рожицы лепите на превью ролика?

[@PurpleSchool]

Высокий CTR

[@sergiistryzg9699]

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

[@PurpleSchool]

Может вам включить голову? При чем тут хайп и TS? TypeScript удобный инструмент, который позволяет вам писать более безопасный код и поддерживать приложения. Отправка email осуществляется все равно силами Node.js, где без TS просто нельзя. Если сверстать JSX ещё ок, то вот дальше письма будет будут отправляться через внешнее API по средствам Node.js. И более того я вообще не понимаю этой не любви к TS. Инструмент добавляет то, что должно быть в полноценных языках типа Go и C#, позволяя не писать говнокод с минимальными усилиями. Более того на TS быстрее писать код, чем на JS за счёт того, что есть контракты, вид данных, autocomplete, удобный рефакторинг и так далее. Потому я учу и буду учить писать на TypeScript.

[@kspshnik]

Я не вижу причины **не** использовать TS в современности. Если производительность проекта зависит от "ручных" хаков движка, критический путь должен был быть переписан на компилируемом языке уже полгода назад.

[@megafalos850]

Эх паренек письма бывают не такие простые как кажется) особенно если с какими то динамическими данными в современных приложениях написанных на react

[@suvmer]

​@@PurpleSchoolчто означает "контракты"? Пытался найти в интернете, только в одном источнике упоминается, что типы - это контракт. Но следующим словом вы написали "виды данных". Тогда что такое виды данных?