In today’s blog, we’ll show you how to send email with Reactjs, via a form yourself. Also, you will learn how to validate an email address in react.js form using regex pattern in react app.
First, you need to register and create a free account. Once this is done, you need to click on this URL https://www.emailjs.com/ to continue the process. Click on the document option present at the top of your screen to see the email services option on the new page to add Gmail as a new service. Here I will show you how to make Gmail.
Then you just need to click on Gmail and connect your account, then add the service and it will send you a test email. Check it using your Gmail app.
Now we need to go to the email templates option present on the left side of the screen and click on it.
Click the “Create New Template” option to create a new template for yourself.
You will get a new page showing the format of the emails you need to follow. Please pay attention to this format and add the recipient id to send the email.
Let’s see the code and configuration now. The first thing to do is install email.js by typing npm install email js.com, then save.
Once you’ve fetched the content of that function, there are four different parameters here that we need to address
- service ID
- template ID
- public key
- Shape.
Let’s go ahead and change this to Gmail. First we need to find the template id, go back to the “Email Template” option, and then copy the template id as shown in the image.
Now for the service identification, you will go back to the website in the option “Email Service”. There you will get your service ID as shown in the image.
For public keys, you need to tap on your name which is displayed in the top right corner of the screen. Once you tap on it, a new page will open and you can get the public keys as shown in the image.
For Form, you need to go back to the home page and click on the ‘Documents’ option present at the top right corner of the screen.
Once you click on the “Documents” option, a new tab will open on your screen. Select the “React” option and click on it.
Now you will get all the procedures in code language as shown in the image. From there, copy just the form code and paste it into the source code page.
Well now you are ready to run the application. First of all, you have to fill in the form correctly and send it. Now open your inbox and check whether you did it right or not. If yes then congratulations, you are now ready to use Email js to send the emails to Gmail directly.
You need to follow the below mentioned command to download and create a new react app.
Move inside app root
Once you have created and downloaded the bootstrap, which is optional, you must follow the commands below to continue.
Once you have downloaded and installed Bootstrap now, import the bootstrap.min.css file into the main App.js component to continue,
Now we need to move to the src folder and create a new file called form-email.component.js with the location ~src/form-email.component.js, which helps provide output validation to the main component.
An emailvalidation() function helps validate the email by providing true or false results once the strings are matched.
Since the email validation component is already ready, you need to add the FormEmailComponent in your application’s React.js file.
To add it, you need to open the React.js application file and update the code in this given format.
Now tap on the start button to launch the app at the following URL:
Categories: Technology
Source: SCHOOL TRANG DAI
