Send Email With React (No Backend Required)

hello guys and welcome to the channel so today we're going to see how we can send an email um using react and we're not necessarily going to use any backend language like um you know php or express or whatever we're just going to send it directly from our front-end application so i simply have a simple react application here nothing much i just you know cleaned it up a little and in my app js i have hello world that's it opened here now i have an empty component folder inside of this folder i'll just create a contact.js so that's contact.js and i really want to be fast with this tutorial oh i need to rename this i made a mistake here so contact.js all right so in my contact js i'll just do a quick boilerplate so array fce to help me create a component and inside this component i'm just quickly going to just add a contact us form so let me change this guy here to a section like so and then inside here by the way there is something i should have probably pointed out i have some predefined styles that i added to my index css so if you come to index css these styles here their styles are created to help me you know easily create tutorials and stuff so i'm going to make it available to you the link will be in the description now for the contact here so inside of this guy here i'm going to have a container and that container is coming from so dot container container and it's coming from my predefined styles the one i told you about all right so now the first thing is let me have this h2 that will just say contact us contact us and i should probably center it so it's going to have a class name of um text center so text hyphen center all right then i'll have a form just below that so let's create the form and then i'll just tap that bring that down so first of the form let me you know create the so the form is going to have a class name so let me do class name and i have this class i created i call it form control and i just want the form to have you know some small small design so just to make it a little bit presentable so i'll say card then i'll just do flex center or you know what let me just hold on with that so i'll come inside of the form and i'm going to create the impute field so first off let me just create an impute field so i'll say input like so and tap that the it's going to be a type of text and it's going to have a placeholder the placeholder for this one is going to be full name full name like so then it's also going to have a name property so name that is going to be set to user underscore name and what am i going to do i'm going to make it required required yeah so because i've created this first one i can just duplicate it and create some others so i'll do here and then i'll make this a type of email then this is going to say email and of course the name is also going to change to user email user email like so then i'm going to add a field for the subject and then the message so the subject let me just duplicate this guy and this is going to be a type of text then we're going to see placeholder of saw objects and this is going to now be user subject or it's just going to be subject actually so subject yeah then it's also going to be required so the last thing i want to add is a text area all right so let's come down here that's going to contain the main message so text area and it's going to have a name of message like so and then i don't need the id i don't don't really okay i'll just remove the id just the idea leave the rest i'll delete that and that's fine now of course the form should have a button is submit button so let's add a button very quickly so button is going to say send message because send message message like so come on what are you doing here all right and this button is going to have a class name of btn so dash dash btn btn and then i'll just make it primary so dash dash btn iphone primary like so and okay i need to make it a type of submit so that when you click on it it also submits the form so submit and i think that's about it so let's go ahead and save and let's see what we have on the page and of course we're going to need to reference this all slot it into our app.js first to see it so i'll just delete this guy and then i'll just con add my contacts contact and this is it here so let's auto import it as well and then i'll just close if you go ahead and save now you should see it on the page and of course it will just be all over the place so now let me just add one or two styles here to just make it a little bit presentable so i'll just come here and say flex center and i want to set it to face to direction column so direction hyphen column like so and if i go ahead and save that then it should be yeah so that's actually this is actually you know not bad now let's add the logic for this particular project so on this form first off i want to use um react hook use ref hook for this particular form so i'm going to import it by saying use ref okay from react and down here we're going to create a ref that will you know point to this form so here i'm just going to come up and say const and i'll call that form and it's going to be set to use ref like so and then we need to point it to the form just as we said so that means we'll come to this form here this particular guy here and then we're going to point it how we're going to do that well we're just going to come here and say ref and it's going to be equal to curly braces and then i'll just say form alright so you can call it whatever you want but let's just call it form here then also we're gonna add an on click on this form so i'll just say on click sorry on submit rather because it's a form that you're going to submit i'll see on sorry on submit because it needs to become a kiss and that's going to be equal to so we're going to point it to a function so i'll call that function send email so let's just say send email yeah and now remember we've not created this function yet so let's actually just create the function even though it's not going to contain anything so i'll just create an arrow function here and i'll just say send email and i'll just get rid of whatever error that we have now we're going to use a service that service is called email js to send the email okay so i'll bring up this browser here and this is the website so you need to create an account so sign up sign in and then it will bring you to this page here where you will you know be able to create an email service so for me i'll just click on add new service and then it will ask me how i want to add a service so to make things simple you can just add a gmail service and see here we have gmail and it has given us this service id all right so i'll just click on connect account first so i'll need to connect my gmail account to this guy so i'll just connect this one here all right so it's asking me for permission which i would give its permission and say continue aha so it has connected to that particular gmail account i'll now click on create service all right so now we've created a service next you need to create an email template so if you click on email templates you will see um email template yeah you will see the option to create a template so i'll just click on create new templates and you know to just show you what you need to do here okay so just give it a few seconds to load exactly so you see here it has loaded the template initially so we're just going to change some things here so for example it says here new message this is the subject here new message from so i'm just going to change my subject here i'll just say i'll just say whatever my website is so i'll just say test website and then inside here i'll just say subject subject and that's pointing to the subject field we created in our form so here i'll just see you got a message from and this is going to be user underscore name so let's say user underscore name and this is supposed to say hello and you know what i'll just get rid of it here i don't need this guy so i'll have the message and maybe i also have the email address of the person so i'll just maybe come down here or before the best wishes i'll just come down here and see maybe user email and that's just going to be so i'll just point to the user email here like so i'll see user underscore email like so all right so on this right side here i think you can actually just leave it the way it is but that's fine i'll click on save and now let's test it out so we've created a template now first actually test out this functionality they have a docs so if you click on these docs here you it will bring you to this page where you can look at their docs and you can check for react so if you come to the bottom of the page here you see all the um frameworks they have so if you just click on react then you see um how you can use react right so first off you actually need to install it inside to be able to use react so this is what you need to install so i'll just copy this guy here and i'll bring up my code editor so here's my code editor and i'll just install it so i'll create a new um terminal here in my code editor and i'll just p i'll say npm install so that's i and then at images forward slash browser then i'll hit enter so the installation is complete now before we actually test this out i think we should go back to our template and this reply to here we need to change it to the user email so let me change this to user underscore email and yeah so that's it i'll just leave it like that and then i'll save one more time now come back to your docs so first off we need to copy this guy here to import it so i'll come here and after this import statement i'll just paste that in right then i will come back here and this is a function here to send an email so now let's come here and grab this function i'll copy that and then i'll come here and that function we've already created here send email so i'll just replace it with this guy send email so there are some things we need to do the things we need to do is we need to have this information so our service id template id and our public key so let's quickly do that so i gotta come back here to our template and we need our service id or let's actually get the information we can get from this page first and i don't think let's let me expand it all right so just go to email services first and this is our service id right here so if i click on [Music] let me just copy it all right so i'll just copy this service id here and then i'll come back to my form my code editor and replace this guy here okay then so next i need to have a template id so let's come back here and let's open our template so you see this is our template id so let me try and copy that all right then i'll come here and replace this template id like so oh okay i think i need to do that again so let me just click on settings where i'll just see the template id i'll copy that and then i'll do that i'll come here and paste it in then the next thing we need to do is our public key all right so let's let me look at my public key and paste that in as well so the public key is somewhere in your i think in settings oh i believe it's in our account tab so if you click on account then you should be able to grab access to your public key so copy the public key and paste that in here like so if you do that then i think at this point we can go ahead and test so if you are able to successfully send your email then this first block here would run so that's the point where you can do anything you want so if the email is successfully sent you can add your code here that you want to run if it doesn't send if there's an error for any reason then you can add your second block of code here so you can go ahead and save this guy so at this point i think we can go ahead and test but there's one thing we need to probably do before we test when you've click on submit what do you want to happen so i probably want to clear the form when i've submitted so i think i'll just come outside here before the closing curly braces of the function and i'll just do event dot target and then i'll reset the form so dot reset like so and then open your parenthesis if you're doing that that means you need to have your event here okay so just make sure you do and i think that's about it so go ahead and save and then let's come to test the application so i'll come here and oh i need to refresh this page to clear this guy out and then i'll just come here john smith i'll choose any email and then i'll just say hello zeno and then here i'm just going to add a message so i'll just see this is a message like so and then that's it now let me go ahead and hit send so hit send and as you can see the form clears out and i'll come to my email here to see if it enters okay so let me click on it so this is it right here just entered so i'll open it up oh no no this is not the one i want this is not it so yeah so this is a test so i'll open it up and as you can see we have this is a message and this is the email of the sender so that's about how you can you know send email from the front end of your website now if you are not subscribed to the channel and you like tutorials around react then make sure to subscribe right now and also i want to let you know that i have premium courses that you can take advantage of specifically a react.js course that takes you from the beginner to the advanced stages and this is the landing page for the course even if you don't want to get the course you should definitely just check out the landing page and see what it's about alright thank you so much and see you in the next video

Channel: ZinoTrust Academy

Views: 50,146

Keywords: react, email, emailjs

Id: I4DKr1JLC50

Length: 16min 30sec (990 seconds)

Published: Mon Jun 13 2022