How to Build a Newsletter Application with Email Automation via ReactJS and Firebase

NB: I saw I had this tutorial in my draft for close to 2 years now, I just decided to post it.

In this tutorial, I will be building a simple react Js application that handles newsletter sign up and automatic mailing upon successful registration. Newbies to the world of React can find this tutorial as a side project to help understand React well. Enjoy learning!!!

## Requirement
- Basic Knowledge of React, BabelJs and ES5
- Firebase
- Yarn

## Installation
We will start by creating our project with `create-react-app` by running the following command in terminal

create-react-app newsletter-app

Once the project has completed the installation process, run the following command to get the app running.

cd newsletter-app<br>yarn start

You should see something like this

## Firebase integration
We will be using Firebase to store the emails of users who sign up for the newsletter. You should do the following:
- Sign up on (Firebase)[https://firebase.google.com]
- Go to Console and create an application called *newsletter-app*
- Setup access rules for database in Database > Rules. You will see the below.

{
  "rules": {
    ".read": "auth != null",
    ".write": "auth != null"
  }
}

With what is above, you won’t be able to save anything to the database. So, we have to set the read and write roles to true so any user can interact with the database. Your rules should look like this now:

{
  "rules": {
    ".read": true,
    ".write": true
  }
}

Install Firebase react module by running this command

yarn add firebase

For Firebase to work in our application, we need to add the authentication key to our react app. It can be found at overview page of your firebase project, click Add firebase to your web app. You should see something like this:

<script src="https://www.gstatic.com/firebasejs/4.2.0/firebase.js"></script>
<script>
  // Initialize Firebase
  var config = {
    apiKey: "..................................",
    authDomain: "newsletter-app-7b62b.firebaseapp.com",
    databaseURL: "https://newsletter-app-7b62b.firebaseio.com",
    projectId: "newsletter-app-7b62b",
    storageBucket: "newsletter-app-7b62b.appspot.com",
    messagingSenderId: "733783383"
  };
  firebase.initializeApp(config);
</script>

Paste it at the bottom of `public/index.html` file

After that, we need to use firebase efficiently in our app. create a folder called js in src folder then create a file called firebase.js then your file should look like the code below:

import * as firebase from 'firebase'
let database

export const init = () => {
    let config = {
        apiKey: "00000000000000000000000000000000",
        authDomain: "newsletter-app-7b62b.firebaseapp.com",
        databaseURL: "https://newsletter-app-7b62b.firebaseio.com",
        projectId: "newsletter-app-7b62b",
        storageBucket: "newsletter-app-7b62b.appspot.com",
        messagingSenderId: "0000000000"
    }
    firebase.initializeApp(config)
    database = firebase.database()
}

Go to your src folder and make sure your App.js file looks like the below:

import React, { Component } from 'react';
import {init as firebaseInit} from './js/firebase';
import logo from './logo.svg';
import './App.css';

class App extends Component {
    constructor(props) {
        super(props)
        firebaseInit()
    }

  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

Run the App it should still work perfectly.

## Conclusion
Hope you learnt from this tutorial? The tutorial is for getting your hands dirty with ReactJs. Thanks for Reading.

Your pusher,
Goodness Kayode.