How to Use React Email with 00: A Guide for Developers Who Are Sick of VC-Funded Email Services

Listen up, coders. Are you tired of wrestling with email templates like they’re some kind of arcane magic? Sick of throwing your hard-earned cash at VC-funded email services that promise the moon but deliver nothing because of constant downtime? Well, buckle up, because we’re about to show you how to break free from the shackles of overpriced email solutions and take control of your destiny.

React Email: Because Emails Are Stuck in the 90’s

First things first, let’s talk about React Email. It’s like React, but for emails. Mind-blowing, right? It helps you write responsive code without thinking about tables. Here’s the deal:

  1. You already know React (if you don’t, what rock have you been living under?)
  2. You can now use that knowledge to create emails that don’t look like they were designed in dreamweaver
  3. It’s got TypeScript, so you can catch errors faster than a Silicon Valley startup burns through cash

Now, I know what you’re thinking. “But what about jsx.email? I heard it’s better!” Look, champ, this article is about React Email because it’s popular, okay? But between you and me, jsx.email is the new hotness. Check it out if you want to be ahead of the curve.

Enter 00 (Double Zero): The Robin Hood of Email Services

Now, you could pair React Email with some VC-funded email service that’ll bleed you dry faster than a leech on coke. OR you could use 00, the self-hostable, pay-once email sending service that lets you bring your own Amazon SES credentials. It’s like BYOB, but for email infrastructure. Either way it’s a party.

Why 00? Because:

  1. It’s self-hostable. No more trusting your precious emails to some Silicon Valley server farm.
  2. You use your own Amazon SES credentials. It’s like having the keys to the email kingdom.
  3. You pay once. That’s right, no more monthly fees that help you fund a teams avocado toast addiction.

Setting Up React Email: It’s Not Rocket Science

Alright, let’s get this party started. Here’s how you set up React Email without selling your soul to the VC devils:

  1. Install the stuff you need:

    npm install react-email @react-email/components 00-js

  2. Create an email template that doesn’t look like it was designed in 1997:

    import { Html, Head, Body, Container, Text, Link } from '@react-email/components';

const WelcomeEmail = ({ name }) => (
  <Html>
    <Head />
    <Body>
      <Container>
        <Text>Hey {name}, you absolute legend!</Text>
        <Text>Welcome to our platform. Try not to break anything.</Text>
        <Link href="https://example.com">Get Started (if you dare)</Link>
      </Container>
    </Body>
  </Html>
);

export default WelcomeEmail;

  3. Turn that beautiful React component into actual HTML:

    import { render } from '@react-email/render';
import WelcomeEmail from './WelcomeEmail';

const html = render(<WelcomeEmail name="Robinhood" />);

Sending Emails with 00: Because Who Needs Overpriced Services Anyway?

Now that you’ve got your React Email template, it’s time to send it using 00. Here’s how you join the rebellion:

  1. Set up 00 by following the docs. It’s so easy, even your aunt could do it (maybe).

  2. Use the 00 API to send your email. It’s like magic, but without the smoke and mirrors:

    import { DoubleZero } from '00-js';

const zero = new DoubleZero({
  baseUrl: 'https://your-selfhosted-00.com',
  token: 'your_api_token_not_your_lunch_money',
});

const html = render(<WelcomeEmail name="Code Ninja" />);

await zero.emails.send({
    from: 'you@yourawesomeapp.com',
    to: 'lucky.user@gmail.com',
    subject: 'Welcome aboard the non-VC-funded train!',
    html: html,
});

Pro Tips for the Email Rebel

  1. Reuse Components: Create a library of email components. It’s like Lego, but for emails.
  2. Mobile-First: Make sure your emails look good on mobile. Because let’s face it, who checks email on a desktop anymore?
  3. Test, Test, Test: Use React Email’s preview feature. It’s like a dress rehearsal, but for your inbox.
  4. Handle Errors: Implement error handling. Because sometimes emails fail, just like those VC-funded startups.
  5. Personalize: Use dynamic data in your templates. Make your users feel special (even if they’re just one of thousands).

Wrapping Up

By combining React Email (or jsx.email if you’re cool) with 00, you’re not just creating emails – you’re staging a rebellion against overpriced, VC-funded email services. You get the ease of React for making pretty emails and the satisfaction of knowing you’re not funding someone’s third vacation home in the Hamptons.

Remember, with great power comes great responsibility. Don’t spam, don’t be creepy, and for the love of all that is holy, don’t use Comic Sans in your emails.

Now go forth and email. And if anyone tries to sell you on a “revolutionary” new email platform, just smile, nod, and keep walking. You’ve got 00 now, and that’s all you need.

Made with by technomancy