React Email 2.0 Tutorial - Create Beautiful Emails Using REACT!

sending HTML email is a big pain a lot of developers are clueless about how to create HTML emails that's because a lot of different things we do as a web developers writing HTML writing CSS making everything work does not work necessarily in the email space what happens is that a lot of different things don't work and what ends up happening is you send an email to a customer and it doesn't look uh consistent on different email providers like apple mail Gmail and whatnot so it's always a pain so how do we fix this issue let's introduce react email 2.0 so react email 2.0 was recently announced and I have used it just now so I think it's a pretty cool thing it manages everything for you it lets you build entire email using react and it just works so you can do your webd things in an email and it just works and you can get the HTML output for it and you can just send it to your customers or just whoever you want uh through your code so yeah let's get let started with react email 2.0 all right so we are in the react email documentation it says the next generation of writing emails a collection of high quality unstyled components for creating beautiful emails using react and typescript so this is the command to just create an application we won't be using that because let's see first of all let's explore components right here now you'll see an introduction why we believe that email is an extremely important medium for people to communicate however we need to stop developing emails like 20 2010 and rethink how email can be done in 2024 and Beyond email developments need a re revamp a renovation modernized for the way we build web apps today getting started react email is designed to be incrementally adoped so you can add it to most of the code bases in a few minutes and that's what we are going to do like think about it would you create a separate project just for react email or would you add react email to your already built web application where you have all of those things and you you can simply run a code on the server to send out emails using react email I think the latter option right of of course if you want to make a completely new react email project you can go to the automatic setup but we are going to choose the manual setup in here so before that let's look at the components we have the HTML component uh pretty straightforward then we have the support So for each component we will have support here so let's look at code block code block you can just have a code uh and then you can simply have a code block component just pass in the code and if you pass in line numbers it will just have line it's just pretty cool and uh if you want you can have theming too and there is support for this yeah and you have a lot of different things um images HR I know these things are pretty limited because that's just what emails support right now uh you you also even have option for Tailwind like this is like just a playground for you just do whatever styling you want to and the things that will work will work I don't think the animations should work here but um I think you can simply use Tailwind to do whatever you want at this point so yeah uh let's get started and let's try to make an email using react email so I'm just going to go into manual setup it says create a new folder with npm project it says add new dependencies but we will do it in our way we are going to create a next JS application representing our entire code base like uh let's try to do it in a more realistic manner so I'm going to do pnpx create next app and I'm going to say react email demo and yeah uh let's we are going to use typescript es L here Tailwind yes SRC directory yes app yes yeah and let's wait for this to finish and then we will install some dependencies so we need this one we are using pnpm so I'll just click on pnpm and copy this let's go back and let's go inside react email demo let's install the dependencies we have one more we want to install because uh we are using Tailwind also here uh so let's go to Tailwind and uh we need this one we already have the components one so we need this one so I'll just copy it let's go to terminal let's paste this should oh we are using npm right so paste hello n hold on I missed up here so let's just get the pnpm command I'm just going to copy this just going to paste this perfect now we can do code Dot and pnpm Dev you know what we don't want to do pnpm Dev right now because uh there are two Dev servers one is for nextjs and one is for react email and the react email Dev servers let you lets you preview the emails and even send it to you in your inbox so we will test the next JS application later but uh think of this this um Dev server to be like completely different from your nextjs thing but you can add it to you you can add your react ml thing to basically any project it doesn't even have to be nextjs it can be like anything V or anything you want like it's not even a compulsion now what we need to do we need to create a new emails folder here and now we can start creating our email so I'm going to create our first email called welcome. TSX and this is going to be a component a normal react component except uh let's rename it to welcome and we do not need uh div here since we are using react email we do not use HTML tags here we will let react email handle everything and we will not be interfering with HTML because we know that uh HTML might break there like just let react email handle it so what do we do first of all we will have the HTML tag which will come from hm hold on I think we need to import it here so import from react email components and we will have HTML perfect now we can have HTML then we can have a head excuse me yep head and this will be a self Closing one and then we can have a Tailwind or first of all let's have a preview this preview will happen uh before even opening the email so like uh beside the subject there's a small preview of the email like what the email might contain this is the this is this preview so next steps for your account and then we can use Tailwind if you don't want to use Tailwind feel free to just omit it and just use like inline stylings but we are going to use Tailwind in this tutorial because we all love Tailwind anyways tailwind and everything you want using T should be enclosed using this just ignore copilot we are not going to do anything with it so how do we create a div here like in react email what is a div so we use a container component from react email let's wait for for this to load container so this is basically a div and react email thing so yeah and now let's give this some classes hold on first of all before the container we Al we do need a body tag right we haven't even created a body right now body and within this we can have the container but for body we can give some class names uh which can Define The Styling I want to have the BG [Applause] right um and text black and font Sans by default it uses the ugly font so I just use like font Sans uh but I want to mention here that the BG white is the background color is not really respected by all email clients like during my testing I had just found some inconsistency which we will see in this tutorial as well so stay tuned till the very end and uh yeah in this container what we want to do uh uh let's make it so that it's in center and everything is good pretty much aligned uh I'm going to have um hold on I'm going to have this class name I'm just going to paste this perfect and then inside the container I'm going to have a few things like buttons and stuff so I'm just going to have this text uh so first of all The Heading is uh heading component because H1 doesn't work here and text uh it can translate into a ptag so yeah let's wait for this to load I don't know why it's taking so long but it should be here pretty soon perfect and button hello hold on I just imported myself this is definitely not reliable perfect and now yeah um your email is pretty much ready now the thing with this is that I don't think the Border works but let's see uh why are there two errors yeah because we imported button two times thank you vs code um yeah now let's go to local 3,000 so I'm just going to get our Chrome here I'm just going to throw it into a different um desktop perfect now we can uh first of all we need to actually uh run the dev server right so how do we do that we can go into package Json and we are going to create a new script I'm going to call it email Dev not Deb it should be Dev and the command should be run is like email Dev that's that's that's all and now we can simply go to our terminal and we can say pnpm uh email Dev now this should run the dev server for react email and we should have this URL which is Local Host 300 let's go and paste this should not take a lot of time I'm just going to wait my system is not doing its best today perfect now we have uh you can see all of those things like link to docs but the main thing here is that welcome. DSX file so it's taking some time but yeah uh this is a test email welcome to test email welcome to to a platform we are glad to have you please press the button below and then we have a button which we style using Tailwind so it's like unstyled so if you use button it gives you a normal link so you need to style it yourself the thing is that you can freely use Tailwind here like just become a web developer just do whatever you want the thing is that the things which don't work will simply don't work like the Border I think it's not working I'll try to make border two and see if it works um this should Auto reload uh yeah the Border simply not there but uh what I think we can do is uh we can have an HR after this uh so let's do it HR hold on let me have an HR here yeah and then we can have another text uh from company and I can just I don't know why my thing is not working properly but anyways let's have a class name here and we I'm going to have text Gray uh let's have like text 400 and I think let's see if it works or not H hello yeah I think it does yeah so the thing with here is that it's giving too much Gap yeah because it's myy 8 so I'm just going to change it to my4 and this should be a pretty solid email perfect this is just an email and we can even send it we can test it out but I want to do something more let's go back here I want to test the code block thing out because we just checked it out and I think it's pretty cool so we already have the installation done so what do we do we have a code block so I'm just going to copy this one we are not going to write a new one and uh let's have it here and now I'm just going to use the code block just before the HR you know what just about the button uh code block code and I'm just going to pass the code here H what does it require I think yeah we need to pass in the theme uh Dracula is from oh actually we do need to install a package hold on I'm not sure if it will work or not uh code block is from this I don't think we need to install but oh yeah we need to pass all of the different things but uh do we get the them Dracula from here Dracula oh yeah so you do not need to install another uh Library I'm testing this component right now in front of you so this is even testing phase for me so I want line numbers perfect what else does it require H language yeah of course so the language here was JavaScript so I'm just going to have it perfect now let's save let's go back let's wait for this to reload it's taking a little while perfect now we have no I mean it's it's it's fine like you do not expect to like create such emails by your own this might not be the perfect but this might be the one which like email supports and it's not looking that bad what you can do is uh you can simply have a class name here I guess let's see if this works oh so you do not have a class name thing here so you can simply um I think you can uh have a class name and we can just say empty 4 and that should give the button some space hold on yeah now it looks good and now we can send it now what I want to do is I'm going to send this email to myself uh I'm going to use my um business email I guess so hey at aura. codes and I'm just going to leave the subject this uh this is powered by recent and they will send the test email to us just going to click send and wait for it to send me email sent check your inbox I'm going to open my Apple Mail uh this is powered by Apple mail so that's why I wanted to show you how it looks in Apple Mail itself H so I do have the email open right here you can see it on the screen it says this a test email uh it is kind of making this scroll uh it's only because of the code block though if you remove the code block it will not and then we have this link but the thing here is that it has changed all the colors right um I think this is an Apple Mail thing because if I test this with Gmail I'll show you hold on so I'm just going to replace this email with my Gmail so this is my personal email address and I'm just going to click Send perfect perfect and now I'm going to open Gmail on my browser and I'll show you it's on a different browser so please give me a second new blank window gmail.com give me a second please Perfect uh perfect this is the thing I think it is giving me like a purple thing because we already have the same subject so I T tested before so I'm just going to have uh testing YT video I'm just going to send it again and let's see this time around I'm just going to wait for the email I'm not going to show you my inbox of course but let's wait for the email I do have the email now uh so here this is a test email now the code block and everything looks fine and then we have a go to dashboard function which links to Google and then we have an HR tag and we have the from company thing so yeah in Gmail it looks pretty much fine in apple it inverts color like I think it's based on your theme or something but uh I mean it works right so yeah uh that's how you can use react email all right so that was how you can create emails there is a few more things I want to show you like how you could use your code to generate this email and how you could generate HTML instead of just sending direct react because of course your mailboxes doesn't understand any kind of react they understand HTML so we're going to see that so first of all I will show you the manual version so uh you can simply go to the code tab here and you can find uh the actual code for your uh email so I can go to the HTML Tab and you will file you will find this HTML thing you can simply copy paste it uh wherever you want you can even create an HTML file and paste this content or you could create a script that automatically generates that uh but how do you generate HTML through code we are going to do that right now so imagine that you have an excess application and you want to send a welcome email after registration uh we don't have that logic created but I want to show you how you could generate this HTML inside your NEX application so that you can send it using any calland like if if you go here you can see Integrations and there there is recent so you can use recent to send or you can go old school and use node Miller or like there are other things you can use but um other than recent all of the other things basically use uh one thing in common which is like rendering the react email component into an HTML and then sending it to back to the actual email so that's how it works so I want to show you how that really works out so I'm going to uh kill the dev server here hold on uh let me get something work for fine perfect and uh now we can do pnpm Dev to actually run the next CH thing because we are now focusing on how to get this done in next here so perfect now I'm just going to go into the SRC and app and I'm going to go page. TSX so this is a server component imagine that I am I just want to generate the HTML here and then I want to send it to some like after the component is just loaded so how do we do this is not the ideal scenario I know but this code you can basically put in any function and I love how react email has configured it so that you can make it work anywhere and like no useless providers like not making everything dependent on just one framework I just love it so what you can do is you can simply say const HTML uh remember this is a server side component so yeah uh now we can use a render function which is from react email components and we can pass in the component here so welcome uh perfect now the thing here is that we don't have any props here but if you create any props here uh in welcome. TSX and if you just have any props and uh if you want to have Dynamic name here so like if you want your aura so welcome to test email um name so if you want the name here so I can simply get it from the props name and uh I also want to Pro the type so name should be string perfect now if we go back here we can pass in the props here so I can passing the name Tera and now your email will be personalized for that specific person and I just love that and there is one more option you can pass here is pretty so if you want pretty HTML like uh after you save a file and preter does IT jobs just like that you can pass in pr. through but if you want a minimized version you can just omit this and it will give you a pretty much minimized and unreadable thing so yeah and now what you can do is you can just console loog the HTML uh in ideal case you would want to send this HTML to the user through email but for now we just going to console log it out um yeah now let's go to our browser and I'm just going to go to Local Host 3000 let's wait yeah my my my system doesn't want to work today it seems like yeah now if we go back to a console we remember this was a server component so all the console logs happening will be in our server so we already have the HTML I mean it's not pretty yet because like it's in know terminal so it's kind of messing everything up but you have this HTML right so you just generated the HTML for an email of react email inside of nextjs and now you can use that HTML to send it to your user and that's how react email works and I just love it so yeah in this video we saw how you can use react email to create emails using react and then send it to your own inbox and check how they look I like the package there lot of beautiful components and um it it seems like your emails won't ever look like only text emails click on this link to verify and then you have a long link um yeah whatever it's like as the as the website said it's very 2010ish we are living in 2024 right yeah anyways if you like this video make sure you click the like button hit the Subscribe button and make sure you click the Bell notification as well and share this video with your friends so that they enjoy the same level of knowledge that you do right now so yeah if you have any suggestions about any content any type of Mega builds you want me to make like some kind of clones or something make sure you leave them in the comments below I'll make sure to make that happen so yeah that's it for this video I'll see you guys in the next one bye

Channel: Atharva Deosthale

Views: 876

Keywords: programming, programmer, reactjs, react, react email, react email tutorial, creating emails using react, emails made easy, html emails easy tutorial, using tailwind in emails

Id: UFesfjiH84I

Length: 23min 48sec (1428 seconds)

Published: Tue Feb 20 2024