E-Mail aus der React-Webanwendung senden

1. Erstellen Sie eine E-Mail-App mit der EmailJS-API
2. Senden Sie eine E-Mail mit Expressjs und Mailgun
3. Abschluss

Im Idealfall ist React ein Frontend-Framework zum Erstellen der Benutzeroberflächen von Apps. Aufgrund der Flexibilität und der einfachen Installation von Abhängigkeiten von React kann React zum Erstellen einer vollständigen Anwendung verwendet werden, die sowohl über das Frontend als auch über das Backend verfügt.

Dies gilt auch, wenn wir Anwendungen erstellen möchten, die eine E-Mail-App erfordern, die den Austausch von Daten zwischen Servern erfordert, aber wie erstellen wir eine E-Mail-App mit React?

Erstellen Sie eine E-Mail-App mit der EmailJS-API

EmailJS ist eine solche Abhängigkeit, die es Benutzern ermöglicht, E-Mail-Apps innerhalb des React-Frameworks zu erstellen. Dank der Abhängigkeit müssten wir kein Backend für die App erstellen, da es sich um die Serverseite kümmert; Alles, was wir tun müssen, ist die richtigen Codes einzugeben.

Zunächst gehen wir zu emailjs.com, um ein Konto zu erstellen. Sobald wir das Konto bestätigt haben, richten wir einen E-Mail-Dienst ein.

In der linken Seitenleiste der Website klicken wir auf E-Mail-Dienste und wählen aus der Liste Gmail aus; Wir werden ein Pop-up sehen. Klicken Sie auf Konto verbinden, wählen Sie die E-Mail aus, die wir mit dem Dienst verbinden möchten, und wählen Sie dann Dienst hinzufügen aus, um den E-Mail-Dienst zu erstellen.

Sobald dies erfolgreich ist, sollten wir eine Service-ID und eine Test-E-Mail erhalten, die an die E-Mail-Adresse gesendet wird, die wir mit dem Dienst verbunden haben.

Als nächstes wählen wir E-Mail-Vorlagen in der linken Seitenleiste und klicken auf Neue Vorlage erstellen, um eine E-Mail-Vorlage zu erstellen. Sobald wir damit zufrieden sind, klicken wir auf Speichern.

Eine Vorlagen-ID wird erstellt. Wir werden dies in unserem Code benötigen.

Fahren Sie nun mit der Erstellung eines React-Projektordners fort. Sobald wir dies getan haben, navigieren wir zum Projektordner und installieren die EmailJS-Abhängigkeit mit:

npm install emailjs-com

Jetzt importieren wir die Abhängigkeit in die Datei App.js und fügen dann einige Codes hinzu, wie folgt:

Code-Snippet – App.js:

import React from 'react';
import emailjs from 'emailjs-com';

export default function ContactUs() {

  function sendEmail(e) {
    e.preventDefault();

    emailjs.sendForm('service_j0q23dh', 'template_rhntbdy', e.target, 'ehCd9ARJUiDG1yjXT')
      .then((result) => {
        window.location.reload()
      }, (error) => {
        console.log(error.text);
      });
  }

  return (
    <form className="contact-form" onSubmit={sendEmail}>
      <input type="hidden" name="contact_number" />
      <label>Name</label>
      <input type="text" name="from_name" />
      <label>Email</label>
      <input type="email" name="from_email" />
      <label>Subject</label>
      <input type="text" name="subject" />
      <label>Message</label>
      <textarea name="html_message" />
      <input type="submit" value="Send" />
    </form>
  );
}

Jetzt ersetzen Sie im emailjs.sendForm('YOUR_SERVICE_ID' 'YOUR_TEMPLATE_ID' target, 'YOUR_USER_ID') jedes Element durch die von Ihnen erstellten.

Nachdem die Mail erfolgreich versendet wurde, aktualisiert die Funktion window.location.reload() die Seite und bereitet sie für eine weitere Aufgabe vor. Dann bauen wir die E-Mail-Seite auf.

Wir ordnen dem Submit-Button den Event-Handler onSubmit zu. Sobald darauf geklickt wird, wird die E-Mail versendet.

Ausgang:

Senden Sie eine E-Mail mit Expressjs und Mailgun

