You Can Create Beautiful Modern Emails With React!

Check out my Full Stack Next 13 Course 🔥
developedbyed.com/
Let's get social 👇
/ developedbyed
Check out react email here
react.email/
resend.com/
🛴 Follow me on:
Twitch: / developedbyed
Twitter: / developedbyed
Instagram: / developedbyed
Github: github.com/developedbyed/
Discord: t.co/NDJAFoHgoE
#programming #react

[@developedbyed]

Sorry to keep delaying the Astro video, it will be good I promise 💖 So how do you guys do emails? I think react-email looks quite promising tbh and I will keep my eyes on it

[@49thparallelgaming]

What monitor do you use that is off to the side in the video ?

[@IronShorts94]

hello sir I am from India , I always watching your videos .

[@actioN1337]

I was playing around with it a few days ago. It's pretty cool!

[@Brlitzkreig]

You have such a lovely personality. You always put me into a better mood!

[@CottidaeSEA]

If you were around back in the early 00s, you'd already know how to create emails. Tables, baby!

[@badcatdesign]

or perhaps more accurately, tables within tables within yet. more. tables. 😭 soon though, once the new outlook render engine takes over, I hear tables will be a thing of the too recent past-- let's hope.

[@airforcerawker]

@@badcatdesign I'll believe it when I see it...they've been super stubborn about it for years.

[@CottidaeSEA]

@@badcatdesign Honestly, I don't find it all that bad even now. You can't use convenient stuff like flex or grid, but using tables and inline elements properly, you'll still be able to achieve nice results. Unless you need overly specific positioning, multiple tables isn't really necessary. You can also use some good old deprecated HTML attributes as they all have good support to adjust the sizes of the columns. I think the issue is more that it's kind of a lost art since modern CSS is far more convenient to use as you can make broad, sweeping adjustments far easier, instead of using inline-styling for each element. Some of the things that were kind of tricky like positioning details also became a lot easier with position: relative and position: absolute. Also, I do want to be optimistic about the new render engine, but just like IE11 was what held web development back, iOS is the new IE11. Now it's an entire operating system that is problematic because they enforce usage of their own components even in a browser like Chrome, which means the same version of Chrome can be completely broken just because of the operating system.

[@MrBa143]

@@CottidaeSEA Oh boy i love me some tables. Been the designated email coder at work and i've gotten lost in my nested tables so many times. I've resorted to basically just make emails that look pretty on outlook, gmail & spark, and then every other client will get what they get. Some clients are simply impossible (windows 10 mail desktop app) just renders the text and says fuck you to everything else.

[@CottidaeSEA]

@@MrBa143 Yeah, just like with browsers you kind of have to choose how compatible you want things to be.

[@nyk_builderz]

Great video, Ed!

[@couragic]

Hmm, you have subfolder “strapon” in “LEARNING” folder.. do you plan make a video on that ? ;)

[@alexg7282]

Thank you ! Very useful

[@BG-fo4si]

This is super helpful

[@devkaul]

That''s pretty neat!

[@EdrisRanjbar]

love your video maaaan. grrreat.

[@ricardovazquez2274]

First thing i heard about html emails, theres a lot of opportunities to get hired in this, any change to get a course about this?

[@eliyahutarab4862]

Thank you for that, can you do something with webRTC and React

[@Ben0Bertels]

"Hello there... Jonathan...hmm, fuk it Jonathan" 😂

[@mr__atiur]

Nice🎉 thanks bro

[@AnkitKumar-tp8hc]

How can we add media queries in react-email?

[@tadakuniyasuda8214]

wow did you upgrade quality of video? you are even more beautifuler than usual

[@icoderdev]

Thanks ❤❤❤❤❤

[@pavel294]

Hi, please is there any diference when I use , tags instead of importing and using it like you?

[@_DavidHimself]

Because you're using the @react-email package, you want the components they are exporting instead, as it may have logic inside the component that makes things work nicer with the email. Using basic tags will just give the basic element without anything fancy

