Connect your ReactJS app with Firebase

What is the Firebase?

• This is an application development platform by Google and backed by Google Cloud.
• Found in 2011 as a BaaS (Back-end as a Service)
• Firebase can be a database, server, or a set of APIs since it is a BaaS.
• You can create a complete web application using Firebase as a back-end/database with any JavaScript-based library or platform/framework like React, Vue, or Angular. But it depends on your requirements.
• Firebase provides many features.

Features of Firebase

• It is a real-time database
• Provides authentication
• File storage
• Hosting
• Machine Learning
• Monitoring
• Analytics
• And many more...

What is called a real-time database?

• It does not take time to update the database, because Firestore uses a WebSocket to connect your application with Firestore.
• Web sockets are very fast than HTTP calls which are very common in most databases. 
• Once you update data, all done. Nothing to be worried and the connected applications will be updated immediately.
• Firebase offers two databases, The native real-time database, and the Cloud Firestore which is a new and updated version of the real-time database.
• Both databases are NoSQL databases.

Firebase vs. Firestore

• Firebase is a Back-end as a Service with a real-time database.
• As I mentioned Firestore offers two databases, The native real-time database, and the Cloud Firestore
• Cloud Firestore is one of them.

Do you need explanations for other features? 

It might make this article, a story. Please refer to the documentation for more details.

Create a Firebase project

First of all, let's create a Firebase project, https://firebase.google.com and please follow the below steps.

Click on Get started

Create on Crate a project

Give your project name, tick the terms and conditions and Continue.

Set all default and Continue

Select the relevant location and check the terms and Create project

Everything looks good, and wait.

Your project is created now.  Click on the "web" icon

Now you can provide an app name and Register app.

Then you can see the initial firebase configurations. This is required to connect your ReactJS application with Firebase.

Create a ReactJS application

• In your terminal, hit the below command to create a new ReactJS application(firebase-demo is my project name)

npx create-react-app firebase-demo

• Go inside of the application (cd firebase-demo)
• Now you can run the application

npm start

Add firebase configurations

• Open your project in your preferred editor, I am using VS Code.
• You need to import firebase into your project. Hit the below command.

npm install firebase

• Then create a file in the src, I just give a name like firebase-config.js
• You can choose any name, but take it as a meaningful name. 
• Now you can paste the configuration details that you copied from the firebase console.
• Awesome, now you are done, adding firebase into your reactjs application.

Create a Cloud Firestore database

Let's create a database. Click on Create Database

Check Start in test mode

Select the location and then hit Enable.

After provisioning Now you can create a collection

I will take my collection ID as "tasks"

Now you can add fields. I selected AUTO-ID to generate IDs automatically. Here I added a few fields and Save.

Now your collection is there, and we can move with the reactjs based implementation to understand, how to use Firebase directly with the ReactJS application. 

The next step: ReactJS CRUD with Firebase