How to send emails using React through EmailJs

hello and welcome to another video by your favorite family member michael in today's video i'm going to be showing you how to send emails through react through a form to yourself so we're going to be using a service called email.js and if you want to just head over to emailjs.com you can go ahead and sign up and create a free a creative account already have an account so i'm already signed in but once you create your account go back to this url and i want you to click on docs and then what you want to do is you want to scroll all the way down here to where it says examples and click react we're going to end up coming back to this function here later on and then we're going to be also needing to use this line of code here to import email gs as well so once you've created your account you're going to see something like this and we have multiple different email services that we can send emails to i'm only going to be showing you how to do gmail and i've only tested gmail so what you're going to want to do is you're going to click on gmail obviously this will be pre-populated for you you want to connect your account so i'm going to connect to the account i'm using you want to hit allow and then add service and then it's going to send you a little test email as well if you want you can go ahead and check it there you go there's my test email so know that we are connected so now what we want to do is we want to go to email templates click create new template i've already created one so this is what mine looks like when you create it it's going to just be empty with nothing here now the importance here is you want to use three uh curly braces on each side and then whatever you're going to be having for your form information so for me when someone sends me an email they're going to have a subject they'll have their name email and message and i'll also show you in the code how this is super important so once you've figured out how you want to template your email they have some fonts here and different things you can do which is nice on the right hand side here where it says to email you want to go ahead and enter the email you want to send it to which i would hope would be yours you can also send a test email up here if you want so just test email i'll let you know if it works and then you can go again back to your email and see if it's working which it is so great so now what we're going to do is we're going to go ahead and jump into the code and we're going to get this set up so first thing you want to do when you have your react project and you're ready to go is you want to install the email.js so just type npm install email js.com save and that will install that dependency for you and then once that's done you want to go ahead and import email.js here so you'll just type that in and then once you're done you want to create that function you can call whatever you want i'm gonna call it send email and then of course make sure on your form that you made you have you're calling the function and so we're going to go back to the website we're going to go to the docs and we're just going to grab i'm going to grab the contents of the function not the actual functions have already made it and i'm going to go ahead and bring this in okay and so once you've brought the contents of that function in there's four different parameters here that we need to address so if you hover over send form you're gonna see the different parameters we have service id which is the email service we're using which is gmail we have the template id which is our template we have the form we're going to leave i'll go about that a little bit and then our user id which i'll show you how to find as well so first let's go ahead and change this to gmail and then for our template id let's go back to the website and it's not going to be the this name here but it's going to be this name all right so we'll just copy that and then we'll paste it here and then for e target this is going to be whatever the user is submitting through your form so we're going to leave that alone and then the last bit is going to be your user id so to find that you're going to go back to the website you're gonna click up here under your name and then you're gonna see over here it says api keys you're gonna copy this user id and then that's gonna be your user id okay so that's pretty much it honestly make sure you're calling the function and then you have your form set up now um what we'll end up doing too is i'm going to add this e-target.reset and the nice thing about this is when your form gets submitted it will end up just resetting the fields of your form now one quick thing before we test this when i was talking about the template if we go back to it and we have the squiggly brackets right we have subject name email message you want to go off of right here whatever you call this particular input field um just make sure it's case sensitive as well and then you're all squared away so let's go ahead and test this so if we come to my react project i have this form here go ahead and do test go ahead and send it and then as you see it resets here and then if we go to our email you can see that we received our test email so that's pretty much it for this video i hope you guys enjoyed it this is a very very simple tool an awesome website to help send emails to yourself or you know to your company or anything like that they also have pricing here so you get 200 monthly requests this is awesome if you're just you know doing some stuff on your own then they have different plans you can use as well if you want to do that so thank you guys again for watching this video i hope you enjoyed it and i hope this is very helpful for you have a wonderful day

Channel: RemyFamily

Views: 61,171

Rating: 4.9620404 out of 5

Keywords: React, Send emails using React, How to send emails using React, EmailJs, emailjs, javascript emails, how to send emails, Coding, How to code, React Application, React emails, Bootstrap, React forms, send emails using React forms, using emailJs, useful methods to code, coding, code, learning code, tutorial, coding tutorial, React tutorial, React tutorial to send emails

Id: NgWGllOjkbs

Length: 5min 47sec (347 seconds)

Published: Fri Jul 24 2020