The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

Building a React.js App: Using ReactFire to Add Data Persistence

Building a React.js App: Using ReactFire to Add Data Persistence

14:09
In this video, we’ll tie in ReactFire from Firebase in order to implement persistence into our application for our Notes component as well as walk through how to properly display a list of data. [Click here for JSON data to seed your database.](http://cloud.egghead.io/code/0s1a2x2X3P2c)
Watch this lesson now
Avatar
egghead.io

In this video, we’ll tie in ReactFire from Firebase in order to implement persistence into our application for our Notes component as well as walk through how to properly display a list of data.

Avatar
Chris

Would you mind including an export of your firebase instance?

Avatar
Kent C.

If I'm not mistaken, ReactFire will unbind the refs that you bind automatgically (here).

However, because you create an additional reference to a Firebase that is not explicitly bound, do you not have to clean up that one? I'm talking about the this.ref = new Firebase('...'); I'm asking honestly. I don't know whether you have to clean that up yourself or not.

Avatar
Paul

+1 I really need the data to go any further

In reply to Chris
Avatar
Michael

+1 on the data. Would it be possible to add this to the Github repo @Tyler?

Avatar
Benjamin

I just created my own data at Firebase. I only made one user. Also, I've never used Firebase before. It took me about 30 min (including the Firebase tutorial) to figure it out.

Avatar
Joel

Here's some JSON to seed your database.

Avatar
Marcelo

I see some people I little frustrated because of the Firebase part: just create an account in case you don't have one. In Firebase go to Data in the upper right corner. Go to this link http://cloud.egghead.io/code/0s1a2x2X3P2c and copy that JSON or download the file, you once do it, create a JSON file with that info, then hit Import Data, and select the JSON file you just create. That's it.

Avatar
miguel

you have any idea why the data i am getting is returning both the property and value, instead of just the value like in the video

In reply to Marcelo
Avatar
miguel

componentDidMount: function(){
this.ref = new Firebase('https://githubnote-taker.firebaseio.com');
var childRef = this.ref.child(this.getParams().username);
this.bindAsArray(childRef, 'notes');
}
This is what i have, but when i run this, my notes shows both the property and the value like this
Notes: What a guy-JugSizVlM-1ijz6OPxZNew note-JugSlbdwr9jTIZZjurt
What am i doing wrong? how do i get just the value like in the video?

Avatar
miguel

There was an update to ReactFire on the 15th and i think that had something to deal with it, still not sure how to fix it

In reply to miguel
Avatar
Joel

Talked to Tyler and he said the new 0.5.0 release of ReactFire is causing issues and that for the sake of the lesson you will want to explicityl npm install reactfire@0.4.0 --save to use v0.4.0 for now. We will update the video as soon as possible, but the "old" version works fine.

In reply to miguel
Avatar
Jesper

Hi,

I get this weird problem whenever I require ReactFireMixin:

Uncaught TypeError: Cannot set property 'ReactFireMixin' of undefined

Avatar
Tyler

Did you npm install reactfire?

In reply to Jesper
Avatar
Jesper

npm install reactfire@0.4.0 --save

console inspect shows me reactfire package file line 16 as an error. So its there and all, however itself triggers an error.

this is how i require:
var ReactFireMixin = require('reactfire');
and it instantly gives an error.

In reply to Tyler
Avatar
Tyler

Hmmm. Mind throwing it up on Github and I'll take a look?

In reply to Jesper
Avatar
Tyler

I just requested access to the doc.

In reply to Jesper
Avatar
Aarron

Getting the same error as Jesper...
Uncaught TypeError: Cannot set property 'ReactFireMixin' of undefined

Any ideas on this issue?

Avatar
Tyler

You're correct on the ReactFire automagical unbounding comment. (but explicit is better, right? :) ).

About this.ref, I've never worried (or seen anyone worry) about cleaning up any new instances of Firebase. I could be mistaken (really hope I'm not) but I don't think you have to clean up instances of Firebase like you would, say setting an actual listener.

In reply to Kent C.
HEY, QUICK QUESTION!
Joel's Head
Why are we asking?