Send emails using React through EmailJs

5 min readNov 10, 2020

Hello guys, I’m Senura Jayadeva. In this article, I will guide you to send emails with the Emailjs.

What is EmailJS ?

It allows sending an email directly from Javascript, without backend development. The developers create one or more email templates (dynamic content supported) and then trigger an email using our Javascript SDK, specifying the template, and the dynamic parameters for rendering the email.

EmailJS is a tool in the Email API category of a tech stack.

Getting Started

First of all, you have to create a react app. Here I assume you already have a basic knowledge about React. If you are not you can refer to it by using the following link

Getting Started — React

A JavaScript library for building user interfaces

reactjs.org

Now I’m going to create my react application by using npx create-react-app sendemail

Okay, after the installation I will open the project in VS Code. Then in the App.js file, I will continue my implementation. First I will clear the default coding in the return function and I’m going add the following code into the return function.

<div className=”container”><div style={{ marginTop: “5%” }}><form><div class=”form-group”><label>Your Name</label><input name=”name” type=”text” class=”form-control”     placeholder=”Enter Your Name” /></div><div class=”form-group”><label>Email address</label><input name=”email” type=”email” class=”form-control” placeholder=”Enter Your Email” /></div><div class="form-group"><label>Message</label>
     
      <textarea name="message" class="form-control"    placeholder="Enter Your Message"></textarea></div><button type=”submit” class=”btn btn-primary”>Send Email</button></form></div></div>

In this tutorial, I’m using Bootstrap for stylings. So make sure to import the stylesheet <link> into your <head> in the index.html before all other stylesheets to load bootstrap CSS.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

Now give npm start command and check everything is okay with the user interface. ( before giving npm start make sure you in the correct path ). If everything is fine you will see an interface like this.

EmailJS Integration

Now we have to deal with Emailjs.

First, go to https://www.emailjs.com and create an account.

Once you created an account you will navigate to a page like this.

The next thing is adding a new email service. So when I clicked the Add New Service button, it shows multiple different email services like given in the below

I’m going to do this with Gmail. So I’m clicking on the Gmail option. Then it will navigate to this.

As I mentioned above, I’m giving Service Name as Gmail and Service ID as gmail. Then click on the Connect Account and choose your email. Finally, click on the Create Service to finish the process.

After that, you can see your email service is successfully added.

Then we have to create an email template. You can see there is an option called Email Templates on the left sidebar. When you go there you can see a default template like this

Now I’m going to edit the template.

Here you can see there are 3 words within the double curly braces. If you go to the app.js file you can see these are exact same words which I have given as the name property of input fields in the form.

Now let’s save the email template by pressing the Save button. When we are going to the Email Templates page we can see our new Contact Form is present.

So the next part is to go ahead to the code and get this setup. Now you have to install the emailjs so type npm install emailjs-com --save

Then once that’s done import emailjs in the app.js.

import emailjs from 'emailjs-com';

Then I grab a code from emailjs docs and bring it to the app.js.

function sendEmail(e) {
    e.preventDefault();    emailjs.sendForm('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', e.target, 'YOUR_USER_ID')
      .then((result) => {
          console.log(result.text);
      }, (error) => {
          console.log(error.text);
      });
  }

In the above code segment, you can see they are asking for SERVICE_ID, TEMPLATE_ID, and USER_ID

I think you can remember when I create the email service I gave it SERVICE_ID as gmail. If you can’t remember you can check it from here.