[@Rodrigo-nx4fg]

is there a way to just export the react code in html with tables? (for use it in another mailing platform)?

[@vincentnthomas1]

You can render it whereever, for exemple aws ses

[@KaranSethia24]

will this work with plain react and express?

[@gayashanmadhuranga3375]

thank youuuuuuuuuuuuuuuuu💗💗

[@kennedyfreitas7548]

can i create a newsletter using this?

[@gustavoh5143]

can i create a e-mail using it and then send it by my api?

[@konstantinreut2577]

TypeError: Cannot read properties of null (reading '1'). This error message appears when I choose one of the email template. Anybody knows how to fix it?

[@sanderluis3652]

SLOOOOOOOOOOOOOOW with tailwind omg!

[@chinmayghule8272]

Which VS Code extension gives the size of the imported components? (the 'gzipped [X]kb' part)

[@pratikpods2568]

wix.vscode-import-cost

[@aniketdatta7541]

Import Cost

[@camcamspamspam]

Ooo!

[@weirddev]

Sometimes the email sent does not look like the preview

[@BukkyOdunsi]

I love you man

[@nileshrathod2163]

Hi buddy, What extension you should used for VS code Theme?

[@benjohnson5164]

Anybody else running into Next 13 expecting the email template component to be flagged "use client," and being blocked from rendering the component in the API endpoint in your Resend request? This is giving an error: "Attempted to call the default export of from the server but it's on the client. It's not possible to invoke a client function from the server, it can only be rendered as a Component or passed to props of a Client Component." Pretty new to Next so might be an easy fix, but it's got me stumped today. If I run a Test Email SSR component without react-email/components happening I get everything working as expected, so I know it's the client vs server thing causing the issue.

[@aymanechaaba]

I got the same error, he invoked the function which was not how it was done in the docs. they added the component as an html tag.

[@clarinet800149]

Is there a benefit to using this over MJML?

[@airforcerawker]

Nope. IMO it's overly complex...email development isn't web development. It's cool but not necessary.

[@siddhant2002]

MJML is all you need

[@MyBaBB]

That's a Goody , 👍

[@backonrun626]

❤

[@vladrileynavilys]

Hi, can you make a video on how to send emails? it's for my mom. Tanks! Bye!

[@IStMl]

i think you need a stamp first

[@sherwinhulley4921]

Poor Jonathan lmfao hahahaha!

[@capybarararara]

30mb weight library...

[@StephenProvenzano]

As an email dev of 11 years, please test your renders on litmus or email on acid before sending any emails. This isnt going to be a magic bullet.

[@eseseis7251]

or avoid everything and write it manualy anyway. mda

[@proteus1]

Be better if you slowed down and researched before doing the video.

[@FilipLapvetelainen-wq2wq]

I wonder what Jonathan did to you 🤣

[@MatteoSoresini]

amazing video but with only react.js won't work

[@dev_franqqi]

Second

[@RMCProductions]

who?

[@dev_franqqi]

@@RMCProductions me

[@RMCProductions]

@@dev_franqqi no who asked

[@dev_franqqi]

@@RMCProductions go and ask your grandfather

[@developedbyed]

Hahahaha

[@Misterbobbie]

Why would you decide to use TS instead of JS in a JS library, this is fucked.

[@davidewing6833]

🤔Hmm. I don't like that their styling and creating layout for these email templates using HTML tables.

[@cahva2]

Well you kind of need to or they wont work in various email clients. In email html you need to use tables, inline styles and all those goodies from late 90's

[@airforcerawker]

All you need is MJML to get started. Much simpler than using React for email. Email is simple. It's not web development.

[@jameslindley1564]

Why do you try and simplify everything. In a corporate environment nothing is as simple as you state 😢

[@Not_Yours_Princess976]

we are graphics designers if you want any service like thumbnails, video editing so contact us