DEV Community

Cover image for React Email First Look πŸŽ‰

React Email First Look πŸŽ‰

Dipesh Jaiswal on January 30, 2023

At some point it feels like every developer ends up writing some kind of emailing system. It could be something as simple as a single email for som...
Collapse
 
zenorocha profile image
Zeno Rocha

This is Zeno, one of the creators of React Email.

What a great article, thanks for taking the time to write it!

Collapse
 
dipeshjaiswal profile image
Dipesh Jaiswal

Thanks, Zeno! I'm thrilled that you enjoyed my article.

Collapse
 
ravavyr profile image
Ravavyr • Edited

This sounds like a nice idea, until it really really isn't.

  1. Do not create custom HTML emails using React. We literally have dozens of services [mailchimp, constant contact, icontact, mailersend, mailjet, and so on and so on] that have drag and drop email builders that are made to work across devices and email programs.
    Writing your own means you're asking to get complaints about layout issues, or worse getting tossed into the spam folder for bad structure or bad css or bad whatever.
    BTW: mailersend.com is free up to 12k emails/month.

  2. The second part is the even bigger problem. Nodemailer is just as bad as using PHP's native mail() function. You are choosing to send emails directly from your one server. This means your unknown IP is gonna send out emails and you probably don't have your DNS records setup for it. You need an SPF record, a DMARC record and more in some cases to verify the domain sendin emails is your domain and on top of that that example doesn't set headers for nodemailer so stuff like "reply to" or if it's text or html content aren't there either. This is instant-to-spam for many firewalls.

So, yes, this is fun if you're gonna write a tool that sends yourself a handful of automated emails and you whitelist it in your own email client, but this is very bad practice for any business website or site that wants to grow its traffic.

A late 3 i just thought of.
Some will go "but what about dynamic emails i need to send from code!"
Most of the services i listed above let you design templates with drag and drop tools and you can set variables in them that you pass to them via their API. So your code will process data, create some objects and send that data to them and they generate and send the emails. Just wanted to clarify that.

Collapse
 
bukinoshita profile image
Bu Kinoshita

Most of drag-n-drop email builders are buggy or limited. We want to make it easier for people to create, preview, and test emails with React Email, the same way you build websites.

We built our react email components following best practices to work on the majority of the emails clients, even the new ones like Supehuman or Hey. We test our components for compatibility and spam issues.

We also have been using React Email at Resend and sending thousands of emails weekly and monitor for bounced/spam emails.

That being said, a lot of people are using React Email in production and we didn't get any complains yet. There's a lot of things we still want to improve and explore ✌️

Collapse
 
ravavyr profile image
Ravavyr

You are not wrong. Most sitebuilders/email builders are buggy and limited.
I'll tell you that mailersend is a good one. I'm trying out a few others, and really more often than not it's not about the email design itself, you can do that in code, but it's about using their SMTP service to send the emails so your emails don't go into spam and don't get blocked by firewalls. The worst being aol, outlook, and yahoo mail.

Looks to me like Resend is trying to compete with these services and uses React Email for building emails. Nothing wrong with that. I'll have to check it out eventually.

As for complaints, well those come at some point to all services, so good luck :)

Collapse
 
stevereid profile image
Steve Reid

Wow! I was unaware of this. Thanks for the heads up.

Collapse
 
adamthedeveloper profile image
Adam - The Developer

Thank you so much for sharing this!

Collapse
 
naucode profile image
Al - Naucode

Hey, that was a nice read, you got my follow, keep writing πŸ˜‰

Collapse
 
dipeshjaiswal profile image
Dipesh Jaiswal

Sure, Thankss πŸ™ŒπŸ»

Collapse
 
ashishxcode profile image
Ashish Patel

What a read man πŸ”₯

Collapse
 
dipeshjaiswal profile image
Dipesh Jaiswal

Thanks ManπŸ™ŒπŸ»

Collapse
 
anandhraja profile image
Anandh-Raja

Can we expect two sync
whenwe create and sync tasks from oul;ook to ui and ui to outloook