Send Mails using ReactJs without Back end coding

In lot of Web Applications you have seen there are lot of functionalities. Email Notification is one of the famous functionality in a Website. When it comes to ReactJs there are lot of ways to send Emails. Most famous method is using nodemailer module in the back end of the ReactJs web application. In this Tutorial im going to show you a way that you don't need to do back end coding to send a mail, this is also easy and a quick.

Before we start we have to create an account in Emailjs and Mailgun.

Mailgun is the email provider to send the mails. EmailJS account to serve as a connector to my email service of choice for this project, Mailgun.

After creating those two account go to Emailjs and press add service, It will let you to select a service , Select Mailgun service.

Give the API key and Domain which is give in to you by Mailgun. To find the API key and the Domain go to Mailgun and go to the domains using the right hand navigation bar.

Then click on the 1st item in the list. It will redirect you to another page like below

Click on the Select button in the API tab and select Node.js. In here we are just selecting Node.js to get the API key and the domain, we arent going to code back end. You will see the API key and the domain as in the picture below.

In the API base URL the part which is starting from the sandbox is the Domain.

After adding the new service to the emailjs, Lets see if its working. Click on the test button in the newly added service.

A Email will be sent to you. Go to your inbox and see if there is a email from Email.js.

If there is a Email like above then your connection is working.

Now lets Go to the coding part 😎.

1 Step

We will be creating a react app. Im going to give the app name as email.

npx create-react-app email

2 Step

Im going to make a form. This from will take values from user and when the user press submit button a email will be sent to the user. You have to install router-dom and emailjs packages.

npm install react-router
npm install emailjs
npm install react-router-dom

Main.js will be my router component and the Form.js will be the place where the From is located.

You have to add BrowserRouter to index.js so the Route between component will work.

Below is the App.js :

Then the Main.js file :

To make the from look good I’ll be adding some link in the header of the index.html which is located in the public folder.

This link for the material icons -

<link href=”https://fonts.googleapis.com/icon?family=Material+Icons" rel=”stylesheet”>

This link for the css of the material design -

<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

Also in the header of the index.html you have to add the installation code of email.js you can get it from here.

Here is the Form.js :

This will be the interface you will get when you hit npm start.

We have finished the coding part. Now we have to make a email template in emailjs. This emailjs will be used as the mail structure.

Lets go to the Emailjs and go to the Template section

Im going to select the 1st template, and the template ID of it is template_IldEFUEB. Remember you have to include the template ID in the react code where i have commented.

Now in the template im going to get the variables that are input by the user through the form.

Below is my template.

In this template i have access the variables that i have passed using double brackets {{variable}}.

In the front end of the react i have taken the input from the fields and stores as firstname, lastname, reciverEmail and phone. So in the template you can call them using the double brackets. If i want the phone number ill be writing in the template like {{phone}}.

One More thing before we run the app.

Since we are using the Mailgun free version we have to add the email address that we are going to send the mail, so go to the Mailgun and go to the Overview setion using the navigation bar which is in the left side as i shown in the below image.

After pressing the save recipient you will get a email asking will you allow mailgun to send mail to your email address.

They have use this to avoid sending spam emails and also saying us to buy their service.

So now all are done. Lets hit npm start and see if we are getting a email from our react app.

You will get and alert box if the mail sent successfully and also in the Google chrome console you can see a text “Mail Sent” if it worked.

Now lets go to our Email and see if its really there.

As you can see you will get the Template that we design in the emailjs and the variables that are given by the user through the from we made.

So this is a simple way sending a mail in ReactJs without touching the back end.

Here is the Github Link of the Project.

Happy Coding 🎉🎉🥳🥳