Установка

Создание электронного письма в формате HTML - не самое интересное. Некоторые могут даже сказать, что ненавидят эту задачу. HTML-шаблоны обычно превращаются в массивные файлы шаблонного кода. Кроме того, существуют проблемы с кроссбраузерностью, из-за которых у вас возникает ощущение, что вы изучаете мелочи, связанные с панелью совместимости с браузерами. Вот почему я чуть не заплакал, когда наткнулся на статью @ roilan14 Создание и отправка многоразовых писем с помощью React. В этой статье , он объясняет, как использовать пакет response-html-email для использования React для создания ваших электронных писем в формате HTML.

У использования React и пакета response-html-email есть ряд преимуществ, но самым большим для меня является удобочитаемость. Вот небольшой фрагмент, который создает полноценное электронное письмо в формате html:

На высоком уровне это довольно просто. Пакет предоставляет нам некоторые компоненты для создания нашей электронной почты (например, ‹Email›, ‹Box› и т. Д.), Которые мы используем для создания компонента электронной почты под названием ContactMeTemplate. Затем мы загружаем этот компонент ContactMeTemplate в функцию с именем renderEmail (). Эта функция renderEmail () принимает наш компонент реакции ContactMeTemplate и выдает сертифицированное электронное письмо в формате HTML.

Помимо возможности повторного использования и (что более важно) удобочитаемости, response-html-email также дает вам несколько полезных сообщений об ошибках в консоли. Вот пара примеров того, что вы можете увидеть:

Warning: Style property `background` supplied to `Item`, in outlook, outlook-web: background images not supported
Warning: Failed prop type: Style property `border-radius` supplied to `Item` unsupported in: gmail-android, yahoo-mail, outlook, outlook-legacy.

Компоненты response-html-email

Чтобы подробнее рассказать о компонентах, с которыми нам нужно работать, вот как они соотносятся с вашим средним электронным письмом:

‹Email›

HTML-документ с центрированным 600px ‹table› внутри контейнера ‹table›, основанный на HTML-шаблоне электронной почты.

‹Box›

Упрощенный элемент ‹table›, рабочая лошадка дизайна электронной почты в формате HTML. ‹Box› es содержат вертикальную стопку ‹Item› s. Используйте их для создания визуальной структуры, кнопок с заливкой и интервалов.

‹Item›

Подраздел ‹Box›, по сути, блок ‹tr› ‹td›.

‹Span›

Используйте для назначения стилей тексту.

<A>

Используйте для форматирования ссылок. Требуется опора href. Всегда устанавливает target = ”_ blank” и по умолчанию подчеркивает. Чтобы удалить подчеркивание, установите textDecoration = «none».

‹Image›

Изображение по умолчанию без каких-либо надоедливых границ, контуров или подчеркиваний. Требуется свойство src, а также установка ширины и высоты. Вы можете переопределить стили по умолчанию (например, добавить границу) с помощью свойства style.

Намного лучше, чем ваш обычный шаблон html. Не забудьте заглянуть на страницу npm и github для получения более подробной информации. Достаточно введения, теперь давайте посмотрим, как использовать его с нашими приложениями Meteor.

React, электронные письма и метеор

Если вы следили за обширным блогом Meteor Chef, вы, скорее всего, встречали его незаменимые сообщения в электронном пакете Meteor (например, Using the Email Package). В использовании response-html-emai l замечательно то, что вы можете пропустить настройку рендеринга на стороне сервера с помощью пакета meteorhacks: ssr. Хотя настроить meteorhacks: ssr относительно просто, приятно, что не нужно беспокоиться. Я также настроил свой ответный адрес электронной почты: просто подключите response-html-email, и вы отправляетесь на скачки.

Начиная

Я буду использовать для этого Meteor 1.3. Я буду использовать свой стартовый набор Base-Material-UI, который является версией Base шеф-повара Meteor. Base-Material-UI использует React, React-Router, Formsy-React, Material-UI и Meteor. Если вы хотите ознакомиться с файловой структурой, посмотрите мое репо здесь. Поскольку он очень похож на Meteor Chef (за исключением использования material-ui и formsy), вы можете проверить его начальную страницу здесь, чтобы получить хорошее объяснение.

Хватит бессовестной саморекламы. Давайте копаться.

Возьмите Base-Material-UI:

git clone https://github.com/acomito/base-material-ui.git base-email

Затем войдите в каталог и установите пакеты. Я обычно делаю «установку метеора npm», а затем обычную установку «npm» для хорошей меры:

cd base-email
meteor npm install
npm install

Затем вы хотите убедиться, что вы добавили в свой проект почтовый пакет MDG meteor:

meteor add email

Затем нам нужно настроить нашу конфигурацию электронной почты с помощью службы электронной почты. Обычно я использую MailGun. Для этого нет особой причины, но они никогда не доставляли мне хлопот; их достаточно легко настроить; и вы получаете 10 000 писем в месяц бесплатно.

Если вам нужно подробное руководство по настройке, у Meteor Chef есть хорошая статья об этом, которую вы можете найти здесь. Короче говоря, я обычно создаю новый файл в папке сервера под названием email-config.js. Затем вставьте свои учетные данные в функцию Meteor.startup, как показано ниже:

