Sending and validating Emails with ReactJS.

| Updated on February 13, 2024

In today’s blog, we will be going to show you how to send emails with Reactjs, through a form to yourself. Also, you will learn how to validate an email address in the react.js form using the regex pattern in the react application.

Sending Emails

First, you have to sign-up and create a free account. Once it’s done, you have to click on this  https://www.emailjs.com/ URL for further process. Click on the doc option present on the top of your screen to see the Email services option on the new page to add Gmail as a new service. Here I am going to show you how to do Gmail. 

So you need just to click on Gmail and connect your account, then add service and so it’s going to send you a test email. Check it by using your Gmail App.

Gmail service

Now we need to go to the email templates option present on the left side of the screen and click on it.

Email Template Option

Clicks on the option “Create New Template” to create a new template for you.

create new template

You will get a new page showing the format of the emails you have to follow. Heed this format and add the recipient’s id to send the email.

 Email Template Format.

Let’s see the code and setup now. The very first thing you should do is to install the email.js by typing npm install email js.com, then save.

source code

Once you have brought the content of that function, there are four different parameters here that we need to address 

  1. Service id
  2. Template id
  3. Public key
  4. Form. 

Let’s go ahead and change this to Gmail. We need to search the template id first, go back to the “Email Template” option, and then copy the template id as shown in the pic.

My Default Template

Now for the service id, you are going to go back to the website on the “Email Service” option. There you will get your Service id as shown in the pic.

service id

For the Public keys, you have to tap on your Name shown 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 pic.

public key

For Form, you have to come back to the homepage and click on the ‘Docs’ option present in the top-right corner of the screen.

Once you click on the “Docs” option a new tab will open on your screen. Select the option “React” and click on it.

react

Now you will get all the procedures in code language as shown in the pic. From there copy the form code only and paste it into the source code page.

Form code

Well, now you are ready to run the app. First, you have to fill out the form properly and send it. Now open your inbox and check whether you got it right or not. If yes – congrats, now you are ready to use Email js to send the emails to Gmail directly.

Email Address Validation in React App

Step 1 – Create React App

You have to follow the below-mentioned command to download and create a new react application.

Create React App

Move inside the application root

add bootstrap

Step 2 – Add Bootstrap 

Once you have created and downloaded the bootstrap, which is optional, you have to follow the below-mentioned commands to move ahead.

npm, install bootstrap

After you have downloaded and installed Bootstrap now, import the bootstrap.min.css file in the main App.js component to move further,

Import and Export

Step 3 – Create Email Validation Component

Now we have to move towards the src folder and create a new file named form-email.component.js with the ~src/form-email.component.js location, which helps to provide output validation to the parent component.

An email Validation() function helps to validate the email by providing true or false results once the strings get matched.

Step 4 – Using Email Input in React js App

As the email validation component is ready now, you have to add the FormEmailComponent in the React.js App file.

To add it you have to open the React.js App file and update the code in this given format.

add the FormEmailComponent in the React.js App file 1
add the FormEmailComponent in the React.js App file 2

Now tap on the start button to run the application at the following URL:

http://localhost:3000
Email validation form




L. Dias William

Education

Related Posts
×