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. newsletter- < >yarn start cd app br 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 ( ] - Go to Console and create an application called *newsletter-app* - Setup access rules for database in You will see the below. Firebase)[https://firebase.google.com Database > Rules. { : { : , : }
} "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 You should see something like this: Add firebase to your web app. < = > script src "https://www.gstatic.com/firebasejs/4.2.0/firebase.js" </ > script < > script config = {
    apiKey: ,
    authDomain: ,
    databaseURL: ,
    projectId: ,
    storageBucket: ,
    messagingSenderId: };
  firebase.initializeApp(config); // Initialize Firebase var ".................................." "newsletter-app-7b62b.firebaseapp.com" "https://newsletter-app-7b62b.firebaseio.com" "newsletter-app-7b62b" "newsletter-app-7b62b.appspot.com" "733783383" </ > 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: * firebase database init = { config = { : , : , : , : , : , : }
    firebase.initializeApp(config)
    database = firebase.database()
} import as from 'firebase' let export const => () let 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" Go to your src folder and make sure your App.js file looks like the below: React, { Component } ; {init firebaseInit} ; logo ; ; { (props) { (props)
        firebaseInit()
    }

  render() { ( <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> import from 'react' import as from './js/firebase' import from './logo.svg' import './App.css' class App extends Component constructor super return < = > div className "App" );
  }
}

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.

Google

Super

Why Product-Driven Teams Ship, and Engineering-Led Ones Stall

Developers: The Why and How to Writing Technical Articles

I am more cool on my website lol!

Newsletter

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

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

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Why Product-Driven Teams Ship, and Engineering-Led Ones Stall

101 Stories To Learn About Email

10 Things to Do in a Professional Email Signature (With Examples)

12 Ways You Can Use Email to Nurture Leads to Conversion

132 Stories To Learn About Email Marketing

Why Product-Driven Teams Ship, and Engineering-Led Ones Stall

101 Stories To Learn About Email

10 Things to Do in a Professional Email Signature (With Examples)

12 Ways You Can Use Email to Nurture Leads to Conversion

132 Stories To Learn About Email Marketing

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps