Как отправить электронную почту в React без SMTP-сервера

Мы собираемся рассмотреть простой способ отправки электронных писем, используя только клиентские технологии.

Некоторое время назад, когда я работал над своим портфолио с открытым исходным кодом, я задал себе вопрос — есть ли простой способ отправлять электронные письма полностью на стороне клиента, без необходимости использования сервера?

Мне повезло, так как самый первый результат поиска был о бесплатном сервисе под названием EmailJS. К сожалению для меня, мне не удалось найти подробную статью о том, как интегрировать этот сервис в мое приложение React.

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

Прежде чем мы начнем

• Вам понадобится Node ›= 14.0.0 и npm ›= 5.6 на вашем компьютере.
• Вам также понадобится учетная запись Gmail, на которую вы будете получать электронные письма.

Настройка проекта React

Лучший способ начать создание нового одностраничного приложения в React — использовать среду Создать приложение React.

Он настраивает вашу среду разработки, чтобы вы могли использовать новейшие функции JavaScript, обеспечивает приятный опыт разработки и оптимизирует ваше приложение для производства.

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

Создание учетной записи на EmailJS

Услуги электронной почты

Теперь, когда у нас есть проект React, мы можем создать бесплатную учетную запись.

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

Чтобы подключить службу к вашей учетной записи Gmail, нажмите кнопку «Подключить учетную запись», после того, как вы закончите подключение своей учетной записи, нажмите «Создать службу» и проверьте свой почтовый ящик, чтобы увидеть, получили ли вы тестовое письмо.

Шаблоны электронной почты

Наш следующий шаг — создание Шаблонов электронной почты для нашего сервиса. Перейдите на вкладку Шаблоны электронной почты прямо под Службы электронной почты и измените шаблон по умолчанию.

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

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

Нам нужно сохранить 3 переменные из EmailJS: Идентификатор службы, Идентификатор шаблона и Идентификатор пользователя. Эти символы уникальны и связаны только с вашей учетной записью Gmail, поэтому убедитесь, что вы не делитесь ими.

Настройка контактной формы React

В отличие от описанных выше шагов, интеграция службы в наше приложение React очень проста, так как не требует много шагов и может быть выполнена менее чем в 40 строках кода.

EmailJS-пакет

Давайте установим зависимость, которая нам нужна для нашего приложения:

$ npm install emailjs-com

or

$ yarn add email

Наконец пришло время написать код. После того, как зависимость будет установлена, перейдите к своему компоненту и импортируйте зависимость:

$ import emailjs from "emai

Чтобы избавить вас от необходимости создавать компонент с нуля, вот как выглядит мой:

import { useRef } from "react";
import emailjs from "emailjs-com";
const service_id = "";
const template_id = "";
const user_id = "";
const Contact = () => {
  const form = useRef();
  const handleSubmit = (event: React.ChangeEvent<HTMLFormElement>) => {
    event.preventDefault();
    emailjs.sendForm(service_id, template_id, form.current, user_id).then(
      (result) => {
        console.log(result.text);
      },
      (error) => {
        console.log(error.text);
      }
    );
    event.target.reset();
  };
  return (
    <div>
      <form ref={form} onSubmit={handleSubmit} autoComplete="off">
        <input name="name" placeholder="Your name" />
        <input name="email" placeholder="Your email address" />
        <textarea name="subject" placeholder="Your Message" />
        <button type="submit" />
      </form>
    </div>
  );
};
export default Contact;

Заключение

Вот и все. Благодаря этому вы можете отправлять электронные письма прямо из своего приложения React.

Не стесняйтесь связаться со мной, если у вас есть какие-либо проблемы или вопросы.