Большой. Необходимость зарегистрироваться в MailGun и найти ключ, вероятно, является самой неприятной частью этого. Перейдем к забавным вещам.

Давайте добавим response-html-email:

meteor npm install --save react-html-email
//or if you like collecting smart-boy points:
meteor npm i -S react-html-email

примечание: не забудьте предварительно исправить в командах npm слово метеор. Подробнее см. Здесь.

Настроив наше приложение для общения с MailGun и добавив пакет response-html-email, мы можем начать кодировать наш компонент реакции, который будет нашим электронным письмом в формате HTML.

Зайдем в import / startup / server и создадим файл с именем email-template.js. Возможно, есть места для размещения этого файла получше, но для наших целей здесь подойдет.

Добавьте приведенный ниже код в свой файл email-template.js:

и мы можем настроить некоторые CSS, которые будут вставлены в заголовок нашего электронного письма, например:

Этот компонент ContactMeTemplate еще не готов, мы вернемся к нему через минуту. Перейдем к новому файлу и создадим метод метеора.

В том же каталоге создайте новый файл с именем «contact-email.js». Затем вставьте приведенный ниже код, чтобы запустить наш метод:

Итак, выше у нас есть объект Meteor.method с методом под названием sendContactMail внутри него . Этот метод sendContactMail принимает функцию. Эта функция принимает два параметра: fromEmail, name. Мы можем представить, что эти параметры поступают из контактной формы на стороне клиента с двумя полями: адрес электронной почты человека, пытающегося связаться с нами (fromEmail), и имя человека, пытающегося связаться с нами (имя). Затем внутри нашего метода sendContactMail , мы вызываем Email.send (). Email.send принимает объект параметров (например, адрес электронной почты для отправки, адрес электронной почты, на который он будет отправлен, и т. д.).

Email.send находится внутри нашего метода и имеет доступ к двум переменным (fromEmail и name). Итак, обычно мы можем поместить эти переменные прямо в Email.send, например:

Вышеупомянутое будет устанавливать «от» электронной почты и «тему» ​​для любого электронного письма и имени нашей интерфейсной формы, отправляемой этому методу. Затем эта функция Email.send отправит электронное письмо, используя нашу учетную запись MailGun.

Электронное письмо, отправленное указанным выше Email.send , является действительно пустым. у него вообще нет стилей и базового шрифта. Теперь, если бы мы хотели создать более модное электронное письмо, обычно нам нужно было бы реализовать рендеринг на стороне сервера с помощью пакета meteorhacks: ssr, выполняющего что-то вроде стратегии Meteor Chef. В нашем случае мы делаем что-то другое.

Сначала мы хотим вернуться к «email-template.js» с помощью компонента реакции ContactMeTemplate. Здесь мы воспользуемся функцией renderEmail () в response-html-email:

Возможно, вы заметили, что мы не экспортируем компонент ContactMeTemplate. Это потому, что вместо этого мы собираемся экспортировать функцию. Функция, которую мы экспортируем, вернет результат renderEmail (), который будет строкой всего электронного письма в формате HTML или, другими словами, нашим обработанным компонентом ContactMeTemplate.

Делаем это так:

Теперь, когда наш компонент загружен в renderEmail (). renderEmail принимает наш компонент реакции и возвращает электронное письмо в формате HTML. Мы берем возвращенное электронное письмо в формате HTML и передаем его любому, кто вызывает нашу функцию GetContactEmail (). Поэтому мы экспортируем GetContactEmail (), чтобы мы могли получить нашу электронную почту в формате HTML в другом месте.

Затем мы будем работать с GetContactEmail () в нашем Meteor.Method:

В приведенном выше фрагменте мы импортируем нашу функцию GetContactEmail. Затем мы добавляем объект, который передаем Email.send как параметр «html ». Параметр html принимает, как вы уже догадались, строку HTML. Мы могли бы жестко закодировать строку с помощью HTML, но мы передаем ей возвращаемое значение из нашей функции получения GetContactEmail (), которая снова является визуализированным компонентом React, который теперь является строкой обычное электронное письмо в формате HTML .

Если мы уволим этого ребенка, мы увидим, что он (должен) работать. И точно так же мы отправляем электронные письма в формате HTML с помощью response!

Но подождите ... возможно, вы что-то заметили. Нам не удалось использовать параметр name в компоненте электронной почты !?

Давайте посмотрим, как добавить нашу переменную name в наш компонент реагирования электронной почты в качестве опоры.

Передача реквизитов в наш компонент электронной почты React

Использовать реквизит довольно просто. Нам просто нужно передать имя в нашу функцию-получатель GetContactEmail ():

Затем мы можем поймать эту переменную имени в нашем «email-template.js» в качестве параметра и передать его в наш шаблон как опору:

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

Бум. В нашем электронном письме теперь есть динамические данные, поступающие из Meteor.method в компонент ContactMeTemplate в качестве опоры.

TL; DR:

Response-html-email это реальность.

Если вы знаете React, теперь вы можете изменить свой взгляд на кодирование HTML-писем:

взять под полный контроль ситуацию. И с этим я ВЫШЕЛ.