Dieses Mal erstellen wir eine Full-Stack-React-E-Mail-Versand-App. Es wird sowohl ein Front- als auch ein Backend haben und die E-Mail von seinem eigenen Server senden.

Um mit dem Frontend zu beginnen, erstellen Sie eine neue React-App und installieren Sie einige Abhängigkeiten. Installieren Sie Axios mit npm install axios; Dies verarbeitet die Anfragen, die wir an das Backend senden.

Als nächstes installieren Sie Toastify mit npm install respond-toastify. Diese Abhängigkeit hilft beim Erstellen einer stilvollen Benachrichtigung, die angezeigt wird, wenn wir die E-Mail erfolgreich gesendet haben oder auf andere Weise.

Importieren Sie in der Datei App.js die installierten Abhängigkeiten wie unten gezeigt und fügen Sie dann diese Codes hinzu:

Code-Snippet – App.js:

import './App.css';
import { useState } from 'react';
import { toast, ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import axios from 'axios';

function App() {
  const [email, setEmail] = useState('');
  const [subject, setSubject] = useState('');
  const [message, setMessage] = useState('');
  const [loading, setLoading] = useState(false);

  const submitHandler = async (e) => {
    e.preventDefault();
    if (!email || !subject || !message) {
      return toast.error('Please fill email, subject and message');
    }
    try {
      setLoading(true);
      const { data } = await axios.post(`/api/email`, {
        email,
        subject,
        message,
      });
      setLoading(false);
      toast.success(data.message);
    } catch (err) {
      setLoading(false);
      toast.error(
        err.response && err.response.data.message
          ? err.response.data.message
          : err.message
      );
    }
  };
  return (
    <div className="App">
      <ToastContainer position="bottom-center" limit={1} />
      <header className="App-header">
        <form onSubmit={submitHandler}>
          <h1>Send Email</h1>
          <div>
            <label htmlFor="email">Email</label>
            <input
              onChange={(e) => setEmail(e.target.value)}
              type="email"
            ></input>
          </div>
          <div>
            <label htmlFor="subject">Subject</label>
            <input
              id="subject"
              type="text"
              onChange={(e) => setSubject(e.target.value)}
            ></input>
          </div>
          <div>
            <label htmlFor="message">Message</label>
            <textarea
              id="message"
              onChange={(e) => setMessage(e.target.value)}
            ></textarea>
          </div>
          <div>
            <label></label>
            <button disabled={loading} type="submit">
              {loading ? 'Sending...' : 'Submit'}
            </button>
          </div>
        </form>
      </header>
    </div>
  );
}

export default App;

Die Zustände der Elemente auf der Seite ändern sich, also weisen wir jede Komponente der Funktion useState zu, dann richten wir Axios ein, um die Daten zu verarbeiten, die in jedes Feld eingegeben werden.

Dies geschieht innerhalb der Komponente submitHandler. Toastify sucht nach Benachrichtigungen und leitet sie entsprechend weiter.

Als nächstes erstellen wir den Formularteil der E-Mail-App. Der Submit-Button ist der Funktion submitHandler zugeordnet, die ausgelöst wird, sobald der Submit-Button geklickt wird, dank des onSubmit-Event-Handlers.

Um die Seite zu verschönern, fügen Sie dieses Snippet mit Stilen in die Datei App.css ein, wie unten:

Codeschnipsel – App.css:

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

form > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 1rem;
}
form > div > label {
  margin: 1rem;
}
form > div > input,
form > div > textarea {
  padding: 0.5rem;
  min-width: 20rem;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

Kommen wir nun zum Backend. Wir erstellen einen neuen Ordner außerhalb unseres Projektordners und nennen ihn Backend. Dann navigieren wir durch diesen Ordner im Terminal und geben npm init -y ein, um den Knoten zu initiieren.

Dann suchen wir die Datei .gitignore und öffnen sie. Es befindet sich direkt über der Datei package.json des Projektordners, direkt unter dem Ordner src.

Entfernen Sie das / hinter den node_modules. Dadurch werden die node-modules im Backend-Ordner aktiv.

Öffnen Sie dennoch im Projektordner die Datei package.json. Fügen Sie nach der Eingabe name dies in der nächsten Zeile hinzu: "proxy": "http://localhost:4000/",; Dies ist der Proxy, auf dem das Backend ausgeführt wird.

Installieren Sie nun diese Abhängigkeiten gleichzeitig wie folgt:

npm install dotenv express mailgun-js

Das dotenv hilft uns, wichtige Daten zu schützen, die wir in unseren Codes verwenden, wie z. B. private API-Schlüssel. express wickelt die Serververbindungen vom Backend ab, während mailgun uns die API-Schlüssel liefert, die wir benötigen, um unsere E-Mail-App bereitzustellen.

Als nächstes erstellen wir zwei Dateien, server.js und .env. Schreiben Sie in die Datei server.js diese Codes:

Code-Snippet – server.js:

const express = require('express');
const dotenv = require('dotenv');
const mg = require('mailgun-js');

dotenv.config();

const mailgun = () =>
  mg({
    apiKey: process.env.MAILGUN_API_KEY,
    domain: process.env.MAILGUN_DOMIAN,
  });

const app = express();
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

app.post('/api/email', (req, res) => {
  const { email, subject, message } = req.body;
  mailgun()
    .messages()
    .send(
      {
        from: 'John Doe <john@mg.yourdomain.com>',
        to: `${email}`,
        subject: `${subject}`,
        html: `<p>${message}</p>`,
      },
      (error, body) => {
        if (error) {
          console.log(error);
          res.status(500).send({ message: 'Error in sending email' });
        } else {
          console.log(body);
          res.send({ message: 'Email sent successfully' });
        }
      }
    );
});

const port = process.env.PORT || 4000;
app.listen(port, () => {
  console.log(`serve at http://localhost:${port}`);
});

Wir importieren die heruntergeladenen Abhängigkeiten und erstellen dann die Codes, um sie zu verwenden. Die API- und DOMAIN-Schlüssel, die wir erhalten, wenn wir uns bei mailgun.com registrieren, werden wie unten in die .env-Datei geschrieben:

Codeschnipsel- .env:

MAILGUN_DOMIAN=sandbox540579ee3e724d14a5d72e9d087111a6.mailgun.org
MAILGUN_API_KEY=68fb630dbe57d3ba42d3a13774878d62-1b8ced53-29cac61a

Wir importieren sie in die Datei server.js. Dann richten wir die E-Mail-Anfragen und -Antworten und den Port ein, auf dem der Server laufen soll.

Um die Schlüssel in der .env-Datei zu erhalten, gehen Sie zu mailgun.com und registrieren Sie sich. Fahren Sie als Nächstes mit Senden in der linken Seitenleiste fort, klicken Sie auf Domains, und Sie sollten sandboxXXXXmailgun.org sehen, das ist der Domainschlüssel.

Kopieren Sie es und fügen Sie es ein, wie in der obigen .env-Datei zu sehen, und klicken Sie dann auf den Domänenschlüssel. Ganz rechts sollten Sie API-Schlüssel sehen; Enthüllen Sie den privaten API-Schlüssel, kopieren Sie ihn und fügen Sie ihn in die .env-Datei ein.

Immer noch auf der Domain-Seite, ganz rechts, sehen Sie Autorisierte Empfänger, geben Sie die E-Mail ein, die Sie senden möchten. Gehen Sie zu dieser E-Mail, um zu bestätigen, dass Sie eine E-Mail von Ihrem Mailgun-Profil erhalten möchten.

Gehen Sie dann zurück zur Domänenseite und aktualisieren Sie sie, um sicherzustellen, dass die Empfänger-E-Mail verifiziert wurde.

Gehen Sie zurück zum Terminal, gehen Sie zum Projektordner und geben Sie npm start ein, um die App zu starten. Öffnen Sie einen weiteren Terminal-Tab, cd zum Backend-Ordner und geben Sie node server.js ein, um den Backend-Ordner zu starten.

Gehen Sie zur App und senden Sie die E-Mail.

Ausgang:

Abschluss

Bisher können Sie mit dem React-Framework fast jede App erstellen, da es flexibel ist, mehrere Komponenten, APIs und Abhängigkeiten zusammenzubringen, um eine leichte, flexible, aber sehr effektive und effiziente Webanwendung zu erstellen.