??: ??? ?????

??? ???? ???? ?? ?? ??? ??? ???? ?? ? ?? ?? WYSIWYG(What You See Is What You Get) ??? ??? ? ????. ??? ???? HTML ? CSS? ???? ??? ?? ?? ???? ??? ???? ???? ? ?????.

? ????? ?? ?? ? ??? ?? ??? ???? ?? ??? ?? ???? ??? ?? ??? ??? ??? ??? ? ????. ?? ?? ??? ??? ? ??? Unlayer? ???? MailDev? ???? ????????.

????

Unlayer? ???? ???? ???? ???? ??? ? ?? ?? ?? ??? ? ?? ??? ??????. React ?????? ?? ???? ? ??????? ?? ??? ???? ??? ??? ??? ???? ?? ?? ?? ??? ???.

React, Vue, Angular ????? ?? ??? ? ????. ??? ? ?? ?? ?????.

• ??? ? ?? ???
• ?? ??? ???
• HTML ? JSON ???? ??
• ??? ?? ??? ?? ??? ??? ???? ??

??? ???

? ?? ?? ?? ?? ??? ????? ??? ??? ??? ?? ??? ??? MJML? ???? ??? Easy email? ????.

Unlayer? ??? ??? ? ?? ??? ???? ????? ???? ??? ??? ?? ??? ???? ?????? ?????.

Easy email? React? ??? ???? ???? ??? ??? ?????. ?? ??? ??? ????.

• ??? ? ?? ???
• ?? ???
• ??? ??? ??

MJML

MJML? ??? ??? ???? ???? ??? ?????. ???? ?? ?? ? ??? ?????? ?? ??? HTML? ?????? ??? ??????.

?? ??:

• MJML ??? ??? ???? ??? ??
• MJML? ??? HTML? ??
• ???? ??? ??? ?? ???? ?? ?? ?????

??JS

GrapesJS? ???? ???? ???? ???? ???? ?? ?? ??? ??? ?????. ??? ???? ?? ??? ????? ?? ?? ?? ?????? ?????.

??? GrapesJS? ?? ?????.

• ??? ??? ?? ??? ????
• ????? ??? ???
• ???? ? ?? ???? ?? ??

??? ???? ????? ? ?????? ??

?? ??? ???? ?? ??? ?? ???? ????? ? ?????? ??? ? ??? ????. ??? ??? ?? ??? ???? ?? ???? ? ?????? ??? ???? ???? ??? ??? ???? ??? ? ????.

? ????? Unlayer? React ??????? ???? ??? ???????.

?? ??? ???? ??? React ??????? ???? ??? ?????.

npx create-react-app email-editor && cd email-editor 

???? ?? ??? React ??????? React-email-editor ???? ?????.

npm install react-email-editor

?? ? app.js? ?????? ?? ?? ???? App.css? ???????.

