If you've ever had to build your own email
templates when trying to send an email to a user of your application, you know that
it can be quite tedious and actually difficult to really get right. But now, with tools like React Email and Resend,
we can actually build those emails directly into React itself and have more confidence
in the experience that our users are going to have. So here I have a Next.js application running,
but you do not need to use Next.js for this. The only reason why I'm using Next.js is because
it makes it really easy to create API endpoints in the same project as your React code, which
is going to streamline the entire tutorial video. But this will work with any React application
and any backend, so don't worry about it. So first, let's start by creating some emails
directly into this application with React Email. So what we're going to do is we're going to
go here to our browser, and then we're going to go to react.email, and we're going to press
here the docs at the top right. Here is the documentation of how you actually
get started with React Email. We're going to go here to the getting started
section, and here you have two main options to actually set this up. The first option is the automatic setup, which
is basically going to set up a project from scratch and set up everything that you need. In our case, we're not going to be doing this
because we already have our Next.js application that we want to integrate React Email into,
which is probably going to be the most common use case. So in our case, we're going to go here to
the manual setup. So the first step that you have to do to install
this is to create a directory, which we're going to skip because we already have directories
here inside of our project. So we don't need to do that. But the second step is we need to install
the dependencies. So in my case, I'm using pnpm. So I'm going to copy this command over here,
copy this, go back here to my VS code, open up the actual terminal and paste this command. This is going to install React Email, and
then the React Email components library, which is going to allow us to have access to some
components that we can use to build our emails. Then once that is installed, we're going to
go back here to the documentation. And here we're going to have to add a script
to our package dot JSON, we're going to have to add email dev over here. Now they say to put it as dev here. But in our case, if I go and open up the package
dot JSON, we're going to see that because we are in Next.js, we already have a dev script
over here that we cannot overwrite. So what we're going to do is we're going to
put it under a different key. So I'm going to come back here, I'm going
to copy all of this, come here and then put a comma and paste it. And this is going to be email like this. Instead of that, we're just going to put email. Next, we're going to come back here and we're
going to see that we have to create our first email template. So what I'm going to do here is I'm just going
to copy this code, use this as a starting point. And then we're going to build from there. So I'm going to come back here to my project,
open up the file explorer here. And what I want to do to keep things organized,
I'm going to go here inside of the SRC folder. And I want to create a new folder that I'm
going to call emails like so this is going to be a folder where all of our emails are
going to go so that we can have them easily organized inside of our application. And then I'm going to come here and create
a new file. And we're going to do welcome dot TSX like
so. So this is going to be an actual TSX file
for JSX. And we're going to have this be a react component
that we can paste directly from the documentation over here. As you can see, this is a traditional react
component, we have export default function email. And actually, I'm going to rename this to
welcome, just so that we have it a little bit easier. And this is your typical JSX that you're actually
using to render an actual email. Now the cool thing about react email is the
fact that they actually provide you with some components that you can use to actually build
your email. As you can see here, we're using the button
component and the HTML component directly from react email slash components, we're wrapping
everything in an HTML tag. And then we're putting this button here with
this text, and then this href and then this style property here, this is going to make
it really easy for us to actually use those components to build our emails in any way
that you want. Alright, so that's one of the main benefits
of using react email is the fact that you get access to all of these components. And of course, they can do everything inside
of react itself. And this is very familiar. If you've ever worked with react, if you're
a react developer, which if you're watching this video, you probably are, then this should
be no surprise to you, you should be able to get working with this right away without
any extra steps or any extra complications. The next step for us to do is to actually
preview this email, which we can do really easily with react email. That's another one of its benefits. Traditionally, if you're building emails without
react email, what you would have to do to actually see this email and to actually preview
how this is going to look, you would have to send this email to yourself in your own
inbox, and then open it either on your phone or computer, and then see how it looks there. With react email. However, we can actually spin up an app, which
is this command over here that we put, and we can see a preview of our email directly
in our browser as we're developing. So this is really useful. Now before running this command, we actually
have to do something because react email by default expects your emails to be in the root
of your entire project, which in our case, they are not they are under SRC, and then
emails over here. So what we have to do is we have to tell this
command where our emails are actually going to be. So we're going to come here and do dash dash
dir for directory. And we're going to do SRC slash emails like
so then we're going to save come here, open the terminal and do pnpm email. And this is going to run the actual application
that we're going to be able to use to actually preview our emails. So as you can see, we have localhost 3000. Here, we can just copy this link, go back
here to our browser, open a new tab and paste it. And here in a moment, once this loads, we
actually have our application, right, welcome to react email. And then here in the sidebar, we have welcome,
this is our actual welcome email that we created just earlier. As you can see, we have the button here, it
has a background color black has a foreground color of white. And if you click it, it's going to take you
to example calm, which if you remember, is exactly what we had here. Inside of this welcome, we had a button with
a black background color, a white foreground color color, and it's sending you to example.com. This works exactly as you expect. And we're able to preview this email directly
in the application from react email, right. So this is cool. This is really useful, we can come here, we
can actually see it on a mobile screen, this is how it's going to look. And we can also see the actual code that we
used for this, this is the code of our component coming directly from our react application. And you can also see the HTML that is generated,
which honestly, is a big mess, you have all of this code here, all of these weird styles. If you've ever had to build HTML emails yourself,
you know that it's very tedious, it's a mess. And there are so many restrictions because
the email environment is not the same as the browser environment. So not everything that works in a browser
is going to work there. So the fact that we can do this in react and
actually have it show up here as a preview, also without having to send it to our own
inbox to preview is really great. And that's why you want to use something like
react email to build your emails, especially obviously, if you're using react. Now, there's two more things that I want to
show you. And that's going to be in the actual documentation. The first one is all of the components that
you have access to from react email. So over here in the documentation, you have
this component section, you have all of these components over here. But not just that you have the components,
you actually have an example of how to use them. But you also have a section here on the support,
which is how different email clients actually support these components. Because the worst thing that you can have
for yourself is if you design a beautiful email with some really cool functionality,
and you actually send it to users and their email client doesn't support it. And then all of that work that you did, all
of that cool functionality is never actually going to work and can lead to a horrible user
experience for users when your intention was not to have that in the first place. So you have all of these components here,
you have button, you have a heading, you have image, you have link, you have all of these,
and then the support for every single client, which is going to make sure that what you
built in your react application, the email that you actually see here, you can actually
confidently expect that that experience is going to be the same for the users when they
actually open the email in their actual email client. The second thing is, and this is also really
useful over here at the top of the documentation, you have an example section. And here, if you open this, this is the same
application that we have running. And here you actually have examples of emails
that you can use directly and plug into your application and use as a starting point. And these emails are emails from companies
that you probably know, like Vercel over here, right, this is a template that you can access,
you can go here and see the code for this, you can take this code, put it inside of your
application, and have the exact same email and then send that to your users. Obviously, please don't send this exact email,
make it your own, put your own images and copy and text and whatnot. But you get the idea, you can directly use
this as an inspiration and just send it to your users, right, you have one for GitHub,
which is pretty typical, I'm sure that all of us have received an email like this from
GitHub, we have different things. For example, we have notion here, which is
another popular application, you can look into these and see which ones fit for your
own use case, get the code put into your application, make it your own, and then directly send it
to users. This is really useful, right? So if you're working in React, and if you
have a React application, and you want to send transactional emails or any kind of emails
to your users, use React email, build your own email component, and then use these as
inspiration if you want to. And then you're going to be able to have really
beautiful emails that you can be confident that will look exactly how you expect. And then you're going to be able to send them
to your users super easily as well, which is what I'm going to show you now. So now we have beautiful emails, we know how
to create them, we know how to put them directly in a React application, the next step for
us is to actually send them. If you go back here to the documentation,
over here at the bottom, you actually have integrations. And you have a list of all of the different
integrations that you can integrate React email with to actually send the emails to
right. So we have recent we have non mailer, we have
send grid, postmark, these are all very popular email providers that you can use to actually
send emails with. In our case, we're going to be using recent
because it's the easiest to integrate. And actually React email is built by the same
people over at reason. So they probably have the simplest and easiest
integration to actually implement. So that's what we're going to do. So if we look here, send emails using recent,
what we have to do is install the dependencies. So we're going to have to install the recent
dependencies, then we're going to have to create an email using React, we already did
this, we have our welcome email. And then we're going to have to send an email. And the only thing to do that is we're going
to have to use this recent class, we're going to have to instantiate it with an API key,
which I'm going to show you how to do. And then we just have to await recent dotAnd
then we can directly plug our component right under this react key, we can directly plug
our email component, which is going to be this welcome component here and send that
directly. So the component that we have here is what
actually we're going to send to our users and what our users are going to see when they
open our email in their inbox. Right. So let's do this, let's come back here, let's
go here to pnpm. Let's copy this. And then let's put all of this in our terminal. Let's close this and install recent. One thing that I do want to mention is that
this part over here, this sending the email is going to get done inside of the server
environment. So we're not going to be doing this inside
of a react component, we're going to be doing this on the server. And that's why I'm using Next.js because Next.js
will have it super easy for us to actually create an API endpoint that we can call from
a component and actually send this email there. But it's very important to note that this
is going to happen on the server. So back to our Next.js application, we have
recent installed, then what we're going to do, we're going to come here inside of the
app directory, we're going to create a new folder, we're going to call this one API. And then inside of here, we're going to create
a new folder, and we're going to call this emails, like so. And then here, we're going to create a route.ts
for our actual API endpoint. If this is unfamiliar to you, this is the
standard way of creating an API endpoint in Next.js, you create an API folder, you then
organize it however you want, I want this to be under slash API slash emails. And the route.ts file is the actual file that
has the code, the function that will run your actual endpoints. So we're going to come here and we're going
to do export a sync function, post, and we're going to just declare an empty function. For now, this is going to handle a POST request,
which is the method that we're going to use to send an email to our actual users, then
we're going to come back here to our actual documentation of react email. And we're going to take this part over here. So we're going to copy this, come here and
paste it outside of the function. And then we're going to take this part over
here. And we're going to paste this inside of the
function because this is the actual code that is going to be sending the email. So first, we're going to have to import resend
from resend. So we're going to have to add this as an import. And then here, I'm just going to comment this
out. The reason why we have errors over here is
because we're using JSX notation here, but we are under a TS file, which we can't do
this is incompatible. So for us to actually get this to work, what
we have to do is remove this and we can actually import the welcome from emails slash welcome. And we can actually call it as a function
like this. Because as you know, in React, hopefully you
know this, any react component is an actual function. And you can actually call it directly as a
function, which means that this is totally valid as a syntax. So now we have the basic building blocks to
be able to send our actual email, we have a post endpoint here that is going to listen
on slash API slash emails, which we can call from an actual component. This is then going to use the recent here,
which we've instantiated, obviously, we're going to have to change this key over here,
because this is incorrect, this is probably invalid. And then using that we're going to call the
API, the recent dot emails dot send, and we're going to pass from to subject and then our
actual component over here. Now, of course, we're going to be changing
these values to actual valid values. But this is enough to get us started. So the first thing that we want to do is we
want to actually get an API key to be able to use recent now to get an API key, you have
to make an account with recent. So you're going to want to go to recent.com
slash sign up. In my case, I already have an account. So I'm not going to make another account,
but you want to create an account and then log in to get to the dashboard, I'm just going
to press login here and log in with Google because that is going to log me into my existing
account. Once you've made an account, you should see
a dashboard that looks just like this, then you're going to want to come here to the left,
go here to API keys. And here's we're going to be able to create
an actual API key to use with recent I already have one, I'm not going to use this one, I'm
going to create a new one. So I'm going to come here and press Create
API key, I'm going to give this a name tutorial, I'm going to give this as a permission, for
example, sending access, because I just want to be a little bit more restrictive. And for domains, I'm just going to put all
domains in your case, you're probably also going to have this. But if you want to have it specifically set
to a domain, you're going to have to configure your domains inside of recent itself. So I'm going to come here and press Add. And this is going to create an API key. Now keep now this is important. Keep this in mind, you can only see this key
once, right? So storage safely, I'm just going to copy
this. Once you close this, you're never going to
be able to see this key again. If you lose it, you're going to have to create
a new key and replace the old key with it because the old key is gone. Then once we have our API key copied, I'm
going to go back here to the application. And I'm not going to paste it directly here
inside of here because this is going to be a security vulnerability. You don't want to place API keys inside of
your code directly and commit that to your repository. Instead, I'm going to come here and inside
of the root folder here, I'm going to make a new file dot env dot local. And here I'm going to put I already have a
file like this. And let me just delete this file and start
over. I'm going to create a new file do dot env
dot local. And then here, we're going to do recent API
key. And then we're going to paste our key over
here. This is an environment file. If you're unfamiliar with this, this is actually
the next best way of doing it you do dot env dot local. This may differ depending on the framework
that you're using the environment that you're in. But essentially, we're setting an environment
variable, this is not going to be committed to our repository. And we can actually set this based on the
different environment that we're in, if we're in development, different staging or production. And then we're going to be able to use this
inside of our code through process dot env and then recent API key and actually instantiate
our recent instance. So we're going to come back here to root.ts. And we're going to do process dot env dot
recent API key. And this is going to pull the API key that
is available in our environment. And this way, we're committing this to our
repository. So we're not committing any sensitive information. And this API key, this environment variable
is going to be set somewhere else that is not part of our code. So this way we achieve security. Now once we have this setup, this is going
to work exactly as we expect this reason is going to use our actual account that we just
created. So the next step for us to do is to actually
configure these emails over here. So first, you want to get a from address. Now in our case, we actually don't have any
domain setup, I do have one in my account, but you're not going to have one when you're
starting out. So in that case, what I would recommend that
you do is you actually go to the recent docs, and then go here to introduction and find
the documentation. And then perhaps go let's say we're using
Next.js. So let's find the Next.js. Or let's just go for next, there we go, Next.js. And here, you want to find where they're actually
sending the email. And as you can see here, you have onboarding
at recent dot def. So again, this is on the recent documentation,
you can actually use this email address as the from address in development, to actually
send email so that you can test this out and make sure that it works exactly as you expect. Now it's very important, please do not use
this email address in production, because you are going to get your account suspended,
you actually have to have a domain for this and actually connect it to recent and then
put that domain the address from that domain over here. But for testing purposes, it's perfectly fine
to use this email address just to make sure that everything works exactly as you expect,
then we're going to want to configure a to address. So I'm just going to put here my cause and
solutions address, I'm going to do here contact at caused in solutions dot IO. And as the subject, we're just going to put
Hello World, or actually, let's do welcome, and then exclamation mark, because we are
sending the welcome email. And here, we don't have to do anything else,
we're already using the welcome component that we created. And again, this one will have just a button
that says click me and this is what we should be able to see in our actual email. The last thing for us to do is to actually
trigger this endpoint to actually send the email. So we're going to come here inside of our
app. And we have one main component, let me find
it, we have the page component. This is our basic homepage component, this
is where everything happens. What I'm going to do is I'm just going to
make this a client component use client, because we're going to want to use a button here with
an on click event handler. And this only works in client components. So we're going to remove all of this and we're
going to do button, send email. And here we're going to do on click, and this
is going to be a function. And then here, we're just going to do, actually,
this is going to be an asynchronous function. So async, and we're going to do here, await,
fetch, and then slash API slash emails. And then we're just going to pass here method,
and then post like so. So now we created a button, we have the button
text to be sent email, and on click, we're just going to await a fetch of method post
on slash API slash email, which is going to hit this endpoint here, slash API slash emails
as a post method. And it's going to run this code and actually
send our email to us, which is exactly what we expect. So now I'm going to open up here the actual
terminal, and I'm going to do pnpm dev to run our dev server, then I'm going to go back
here to the browser, and I'm going to go to local host 3000. And now we should see a button here that will
say send email if I can just zoom. And now if I press this, we should get an
email in my inbox in just a few moments. And actually, I just realized that I do have
a typo, it should be emails, not email. That's why this isn't working, because I wasn't
receiving the email. So let's try this again. Let's press an email. And now in just a few moments, hopefully,
I should receive an email. And there you go, this is my Gmail, and we
have an email from onboarding at recent dot dev. And we have this click the button, which is
exactly the email that we expect. This works exactly as we expect, we managed
to send an email from our actual application to our inbox using react email and recent. This is great. So now that we have this working, I'm going
to show you how to make these emails a little bit more personalized, because in reality,
you're going to want to make this personal and not send the same exact email to every
single one of your users. So first, what we want to do is configure
this button to actually send the email that we want to send to and the first name of the
user, because in a real scenario, you're going to have this data inside of a component, you're
fetching the profile of user, and then you want to actually send that data, send that
email to the user using their email, and probably the first name. Now to do that, it's actually quite simple. And that's because this is a normal POST request. So the only thing that we have to do is just
send some data along with this POST request, access it in this endpoint over here, and
then pass it to the actual function, right? So it's pretty simple. So we're going to come here to app. And basically, we're going to send this email
to the user, and then we'reBesides method, we're going to come here and make a comma
and we're going to add body and you're going to do json.stringify and we're going to call
this as a function and pass an object and we're going to do email and that's going to
be contact at CosdenSolutions.io and then first name is going to be Darius like so. Right, so now we're passing this data as the
body to our endpoint and we're passing the email and the first name which we can use. Then inside of our root, what we have to do
to actually access that data is we have to pass it here a parameter. So in Next.js, every single root accesses
a parameter. So we're going to do request over here. And this is going to have to be of type request
like so to make TypeScript happy. And then to actually get the data, we can
do const and then email first name equals await request.json like so. So we're awaiting the JSON of this request,
which if you can remember, we're sending this as JSON. So this is going to be valid JSON. And then we have access to the email and the
first name. So what we can do is we can say to email,
and then we can do that's for the email. And then for the first name, we're going to
want to pass it here to welcome, we're going to do first name like so. Now we're going to have an error here because
welcome is not meant to receive a first name. But we can easily change that because this
is a normal React component, we can come here we're going to find some props type, welcome
props equals and then first name and then shrink like so and come over here. And then what is the error? What is the error? I don't know why we have an error over here. I don't know why that was there. But I just closed the file and I reopened
it and it was fine. And then here, we're just going to do a first
name. And we're going to do welcome props like so. And now we can actually use the first name
inside of this component. So for example, we can do a heading. And we can import this from react email slash
components. And we can do welcome comma first name, and
then we're passing the first name here. And then this button, we're still going to
leave it just because we want to leave it. So now we have an actual component here, we
have a button on click, it's going to send this API request this post request, it's going
to send this data, the email that we want to send it to the first name, this is going
to get received here inside of this function using this request. And then we're just awaiting the JSON, we're
getting the email in the first name, we're passing the email to the two parameter of
recent and we're passing the first name to the component. And in the component, we're using it as the
heading and we're saying welcome first name like so. So now if you go back to our application and
go back here, where was it the next just application, we can now press send email again. And we should have received now a personalized
email in our inbox exactly like we had before. But now just with the data of our actual first
name. And there you go, we have our second email
from onboarding at recent.dev. And now this is saying welcome Darius, this
is my name. And we now have a personal email that we can
use to send to any of our users and make them feel like we're talking to them one on one,
which ultimately is what you want. Right. So now with this, we've successfully sent
a personalized email worth email and recent. And everything works exactly as we expected. Good job. And as a bonus, because you're still here,
and you watch this far into the video, if you want to learn react by building a real
world application, a real world project, check out project react because this is a course
that I built that's going to teach you everything that you need to know to build a big and complex
application with react. I've literally poured my heart and soul into
this course. This course has all the knowledge and hard
lessons that I've accumulated over my eight years with react, which is quite a long time
to be honest. And I've put everything in a package that
takes you from zero to hero and literally teaches you everything. There's so much content in here, there's so
much things to learn. And the students that have taken this course
so far are loving it. And it's completely and fundamentally changed
how they view react and actually work with it professionally. So if you're interested is going to be the
first thing in the description. Once again, it's called project react, I would
love to see you on there. And trust me, if you take this course, you're
never going to have to take another course on react ever again. This course is the best course that you can
take for yourself. And there is no other like it. So once again, project react, first link in
the description. If you enjoyed this video, and you want to
see more videos just like this one, make sure to leave this video a big thumbs up. You can also click here to subscribe, or you
can click here to watch a different video of mine that YouTube seems to think that you're
really going to enjoy. And with that being said, my name has been
Darius Cosden. This is Cosden solutions. Thank you so much for watching, and I will
see you in the next video. Ciao. Ciao.
