2024 에 React 이메일 코드 예시 보내기
HTML, CSS 및 JSX 템플릿, 예제 및 SMTP 프로덕션 준비 통합이 포함된 React 웹 앱 이메일을 보냅니다.
- Search page
- Table of Contents
설치 및 요구 사항
당신은 설치해야합니다 @react-email/render 그리고 nodemailer npm 종속성:
npm install @react-email/render nodemailer
소스 코드 및 예제
다음을 사용하여 이메일 템플릿 만들기 .jsx 또는 .js 파일:
// email.jsx
import * as React from 'react';
import { Html } from '@react-email/html';
import { Button } from '@react-email/button';
export function Email(props) {
const { url } = props;
return (
<Html lang="en">
<Button href={url}>Visit our website</Button>
</Html>
);
}
이 예에서는 다음을 사용합니다. 메모 메일러 도서관과 공식 후원사 이메일 전달 아웃바운드 메일을 보내고 미리 봅니다.
당신은 필요합니다 비밀번호 생성 아웃바운드 메일을 보내려면 – 다음을 따르십시오. 사용자 지정 도메인 SMTP 가이드로 이메일 보내기.
// app.js
import { render } from '@react-email/render';
import nodemailer from 'nodemailer';
import { Email } from './email';
const transporter = nodemailer.createTransport({
host: 'smtp.forwardemail.net',
port: 465,
secure: true,
auth: {
// TODO: replace user and pass values from:
// <https://forwardemail.net/guides/send-email-with-custom-domain-smtp>
user: 'you@example.com',
pass: '****************************'
},
});
const html = render(Email({ url: "https://example.com" }));
const options = {
from: 'you@example.com',
to: 'user@gmail.com',
subject: 'hello world',
html
};
transporter.sendMail(options);
앱을 실행하여 이메일을 보냅니다.
node app
이제 당신은 갈 수 있습니다 내 계정 → 이메일 실시간 이메일 전송 상태, 이메일 전송 로그 및 HTML/일반 텍스트/첨부 파일 미리보기를 볼 수 있습니다.
추신 🎉 당신도 할 수 있습니다 브라우저 및 iOS 시뮬레이터에서 이메일 미리보기 그리고 Node.js로 이메일 템플릿 만들기.