.App {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.button {
  background-color: #04AA6D; /* Green */
  border: none;
  color: white;
  padding: 15px 50px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  border-radius: 32px;
  margin-top: 20px;
  margin-left: 20px;
  cursor: pointer;
}

???? App.js ??? ?? ??? ???????.

import axios from "axios";
import React, { useRef } from "react";
import EmailEditor from "react-email-editor";
import "./App.css";

const App = () => {
  const emailEditorRef = useRef(null);
  const exportHtml = () => {
    emailEditorRef.current.editor.exportHtml((data) => {
      const { html } = data;
      sendTestEmail(html);
    });
  };

  const sendTestEmail = async (html) => {
    try {
      const response = await axios.post("http://localhost:8080/send-email", {
        html,
      });
      alert(response.data);
    } catch (error) {
      console.error("Error sending email:", error);
    }
  };

  return (
    <div className="App">
      <h1>React Email Editor</h1>
      <EmailEditor ref={emailEditorRef} />
      <button className="button" onClick={exportHtml}>
        Send Email
      </button>
    </div>
  );
};

export default App;

?? ?? ???? ?? ??? useRef? ???? ???? ??? ???? ???? ??? ???(emailEditorRef)? ?????. ??? ??? ??? ???? HTML ??? sendTestEmail ??? ??? ?? ??? localhost API? ?? ??? ??? ????Html ??? ??????.

??? ???? ?? MailDev

MailDev? ??? ????? ??? ???? ?? ?? ? ???? ?? ???? ????? ?? ?? ?? SMTP(Simple Mail Transfer Protocol) ?????.

?? ??? ??? ?? ?? ??? ?? ????? ??? ???? ??? ?? ? ?? ? ?????? ?? ??? ?????.

MailDev ??????? ??????? SMTP ??? ???? ?? ??? ??? ?????. ??? ??? MailDev? ?? ?? ??? ?? ???? ?? ?? ????? ???? ?????? SMTP ?????.

MailDev ??? ???? ?? ???? ??? ??? ???? ??? ?????. ?? Node.js? ???? ??? ??? ??? ?????. ??? ?????? ???? ?? ?? ??? ???? Node ???? ??? ????.

mkdir my-node-backend && cd my-node-backend && npm init -y

? ??? Node ??? ????? ??? ?????. ?? ??? Express.js? Nodemailer? ???? ???, ?? ??? ???? ?????.

npm install express nodemailer cors

????, ???? ????? server.js ??? ??? ??? ?? ??? ??????.

const express = require("express");
const nodemailer = require("nodemailer");
const cors = require("cors");
const app = express();

app.use(express.json());
app.use(cors());

//Set up Nodemailer to connect to Maildev's SMTP server
const transporter = nodemailer.createTransport({
  host: "127.0.0.1",
  port: 1025, // Maildev's default SMTP port
  secure: false, // Maildev does not require SSL
  tls: {
    rejectUnauthorized: false,
  },
});

// API endpoint to send the email
app.post("/send-email", (req, res) => {
  const { html } = req.body;
  const mailOptions = {
    from: "IsaaacTheTester@example.com",
    to: "recipient@example.com",
    subject: "Test Email from React Email Editor",
    html: html,
  };

  transporter.sendMail(mailOptions, (error, info) => {
    if (error) {
      console.error("Error sending email:", error);
      return res.status(500).send("Failed to send email");
    }
    console.log("Email sent:", info.response);
    res.status(200).send("Email sent successfully");
  });
});

app.listen(8080, () => {
  console.log("Server is running on port 8080");
});

?? ?? ????? Nodemailer? ???? MailDev? SMTP ??? ?? ???? ??? Express? ???? Node ??? ???? ????. ??? ?? 8080?? ?? ???? /send-email ?????? ?? POST ??? ?????.

???? ????? ?? ??? ???? ?? ??? ?????.

node server.js

????? ?? ??? ???? MailDev? ???? ????? ?????.

npm install -g maildev

MailDev? ????? ???? ? ???? ?? ??? ???? ?????.

maildev

?? ??? ???? ????? ??? ???? ?? ??? ???? ??? ?????. ????? ????? ?? ??? ???? React ????? ?????.

npm start

?? ??? ???? ?? ??? http://localhost:3000/?? ?????.

?? ???? ??? ???? ???? ???? ???? MailDev? ???? ??? ???? ??? ???? ???????.

??? ?? ??? ???? ????? ??? ???? ???? ?? ?? http://127.0.0.1:1080/#/? ???? ???? ?? ???.

? ??? ?? ???! ????!

??? ????? ??? ? ?? ??

?? ?? ???? ??? ???? ?????, ??? ???? ????? ??? ??? ??? ? ???? ???? ??? ??? ????.

• ??? ??? — ??? ? ???? ??? ?? ???? ???? ?????
• ??? ? ?? ??? — ?? ?? ??? ??? ??? ???
• ??? ?? ?? — ??? ?? HTML/CSS ?? ??
• ?? ??? ?? — ??? ?? ??, ?? ??? ?? ??? ?????
• ??????? ??? — React, Angular ? ??? ? ?????? ?????.
• ??? ??? ?? ??? - ????? ???, ????? ????? ?? ???? ???? ?????

??

?? ??? ??? ??? Unlayer? ?? ??? ? ?? ???? ??? ??? ???? ????? ?? ???? ?????. ?? ?? MailDev? ???? ??? ?? ???? ????? ?? ? ??? ??? ??? ????.

?? ??? ?? ?? ???? ??? ???? ?? ??? ??? ?????. ???? ??? ?????!

---

LogRocket: ????? ???? JavaScript ??? ? ?? ??????.

?? ???? ?? ??? ?????. ??? ??? ? ?? ????? ??? ???? ?? ? ?????.

LogRocket? ???? ??? ??? ??? ??? ???? ??? ? ????. ??? ????? ???? ???? JavaScript ?????? ?? ??? ??? ???? ??? ??? ???? ??? ???? ??? ? ?? ??? ?????.

LogRocket? ?? ??, ??? ?? ??, ?? ??, ?? ??? ??? ?? ???? ??/??, ???? ????? ? ??? ?? ??? ?????. JavaScript ??? ??? ???? ?? ?? ?? ?? ????!

??? ??? ???.

? ??? ??? ??? ?? ??? ?? ???? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!