Day 3: Data Persistence with ReactFire and Firebase

Harini Janakiraman
May 10, 2016 · 2 min read

#100DaysOfCode : Building a React App contd…

Project (1 Hour): Learn how to add data persistence to the app using ReactFire and Firebase which provides a realtime JSON database for storing and syncing your app’s data. Why firebase? Firebase + Batch (for push notification) has been a popular choice in the developer community after Parse was discontinued. Build notes component that shows data seeded in firebase.

All the code for this project can be found on my github

Step 1: Install ReactFire and Firebase

npm install --save reactfire firebase

Also create a firebase account, you can use this JSON file to seed data.

Step 2: Setup Firebase and upgrade Profile component

Require all packages that are needed such as reactfire and firebase as specified in the Profile component below.

Add “componentDidMount” lifecycle event that is triggered when component mounts on the view. In this event, create new instance of firebase and set it up to point to your newly created firebase URL.

Note we add a keyword mixin when we create react component which appends reactfire functionality to “this” instance. The “bindAsArray()” method is available due to reactfire mixin, can now be triggered on “this” instance. “bindAsArray” takes two arguments.

First is the data from firebase that you want to bind to the view. In our case, we go one level deep on root firebase object to retrieve notes on a specified “this.props.params.username” from our request URL.

Second is the property on state that your want to bind your firebase data to, which in our use case in “notes”.

componentWillUnmount event is finally added to unbind reactfire and remove listener on it when component unmounts.

Step 3: Notes List component

Create NotesList.js which will contain a bootstapped unordered list where each list item is populated from an array passed to the component. In our example we use the map “” that allows you to iterate over all elements in the array, modify it with callback function and spits out each element from modified array.

In our example, as per the above code, we take each note value and create a bootstrapped list item which then gets rendered within unordered list.

Step 4: Transpile and run

webpack -w/ReactApp/public/index.html#/?_k=vodu5g/profile/test
Image for post

Finally run webpack and open your index page with “/profile/test” appended to it in browser and your component should look like this output image with notes listed out .

Day 3 of #100DaysOfCode DONE

If you enjoyed this, please click 👏 so that others can enjoy it as well. Follow me on Twitter @HariniLabs to get the latest updates or just to say Hi :)

PS: I curate a bi-weekly #WomenInTech newsletter for a dose of inspiration from the world of tech and yes men can signup too! Get it here :)

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

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