According to the 2022 Stack Overflow survey, 21.14 percent of developers use Firebase, making it the fourth most popular cloud platform. It's an evolving technology for integrating the backend seamlessly.

With Firebase, you can develop a full-stack application without writing a single line of backend code. Learn how to connect your React.js application with Firebase today and build on the go.

Install the Firebase Package

After creating your React app, change directory to your project's root folder and install the Firebase package by running:

        npm install firebase

Add Your React App to a Firebase Project

The next step is to create a Firebase project and link it with your React app. Go to the Firebase console:

  1. Click Add project to start a new Firebase project.
    Firebase console home
  2. Enter a project name, then click Continue.
    Firebase project creation steps
  3. Click Continue on the next page.
  4. Select your Firebase account from the dropdown or click Create a new account if you don't already have one.
  5. Finally, click Create project.
    Firebase create project step final
  6. Click Continue once the process completes.
  7. Next, click the Web icon (</>) towards the top-left of the following page to set up Firebase for the web.
    Firebase console add app web option
  8. Enter a nickname for your app in the provided field. Then click Register app.
    Firebase app registration phase
  9. Copy the generated code and keep it for the following step (discussed in the following section).
  10. Click Continue to the console.
  11. There are many options on the following page. Scroll down and select Cloud Firestore since you only need to set up a database in this case.
    Firebase storage options
  12. Next, click Create database.
    Database creation page Firestore
  13. Click Next. Select your preferred Firestore location from the dropdown.
  14. Then click Enable to create a Firestore database.
    Firebase database creation menu

Initialize Firebase in Your React App

Create a new folder inside your project src directory. You can call this firebase_setup. Next, create a firebase.js file inside that folder. Then paste the code generated earlier into this file.

For now, you can store the configuration object (firebaseConfig) inside a .env file. But consider using a more secure way to mask React secrets in production. Data that you store in a .env file can easily leak in your app build.

If using the .env option, append "REACT_APP" to each variable name inside .env. Otherwise, your app won't read the strings. Additionally, restart your React server each time you alter the detail in the .env file.

For example, to enter your app's Firebase secret key in the .env file:

        REACT_APP_apiKey = yourFirebaseAccessKey

Thus, you can fine-tune the generated code as follows:

        import { initializeApp } from "firebase/app";
import { getFirestore } from "@firebase/firestore"

const firebaseConfig = {
  apiKey: process.env.REACT_APP_apiKey,
  authDomain: process.env.REACT_APP_authDomain,
  projectId: process.env.REACT_APP_projectId,
  storageBucket: process.env.REACT_APP_storageBucket,
  messagingSenderId: process.env.REACT_APP_messagingSenderId,
  appId: process.env.REACT_APP_appId,
  measurementId: process.env.REACT_APP_measurementId
};

const app = initializeApp(firebaseConfig);
export const firestore = getFirestore(app)

Test Your Firebase Connection

You can test the connection by submitting dummy data to Firestore. Start by creating a handles folder inside your project's src directory. Create a submit handler inside this file. You can call this handlesubmit.js, for instance:

        import { addDoc, collection } from "@firebase/firestore"
import { firestore } from "../firebase_setup/firebase"
 
const handleSubmit = (testdata) => {
    const ref = collection(firestore, "test_data") // Firebase creates this automatically
 
    let data = {
        testData: testdata
    }
    
    try {
        addDoc(ref, data)
    } catch(err) {
        console.log(err)
    }
}
 
export default handleSubmit

Then inside App.js:

        import './App.css';
import handleSubmit from './handles/handlesubmit';
import { useRef } from 'react';
 
function App() {
  const dataRef = useRef()
 
  const submithandler = (e) => {
    e.preventDefault()
    handleSubmit(dataRef.current.value)
    dataRef.current.value = ""
  }
 
  return (
    <div className="App">
      <form onSubmit={submithandler}>
        <input type= "text" ref={dataRef} />
        <button type = "submit">Save</button>
      </form>
    </div>
  );
}
 
export default App;

Run your React app and try submitting data via the form. Refresh the Firebase database console to see the submitted information in your collection. With the basics in place, you can explore many other things Firebase can do to see how best to use it.

Build on the Go With Firebase and React

Firebase is a versatile backend-as-a-service solution that allows you to scale your app effectively. Once you connect your React app, you can leverage its many features to build your website to your liking.

For instance, the Firebase authentication toolkit is one of the features you might want to explore.