Software & Applications

Sending and validating Emails with ReactJS.

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.

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

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

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.

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.

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.

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.

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.

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.

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.

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.

Move inside the application root

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,

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.

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

http://localhost:3000

Recent Posts

How to Spot and Avoid Forex Trading Scams in 2022?

Foreign Exchange trading has become the world stage for all the brokers worldwide who are… Read More

8 hours ago

Fun Ways to End a Meeting

The world is currently going through digitalization, and a huge number of businesses worldwide incorporate… Read More

2 days ago

How to Find Affordable but Quality Personalized Leather Wallets

Personalized leather wallets are a necessity as we use them for storing or holding personal… Read More

2 days ago

Non-obvious Examples of the Use of Artificial Intelligence

The term "Artificial Intelligence" (AI) has recently gained popularity in technology discussions. As a result,… Read More

2 days ago

Start Your Resume with Online Resume Builder

Making a professional and optimized resume is not an easy task. It requires time and… Read More

3 days ago

Useful Features to Integrate into a Messaging App Like Telegram

The popularity of messaging apps is exceptional. While WhatsApp is the classic example of a… Read More

3 days ago