React Email

Was ist React Email?

React Email ist eine Sammlung ungestylter E-Mail-Komponenten zum Erstellen von E-Mails mit React und TypeScript. Das Ziel ist es, die Erstellung von E-Mail-UIs zu erleichtern, indem wiederverwendbare Bausteine und Muster für die Markup-Zusammensetzung bereitgestellt werden.

Die Bibliothek enthält Beispiele, die zeigen, wie man gängige Teile einer E-Mail (z. B. Dokumentstruktur, Layout-Container, Text, Bilder und Buttons) zusammenstellt und dann für den Einsatz in einem E-Mail-Workflow rendert.

Wichtige Funktionen

• Ungestylte React-Komponenten für E-Mail-Layouts: Setze E-Mail-Strukturen mit Komponenten wie Html, Head, Body, Container, Section, Text und Img zusammen, um Styling und Layout zu steuern.
• Tailwind-basierte Styling-Option: Verwende einen Tailwind-Wrapper, um Tailwind-Klassen auf Komponenten anzuwenden (oder wähle Inline-CSS als Alternative).
• Beispiele und kopierbarer Starter-Code: Starte mit Vorlagen wie email-template.tsx und ersetze die Platzhalterdaten durch deine eigenen.
• Kompatibilitätstests für gängige Mail-Clients: Nutze integrierte Checks, um die HTML/CSS-Unterstützung in Gmail, Apple Mail, Outlook, Yahoo Mail, HEY und Superhuman zu prüfen.
• Vor-dem-Versand-Tools für Zustellbarkeit: Führe Tools wie einen Link-Linter (validiert Links), einen Kompatibilitäts-Checker (prüft Client-Unterstützung) und einen Spam-Score-Analysator (schätzt Spam-Wahrscheinlichkeit) aus.
• Konvertierungs- und Integrationsunterstützung: Konvertiere React-E-Mail-Code in HTML oder Plain Text und sende über gängige E-Mail-Provider wie Resend, SendGrid, Amazon Web Services und Postmark.

So nutzt du React Email

1. Erstelle ein E-Mail-Projekt mit dem bereitgestellten Starter-Befehl: npx create-email@latest.
2. Erstelle eine E-Mail-Vorlage (z. B. WelcomeEmail) in einer .tsx-Datei, indem du React Email-Komponenten kombinierst.
3. Style die E-Mail mit Tailwind-Klassen (über den Tailwind-Wrapper) oder Inline-CSS, je nach deinem Workflow.
4. Vorschau und Validierung des Ausgangs mit dem integrierten Linter, Kompatibilitäts-Checker und Spam-Score-Tools vor dem Versand.
5. Exportiere und sende, indem du die Vorlage in HTML oder Plain Text konvertierst und deinen E-Mail-Provider (z. B. Resend, SendGrid, AWS oder Postmark) nutzt.

Anwendungsfälle

• Marketing- oder Onboarding-E-Mails mit wiederverwendbaren Vorlagen: Erstelle eine Willkommens-E-Mail einmal (mit konfigurierbaren Props wie username und company) und wiederverwende die Komponentenstruktur in Kampagnen.
• Teams, die E-Mail-UI über Produkte standardisieren: Halte gängige Layout-Primitiven (Header, Footer, Sections, Trennlinien, Grids) konsistent durch React Email-Komponenten in mehreren Projekten.
• Developer-Teams mit besserem Client-Kompatibilitäts-Feedback: Führe den Kompatibilitäts-Checker aus, um die Leistung eines HTML/CSS-Ansatzes in gängigen E-Mail-Clients zu prüfen.
• Apps mit E-Mail-Editor: Integriere in einen Editor-Workflow, damit Nutzer E-Mails in deinem Produkt erstellen können, während React Email-Komponenten im Hintergrund laufen.
• Automatisierte Versand-Pipelines: Konvertiere Vorlagen in HTML oder Plain Text und sende über Provider wie Resend, SendGrid, AWS oder Postmark.

FAQ

• Ist React Email gestylt oder ungestylt? React Email wird als Sammlung ungestylter Komponenten beschrieben. Du führst das Styling selbst durch (z. B. mit Tailwind über den Tailwind-Wrapper oder mit Inline-CSS).

• Kann ich E-Mails mit Tailwind oder Inline-CSS stylen? Ja. Die Dokumentation besagt, du kannst E-Mails korrekt gestalten mit Tailwind oder Inline-CSS.

• Welche Validierungs-Tools gibt es vor dem Versand? Die Seite listet einen Linter für Links, einen Kompatibilitäts-Checker für HTML/CSS-Unterstützung in gängigen Clients und einen Spam-Score-Analysator auf.

• Welche Ausgaben unterstützt React Email? Es kann React-E-Mail-Code in HTML oder Plain Text konvertieren.

• Über welche E-Mail-Provider kann React Email versenden? Die Seite nennt Integrationen mit Resend, SendGrid, Amazon Web Services und Postmark.

Alternativen

• Einfache HTML-E-Mail-Vorlagen: Sie können HTML mit Tabellen und Inline-Styles manuell erstellen. Das ist direkter, aber Sie verlieren den React-Komponenten-Workflow und die integrierten Linter-/Kompatibilitäts-Tools.
• Andere komponentenbasierte E-Mail-Vorlagen-Bibliotheken: Suchen Sie nach Bibliotheken, die wiederverwendbare E-Mail-UI-Primitiven in Codeform (statt statischer Vorlagen) bieten. Diese unterscheiden sich durch den Umfang der Tools für Kompatibilitätsprüfungen und Zustellbarkeitsscores.
• E-Mail-Design-Tools mit Drag-and-Drop-Editoren: Diese konzentrieren sich auf visuelles Editing für Nicht-Entwickler, integrieren sich aber möglicherweise nicht so nahtlos in eine React/TypeScript-Codebasis oder bieten keine Plain-Text/HTML-Konvertierungs-Workflows.
• Serverseitige E-Mail-Vorlagen-Engines: Templating-Systeme können HTML-E-Mails aus Vorlagen und Daten generieren, bieten aber typischerweise nicht dieselbe React-Komponentenstruktur und clientenspezifischen Prüfungen wie hier beschrieben.