Sending Emails from React App with EmailJS | Step-by-Step Tutorial

hey everyone welcome back to the channel in this video we will learn how to send an email from react application without the need of backend servers by using email yes Library so let's say you have a use case so in my case I have a personal portfolio where I have a contact Section so here you can see I have a contact form so people can send messages by using this form and I can receive this information via mail so let me go ahead and do that so I'm providing the test name and a test email so now here I can click on send so this is my custom message like thank you for reaching out to me so uh if it is successful I'm showing this alert message and if I click on OK so let me go back and verify my personal mail so here you can say I have already received a mail if I open this you can see I have a subject like new message from this person and it has a template body so this is a template I have created from email JS dashboard which I am going to show you in a moment so you can go to email js.com and here you can go ahead and create an account for free so if you look at the pricing plans like they have a free like you can sign up for free and then you can upgrade as per your needs so in the free plan you can see you can get 200 emails per month with the two email templates so once you sign up and then logins this is my dashboard and here you can observe the first section is email Services here I have already added one my Gmail service so what you can do is is you can click on add new service so here I have selected Gmail you can select whichever you are using so if you select Gmail like this and you will get a service ID created and what you need to do is you can click on connect account and then you need to make sure this is enabled so it will send a test email you need to allow the permission so that it will send emails on behalf of you once you enable this and you can go ahead and create the service so I have already created one right so I'm not going to do again so once this is done you can go back to email template section here so this is the template that when I received the mail so this is the format right so you can click on create new template here you can see there are some Dynamic properties so which I am using from our react application so while making a call to email yes I am sending template parameters and from is the customer name you can also make use of some email because in our form like we are taking the name and email and message right you can fill this information so once this is done you need to save this so here if I go back so this is my default template so here you can see I'm using the from customer name and Then followed by the customer email all right so let's get started with the code base so I have opened the project folder in vs code inside you can see I have a basic react application inside my project folder I have used this command npx create react app using the dot so that it will use the current folder name react application name and inside the project you can see I have removed some of the files which are unnecessary so you can see inside index.js we are just using the root component and inside app.js so you can see I have just a H1 tag and inside CSS both the files like I have removed the default Styles so I will ask explain these Styles in a moment so if I show the react application on browser so here you can see it is currently running on my local machine so let us start with the installation process on the email.js like you can find the docs as well if you go to the like you can find the installation section so here you can see we can install email.js browser Library so here along with email yes I want to install one more Library which is axios for making HTTP requests so I will show two ways to send email using this Library so one is using this email yes and the other is by using rest API call as well so let us install these packages both so in the meantime like uh you can find you know there are two sections like there is one rest API section as well and the other is like in the examples you can uh go to the whichever is your application so in my case I'm using react so here you can see they have given a sample example they are using the email they are importing the email yes and then they are using the use ref hooks right uh for the form so here they are just uh attaching the ref prop and then they are providing the name properties to each input Fields so in my case I will use a u State and I will follow a different approach so I will show you how to send email without use ref so if you want the if you want to follow use ref approach you can go ahead and use these things and the other way is like a rest API approach for example if I go to this end so here you can see we can make a HTTP post request to this endpoint by providing the following properties like for example sorry this ID template ID and then your API key and the template params so the response you will get this one so here they are using Ajax right so I Will Show You by using the axios library all right so in our code base uh let us start so inside source so let's create a folder for components and inside let's create a component called email form dot jsx so I can use react Snippets so this will create a simple react component with the name so to save some time like I'm going to copy paste some code so that we can complete without wasting any time so inside here you can see I have created a form that has on submit Handler and it has a class name so it has a two input Fields right one for the name the other for the email and the other is the text area and I have a button to submit so here you can see we need a state variables right so that we can store the information so we need to import the use state from react all right so once we submit the form by filling the uh form so what we need is a function to handle right so let's create the Handler okay so the first thing is we need to prevent the default action of submission so the next thing is we need to create few variables to store the service ID template ID and public key how we can find this information is if we go back to dashboard under the email service if you click on this you can get your service ID if you go to your email template again if you go to the settings so here you can find your template ID and how you can find the public Keys like if you go to the account section here you can find your public key so the next thing is we need to create an object so that contains this Dynamic template params so we have created a template right so inside that we are using some properties so these are the properties and the value videos here you can observe so I am using these use State values and a two name I'm making it as my channel name and Then followed by the message user message so the next thing is like we have to import email yes uh Library which we have forgotten so here you can see we can send the email and using this uh Library so we can call send method by passing this information so here you can see I'm passing service ID template ID template params which is this Dynamic data and Then followed by the public key this will return a promise right so we can handle it using dot then dot catch or asyncavit approach so here in my case I'm using this dot then dot catch so once we get the response so we can say emails and successfully and we can reset the state variables so if any error happens then we can log this response all right so I hope this information is enough so let's save this and see okay so if we verify in the browser so we do not see the form rights inside app.js after the H1 tag let's go ahead and import this component all right so here you can see the form is aligned in a column direction right so what I have done is like inside app.css so I have created a class name called email form so I have given properties so display flex and flex Direction column and for the app in order to make it Center like I have applied these properties and for the input and text area I have given the margin top and bottom let's go ahead and verify the test mail so I'm going to open the console so I'm providing my name so I'm going to send email so you can see I have received the logger message which contains the email response and you can see the form is also reset so this is my recipient mail so let me refresh this so now you can see I have received a mail new message from Kalyan if I open this so you can see so it is greeting me hello and then you got a message from this person and his email address is this one and this is the message that person has shared with you we can go ahead and verify the rest API call so let me go back to the code base so inside components let's go ahead and create one more component so using the react Snippets again I'm going to create the boilerplate inside this form I'm going to place the form that I have created so this contains State variables and submit Handler right so these things are common for both so let's import used it all right so here you can see for the inputs elements like I have I've given a value prop as well as on chain Handler so inside again let's prevent the default action and Then followed by providing the properties make sure that you are using the environment variables so in my case as a demo I'm just directly providing the values so do not push this information to GitHub and all directly so the next thing is like here you can see create an object with the following properties so I have created a data object that contains service ID template and user ID so this contains a public key as a value and then template params this is another property which is uh again an object that contains the dynamic parameters which we are using in our template so after this we can go ahead and so here you can see we are going to send the mail so I have opened the tricas Block in inside it like you can see we can make use of the axios so we are making a post request to the end point they have provided and to this post request we are providing this data so this object so we are console logging and then once everything is successful we are resetting the form so let me save this so now inside app.js so let me comment this so this time we will make use of email from rest APA approach so now let us send the mail again okay so let's go ahead and send okay now you can see I have received this log information so this is coming from email list API component line number 34 and you can see the form also has reset so let me verify okay so here you can observe we have received the mail again so this time you can see it contains this test message from rest API call that's all about the video guys I hope the video is helpful do like share subscribe to the channel and I will see you in the next video Until then take care bye

Channel: Web Wizard

Views: 17,470

Keywords:

Id: wWiTouBHibs

Length: 12min 34sec (754 seconds)

Published: Sun Jul 23 2023