Tutorial: Using Firebase as a Realtime Database with React

Photo by Tony Trocino on Unsplash
  • Let’s begin by setting up our app. We will use create-react-app as a boilerplate. In your terminal, navigate to a directory of your choice and run npx create-react-app my-firebase-puppy-app.
  • Next, set up a Firebase project in your browser:
  • Now, let’s add these secrets to a .env file, and also add the .env file to your .gitignore so the secrets stay secure:
  • Let’s also create our Realtime Database. In the Firebase console, on the menu on the lefthand side, click “Realtime Database”. Then click “create database”. Click next and then “start in test mode”, so we can read and write to the database.
  • Now that we have the secrets taken care of, let’s configure Firebase within the app. First thing we have to do is install Firebase. In the terminal, run npm install firebase.
  • Let’s use Firebase to create a simple app that lets us list puppies and record their favorite toys. In your code editor, inside of the src folder, create a components folder. Inside the components folder, create a folder for puppies, a folder for toys, and a folder for firebase. In each of those folders create an index.js file.
  • In the firebase folder, create 2 more files: firebase.js and context.js. In firebase/firebase.js, set up the app configuration and import firebase/app as well as firebase/database. Now let’s create our Firebase class — this is where we’ll store api routes that will communicate with the Firebase Realtime Database:
  • Next, we will use React’s context API to provide Firebase to the highest level of our app — similar to the way we connect a store if you’re familiar with Redux. In firebase/context.js:
  • Then we will use our index.js file to export the components. In firebase/index.js:
  • Great, now we’re ready to officially hook up our app to our Firebase database. In src/index.js, let’s connect Firebase and change the entry point to be the puppies component (which we haven’t written yet):
  • Now let’s set up our components — we want one page that displays the puppies and allows us to add more puppies. Then we want another page that, brings you to a puppy’s toys page where we can view and add toys. This will give us a clear picture of how to add, access, and associate data in our Realtime Database. Create the Puppies (in puppies/index.js) and Toys (in toys/index.js) components (I’ve made these both class components so we can easily load data from firebase when the component mounts):
  • In the Puppies component (puppies/index.js), let’s set up a simple form that stores the text input on state. We will soon connect to Firebase and append that data to the database:
  • Great! The next thing we need to add to our component is a handleSubmit function, that will store our data in the Firebase Realtime Database. But before we do that, we have to write an API route to communicate with the database! In firebase/firebase.js, outside of the constructor we will write our API routes:
  • Now we will write a function in puppies/index.js that will send our data from the state to our Firebase database. Basically we will communicate with Firebase, push the puppy name into the puppies field in the db, and then reset the state:
Now, when you submit a puppy name, you can see it reflected in the realtime database!
  • Now that we have the puppies getting stored in the database, let’s load the puppies names onto our component as a list! This will give us good practice accessing data in the database. In puppies/index.js:
This is what our beautiful puppy component looks like in the browser once we’ve added data to Firebase and mapped through that data.
  • Looks gorgeous, absolutely gorgeous (lol)! Now we need to follow a similar process for the Toys component! Let’s begin with the backend api. This time, we want to create toys that get associated to one specific puppy. Our APIs in firebase/firebase.js will look like this:
  • Now let’s create a simple form in our Toys component that saves the toy name on state. In toys/index.js:
  • Let’s connect our components using react routing. In the terminal, run npm install react-router-dom. Now let’s set up the router and the route paths in src/index.js:
  • Then in puppies/index.js, import Link from react-router-dom, and wrap the list item text in a link that leads to the toys component:
  • Now we can see our Toys component when we click a puppy’s name! Let’s practice writing a submit function that will add toys to the database using the api route we wrote in firebase/firebase.js. Don’t forget to import withFirebase and export the component withFirebase too! In toys/index.js:
This is what the database will look like once you enter a toy name! We have puppies, which stores all the puppy names and ids, and then we have toys, which stores the puppy ids and then the toy ids and the toy names.
  • And now let’s access the toys that exist in the database for a specific puppy when the component first mounts and then display the toys in a list. Let’s also add a link that takes you back to the puppies page. In toys/index.js:
  • Perfect! Now we can view puppies, add puppies, view all the toys that belong to a puppy, and add toys that belong to a puppy. Now I’ll show you how to delete a toy. In firebase/firebase.js, let’s create a new API route that accesses a toy at toys/puppyId/toyId:
  • Next, in toys/index.js, let’s create a function to handle deleting a toy from the db, and create a button inside the mapping function for every toy that will take the toyId and pass it into the delete function, thus deleting from Firebase:
  • Yay! Now when you click the x on the toys page, the toy disappears from the list and from the database. Update is also very straightforward. We’ll use the same API route we’ve already written (modifyToy), we’ll simply create a form that lets you update a name, it stores it on state, and then sends the update as an object to the database. In toys/index.js:
The “final” puppies component
The “final” toys component

--

--

--

Hey, I’m Betsy! I’m a full-stack software developer. I also love traveling, running, rollerskating, and puppies.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Coding Terms | MONKEY PATCHING

I’ve Deleted Postman from my Machine Permanently

IAC with Google Cloud Storage

Revolutionising component imports with Webpack aliases

How to properly internationalize a React application using i18next

Java hashMap.keySet()

Scaffolding a project using lerna and lerna-changelog

Scope and the Scope Chain

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Betsy Groton

Betsy Groton

Hey, I’m Betsy! I’m a full-stack software developer. I also love traveling, running, rollerskating, and puppies.

More from Medium

Easiest way to create secure and random strings for your JWT, session and cookie secrets.

Deploying React App on Apache Tomcat

Unidirectional and Bidirectional Data Flow — The Ultimate Front-End Interview Questions Guide Pt: 1

Improve the performance of your React and React Native applications: Caching and managing your API…