Home > Uncategorized > Getting Started With #SmtpJs & #React

Getting Started With #SmtpJs & #React

1_EntHChgUyirgbZ9A3zTxkA

Getting Started With SmtpJs & React

Introduction

 

My name is Alec Dilanchian and I am an avid programmer who enjoys working on side projects and creating cool tools. These projects all come to life on Twitch, a live streaming platform where I stream myself programming projects in 28 days from start to launch (If this sounds interesting to you, please consider checking out my stream @ https://www.twitch.tv/pixelogicdev).

I recently started a new project called FocusBlock, which can be found here. FocusBlock is an open source tool that helps you time block a task and contacts a designated person, via email, if you do not finish your task in the assigned time. Think of it like a pomodoro timer with a way to automatically gain assistance if needed. I needed a tool that would automatically send an email, via the client, if their timer ended before they finished their task. I came across SmtpJs. This component seemed straight forward and extrmemely easy to use. There was just one caveat, FocusBlock’s client side is being created with React. I wanted to keep everything as native as possible, so I challenged myself to create a very simple React component out of this awesome tool. In this article, I want to show you how easy it can be to do just this!

Download The Source Code

The component needed to get the basic logic for SmtpJs can be found @ https://wwww.smtpjs.com. When you reach the home page of the site you will want to select the “Download” button. This will download the source code needed in order for you to get started with SmtpJs. It should just be one .js file as of version 2.0.1.

Create a React Component

Once you have your source code, you are all set to get started on your React component. If you are unfamiliar with React, I would suggest checking out their guide here to gain much needed knowledge on how components work and what the library as a whole does. Do begin creating a React component, I start by adding a new folder of whatever the component will be called. In this instance I called my component SmtpService. This will hold any and all of our component logic. The next step should be straight forward. Go ahead and create a file called SmtpService.js. This will be the entry point of your component and where we will house all of its logic.

Next we will want to ge the basic layout of our React component. This is done with the following boilerplate code:

import { Component } from 'react';

class SmtpService extends Component {
    /* https://smtpjs.com/ */
    /* SmtpJS.com - v2.0.1 */
}

export default SmtpService;

Don’t forget to give credit to SmtpJs for their source code!

Add The SmtpJs Source Code

Once our barebones React component is setup, its time to add the soruce code of SmtpJs. This is as easy as copying and pasting it from that .js file you downloaded in step one. If your React app is already running, you will notice a lot of syntax errors that the linter is complaining about. Have no fear! These are easy changes that can be fixed.

Tweaking Methods

SmtpJs has multiple methods that are key for its functionality. We need to make sure we are abiding by our component’s rules and might as well convert it to JavaScript ES6 while we are at it!

I will demonstrate one method change which is identical for every other method in the code. Lets work with the send method. You are orignally given send: function (e, o, t, n, a, s, r, c) { /* Code */ );. In React, these methods are not recogonized using that syntax. To abide by ES6 and React, all you have to do is change the format to this: send = (e, o, t, n, a, s, r, c) => { /* Code */};. There is a very slight difference.

Changing var to let

This step is just a simple ES6 change. Since all of our properties are only going to be accessed within their respective methods, we want to make sure that they do not hold a global scope. At this point, change any var to let and you are golden.

A Bit of Refactoring

While the source code of the project came to us as a minified file (from the looks of it), it makes it almost illegible. For this we want to make quite a few changes. At this point in the article, I am going to just post the rest of the source code. Feel free to compare the differences! Just as a note, these changes were not React specific:

send = (e, o, t, n, a, s, r, c) => {
    let d = Math.floor(1e6 * Math.random() + 1);
    let i = `From=${e}&to=${o}&Subject=${encodeURIComponent(
        t
    )}&Body=${encodeURIComponent(n)}`;

    if (!a.token) {
        i += `&Host=${a}&Username=${s}&Password=${r}&Action=Send`;
    } else {
        i += `&SecureToken=${a.token}&Action=SendFromStored`;
        c = a.callback;
    }
    i += '&cachebuster=' + d;

    this.ajaxPost('https://smtpjs.com/v2/smtp.aspx?', i, c);
};
sendWithAttachment = (e, o, t, n, a, s, r, c, d) => {
    let i = Math.floor(1e6 * Math.random() + 1);
    let m = `From=${e}&to=${o}&Subject=${encodeURIComponent(
        t
    )}&Body=${encodeURIComponent(n)}&Attachment=${encodeURIComponent(c)}`;

    if (!a.token) {
        m += `&Host=${a}&Username=${s}&Password=${r}&Action=Send`;
    } else {
        m += `&SecureToken=${a.token}&Action=SendFromStored`;
    }

    m += `&cachebuster=${i}`;

    this.ajaxPost('https://smtpjs.com/v2/smtp.aspx?', m, d);
};
ajaxPost = (e, o, t) => {
    let n = this.createCORSRequest('POST', e);
    n.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    n.onload = () => {
        let e = n.responseText;
        if (t) t(e);
    };
    n.send(o);
};
ajax = (e, o) => {
    let t = this.createCORSRequest('GET', e);
    t.onload = () => {
        let e = t.responseText;
        if (o) o(e);
    };
    t.send();
};
createCORSRequest = (e, o) => {
    let t = new XMLHttpRequest();
    return (
        'withCredentials' in t
            ? t.open(e, o, !0)
            : 'undefined' !== typeof XDomainRequest
                ? (t = new XDomainRequest()).open(e, o)
                : (t = null),
        t
    );
};

Send An Email

Once you are done with your component, you are free to utilize it like any other React component. Import it where you need it, and then use it:

import SmtpService from 'My/File/Path/SmtpService';

...

sendEmail = () => {
    let sender = new SmtpService();
    sender.send(...);
};

Conclusion

I want to give a huge shout out to the folks who created SmtpJs and thank them for the awesome and light weight component they had created to send out emails through the client side. I had a blast converting this into a React component and I hope this has helped get you started! I do want to inform you that there are many more changes that can be made to make this an even better component, but I will leave that up to you!

Please feel free to get in contact with me about this or anything else through:
Twitch
Twitter
Email

***********

Thanks Alec for this great guest post, if you’d like to appear in this blog with some tips and tricks on SMTP.JS or another of our components, then drop us a comment or email.

Advertisements
Categories: Uncategorized
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s

%d bloggers like this: