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

Would you mind including an export of your firebase instance?

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.

+1 I really need the data to go any further

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

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.

Here's some JSON to seed your database.

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.

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

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?

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

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.

Hi,

I get this weird problem whenever I require ReactFireMixin:

Uncaught TypeError: Cannot set property 'ReactFireMixin' of undefined

Did you npm install reactfire?

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.

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

Hi, Instead of Github, here is an archive. https://drive.google.com/open?id=0BxyeG-X_QaYVUkp1bWtSTk43Q28

I just requested access to the doc.

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

Any ideas on this issue?

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.

Rather than downgrading the version of reactfire, you can also update your code in NotesList.js. In the part where you are using the map function to generate an array of list items, just update the contents of the list item from {note} to: {note['.value']}

Looking at the Firebase docs, I'm still not positive this is the "correct" way to do this, but it works for now.

I was still experiencing this even with the 0.4.0 of reactfire, seems there were some updates on firebase as well. Along with the reactfire@0.4.0 I also had to use npm install firebase@2.2.7 --save before the tut stopped showing the value:key in the notes.

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?

I was able to get the desired results by modifying line 7 of NotesList.js to reference only the value of the database key:value pair.

{note['.value']} instead of {note}

EDIT: Looks like Nate beat me to it by a bit. That's what I get for not reading page 2.

The lesson video has been updated!

Cheers to that!

Tyler, I am having the same issue in the updated tutorial. "Cannot set property 'ReactFireMixin' of undefined" is there anyway to solve it?

Hi Kennly,

Make sure all your code is matching what's in the Repo (https://github.com/tylermcginnis/github-notetaker-egghead/blob/05-reactfire/app/components/Profile.js) quite a few people have gone through the updated videos (including myself again) and we haven't had any issues. If issues persist, post your code on github and tweet me the link and I'll check it out.

Installed reactfire and got this warning:

npm WARN In reactfire@0.5.1 replacing bundled version of react with react@0.13.3

From Cli,

$ npm list react

├── react@0.14.3 └─┬ reactfire@0.5.1 └── react@0.13.3

Does it mean reactfire uses react@0.13.3 instead of the installed version, 0.14.3?

Yeah you're exactly right. I'm actually not sure why React-Fire has React as a dependency. I'm investigating further right now.

I keep getting these warnings that look like these: WARNING in ./~/react/lib/ReactBrowserEventEmitter.js There is another module with an equal name when case is ignored. This can lead to unexpected behavior when compiling on a filesystem with other case-semantic. Rename module if multiple modules are expected or use equal casing if one module is expected.

Check that the spelling on your imports is correct. If everything looks good, compare what you have with what's in the Repo on github.

Hi Tyler,

For what it is worth, I'm having the same problem as Kennly. I can't see where the code varies. Seems to be a webpack issue in my opinion.

	  if (true) {
	    // AMD
	    !(__WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_RESULT__ = function () {
	      return root.ReactFireMixin = factory();
	    }.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
	  } else if ((typeof exports === 'undefined' ? 'undefined' : _typeof(exports)) === 'object') {
	    // CommonJS
	    module.exports = factory();
	  } else {
	    // Global variables
	    root.ReactFireMixin = factory();
	  }

The error occurs on the line return root.ReactFireMixin = factory(); where apparently root is undefined. Not sure what to make of it.

6:14: "Whoa"? XD

How do you get your npm install to look so good with the real-time feedback?

Hi Ashwin. Not 100% sure to be honest. Which version of npm are you running? I'm running npm3.

In case anyone else runs into this, I was getting Uncaught Error: ReactFire: this.state.notes is not bound to a Firebase reference. The this.unbind('notes') was the culprit, so I removed it. Based on previous comments it sounds like the unbinding happens automagically anyway.

I'm having trouble with my code - I don't seem to be getting the objects with the key and values. I am using gulp instead of webpack, but was wondering if someone could have a look at my code and see where I am going wrong? https://github.com/claireynz/git-search

You're using an old version of React Fire. You're using 0.4.0 when you need to use >0.5.0

Hi Tyler, I just subscribed today to egghead.io. Thanks for the wonderful videos. I am currently working on a migration project to migrate GWT to React Js. The legacy application has a bunch of servlets that interacts with GWT code. What would be a good approach to have React JS code interact with servlets? Can you point me to any resource that you may have in egghead?

Hi Tyler,

I am having the same problem with the Cannot set property 'ReactFireMixin' of undefined Error and can't see any code errors. I have just started Egghead.io today specifically for this course. Can you see any problems in my Code?

https://github.com/pdhancock/egghead-react-gh-notetaker

I am stuck at Video 5..

Thanks,

Philip

Hi Tyler,

For what it is worth, I'm having the same problem as Kennly. I can't see where the code varies. Seems to be a webpack issue in my opinion.

	  if (true) {
	    // AMD
	    !(__WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_RESULT__ = function () {
	      return root.ReactFireMixin = factory();
	    }.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
	  } else if ((typeof exports === 'undefined' ? 'undefined' : _typeof(exports)) === 'object') {
	    // CommonJS
	    module.exports = factory();
	  } else {
	    // Global variables
	    root.ReactFireMixin = factory();
	  }

The error occurs on the line return root.ReactFireMixin = factory(); where apparently root is undefined. Not sure what to make of it.

Hmm your code does appear to be the same but I opened my version and then moved that bundle over to your project and it worked - so there's gotta be a difference somewhere. I'll keep looking and see if I can find anything.

Hi,

I'm pretty focused on learning React, and I'm struggling to find what I need in Firebase. I wish you'd gone a little more slowly in teaching the basics of Firebase and introduced the concepts in a whole additional video - this was glossed over very quickly.

Hi Rebecca,

That's a fair request. Have you checked out the Firebase docs? They've actually put a lot of thought and emphasis on them so they should have everything you're looking for. Let me know if I can help.

Tyler

I'll second Rebecca's request. I was making good progress in the tutorial until the Firebase part.

Do I need to change the firebase url in Profile.js to my specific account somehow? Or should the line work as shown in the tutorial and github file?: this.ref = new Firebase('https://github-note-taker.firebaseio.com/');

I'm working from a Cloud9 ide -- might that introduce some 3rd party authentication requirement when trying to reach firebase?

The URL should still work and Cloud9 shouldn't be causing problems. Check your code against the master repo for any differences if you're having issues. https://github.com/tylermcginnis/github-notetaker-egghead. If you're still stuck let me know and I can help.

Hi Saravanan, I have 0 experience with GWT so I can't offer many suggestions. Sorry!

Got it working -- though more by accident (hindered by an obvious lack of logical thinking on my part).

a) I had to first (duh) type a user name that exists in your firebase instance (i.e., 'tyler') -- suddenly I had the notes. I had a random user name in the url from playing around in the prior lessons -- so of course no notes were found for this random username.

b) my chrome dev tools is not showing the listening activity (though has behaved generally per the tutorial) -- this threw me off as there's no evidence of the listening -- still not sure why this is, but once I had a good username that pulled notes, this is less of an issue.

c) to do the interactivity proof you show in the tutorial, I had to substitute your firebasio.com url with my own account (and using the json data provided at the request of other users). This seems obvious now, but from the tutorial and your reply above I was working under the impression that I wouldn't need to have an account or change the url to do exactly as the tutorial shows. So much is explained so well (and so specifically) that the lack of a qualifier in this case tripped me up. ("of course you'll need to type a username that's in the database, like 'tyler' or..."; "if you want to test the interactivity you'll need to create your own firebase account, upload the json data and change the url to your account...").

So, small complaints aside, I'm a customer because your tutorials are well paced, very specific, and comprehensive -- even if on occasion I need the obvious stated just a little more obviously.

Thanks for the in depth and very rational critique. Feedback is noted.

i am getting following error in console. How could i fix it?

Uncaught Error: Invariant Violation: Objects are not valid as a React child (found: object with keys {.value, .key}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of Notes.

i am using the same code at https://github.com/tylermcginnis/github-notetaker-egghead/blob/05-reactfire/app/components/Profile.js

In Notes change <p> {this.props.notes}</p> to <p> {JSON.stringify(this.props.notes, null, 2)}</p>

Any chance you can update this to work with rebase and ES6?

like this?

Ahhh thank you! I was making the same mistake (a) in the above comment, using a random name not included in the seed data

Uncaught TypeError: Cannot set property 'ReactFireMixin' of undefined

Did anyone figure this out? I have the same problem. I have the excact same code, Uninstalled/reinstalled all the packages to the versions used in the tutorial, remade the bundle file... but still get the same error :(

Thank you, I muddled through all the same issues as well, and having to type a username that existed in the database was tripping me up.

here's solution https://github.com/blackendstudios/react-students/commit/2757df9c76fc1f5e37557abe46b8b9e6d2507b06#diff-7165d48e1b473307742a0db5952bbba2L27

Nothing happens when I change the url from /Github to /Grobiou. Both are present in the JSON file. I was expecting change in notes... May be you will cover that in next video?!

Great Solution !

I used your URL given in the video just to see if things worked... the short answer is things did, but there's hundreds of rows in the database now under the /tyler profile. Which locks up my browser, to the point that I thought I broke something. :-D

Importing the data into my own Firebase instance fixed this but maybe the "original" needs some cleanup.

Done.

The link doesn't work anymore :(

It's now May 2016, and Firebase still has no plan on supporting ES6, or developing a higher-order React component so that we don't have to do Mixins. I'm learning React from the beginning right now. I have a feeling this tutorial series needs to be redone with ES6 from the beginning, and using another persistence technology that works with ES6 and modern React, and the ability to persist without an active internet connection for those of us that want to run through this tutorial offline.

Hi Justine,

You're making two very large assumptions here. First is that Firebase doesn't work with React without using React Fire and second is that using Classes are the standard way to create components in React.

I actually don't use React Fire because I don't feel like it's needed and it definitely doesn't work if you add a data model like Redux.

Also I, along with many Facebook developers, still use createClass over Classes in React.

Tyler

Tyler, why do you and "many Facebook developers", use createClass over classes in react?

Hello all, if you're doing this post May 2016, in your Firebase you will need to change the Rules like so to get the data to display:

{ "rules": { ".read": "auth == null", ".write": "auth != null" } }

For those looking to use the new Reactfire API, this got me going. https://firebase.google.com/docs/web/setup#add_firebase_to_your_app
You also need to include your config var, where is the best place for that to go?

var config = {
  apiKey: '',
  authDomain: '',
  databaseURL: '',
  storageBucket: '',
};
Firebase.initializeApp(config);

componentWillMount: function(){
    this.ref = Firebase.database().ref('usernames');
    var childRef = this.ref.child(this.props.params.username);
    this.bindAsArray(childRef,'notes');
  },

Thanks, Russell. I can now read data from Firebase!

For now I'm using like this:

// Profile.js
...
var Notes = require('./Notes/Notes');
var ReactFireMixin = require('reactfire');
var Firebase = require('firebase');

var config = {
  apiKey: "AIzaSyA9IdUO3ZMpI3-pKEuzDceKccTiGeGOp4Y",
  authDomain: "kuroski-note-taker.firebaseapp.com",
  databaseURL: "https://kuroski-note-taker.firebaseio.com",
  storageBucket: "kuroski-note-taker.appspot.com"
};
Firebase.initializeApp(config);
...
componentWillMount: function() {
  this.ref = Firebase.database().ref('/');
  var childRef = this.ref.child(this.props.params.username);
  this.bindAsArray(childRef,'notes');
},
componentWillUnmount: function() {
  this.unbind('notes');
},
render: function() {
...

And don't forget to change the rules from Realtime Database (because for now we are not authenticated)

{
  "rules": {
    ".read": true,
    ".write": true
  }
}

I have my code structured exactly as you mentioned, but I keep getting this.bindAsArray is not a function. I've also changed my rules in firebase to true but I'm still not able to get pass this error.

I just figured it out. I was writing my code with ES6. To get your code working with ES6 classes you need to import react-mixin and include it in your code like this:

reactMixin(Profile.prototype, ReactFireMixin);

Thank you, that fixed the issue I had

Thanks Russel

THANKS Russell! Can we pin this some how?

Do people really call 'li' tags "lie" tags?

My Notes list on the web page are empty. I am using the last version of ReactFire and Firebase , so I have the next code, can you please tell me if there is any mistake ? Thanks

var Firebase = require('firebase'); var config = { apiKey: "XXXXXXXXXXXXXXXXXXXX", authDomain: "reactproj-XXXX.firebaseapp.com", databaseURL: "https://reactproj-XXXX.firebaseio.com", //storageBucket: "<BUCKET>.appspot.com", }; Firebase.initializeApp(config);

var Profile = React.createClass({ mixins: [ReactFireMixin], getInitialState: function(){ return { notes: [1,2,3], bio: { name: 'Tyler McGinnis' }, repos: ['a', 'b', 'c'] } }, componentDidMount: function(){ // V2 of reactfire // this.ref = new Firebase('https://reactproj-abba1.firebaseio.com/'); //var childRef = this.ref.child(this.props.params.username); // v3 of react fire: var childRef= Firebase.database().ref(this.props.params.username); this.bindAsArray(childRef, "Notes"); }, componentWillUnmount: function(){ this.unbind("notes"); },

Russel's comment is still golden. #google #firebase #rules

Hi Max, I got the same error as you mentioned. But I don't quite understand your solution, could you make it more detailed? thanks

Just sort it out, thanks

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? Hey! You have to change this "var childRef = this.ref.child(this.getParams().username);" with var childRef = this.ref.child(this.props.params.username)

you need to first put this into your project. var ReactFireMixin = require('reactfire');

Could you explain how you fixed it? I also am having trouble applying Max's solution.

In case no one else has mentioned it: Google Chrome currently doesn't seem to be displaying the GUI for Firebase correctly (cannot find JSON import area, for example), but you can work-around it by using Firefox.

Thank you!!

I'm getting the error: "TypeError: Firebase is not a constructor". I've tried following the Firebase docs; but, I still get the error. My 'Profile.js' code is the same as the transcript. UPDATE: I reinstalled firebase with the following: 'npm install --save firebase@2.3.2 '. I'm no longer seeing the TypeError message; however, the Notes array is empty. I imported the JSON data object giving in the discussion. I can see the data in my firebase project; but, not in the notetaker app.

At 7:40 I only got logged to the console the original notes value (from getInitialState) then an empty array. I looked at the rest of the comments on this thread, tried a bunch of the suggestions, and what ended up working was changing the rules in the database.

You can set rules to the database in your repo, or you can do it directly from https://console.firebase.google.com/project/${project name}/database/rules.

By default, the values are:

{
  "rules": {
    ".read": "auth != true",
    ".write": "auth != true"
  }
}

If you change it to this, it'll work:

{
  "rules": {
    ".read": "true",
    ".write": "true"
  }
}

Aside from that, I agree that the sidetrack to Firebase has been distracting from just expecting to learn React, but I've been meaning to get into Firebase just for the sake of things like prototyping apps.

The Firebase docs were a lot of help, particularly https://codelabs.developers.google.com/codelabs/firebase-web/#0

Also, Initially when I went to the project, I was using chrome and nothing was showing up on the ui, except the navbar, but it worked on Firefox. Sounded like someone else had this issue. I updated Chrome, and restarted my macbook pro, and it worked fine. Also worked fine on my windows 10 computer.

i still keep getting this error:

TypeError: Firebase.initializeApp is not a function at Object. <code> var ReactFireMixin = require('reactfire'); var Firebase = require('firebase'); var config = { apiKey: "AIzaSyeJ7NFv1Q", authDomain: "github-notapp.com", databaseURL: "https://github-om", storageBucket: "github-notetakot.com", messagingSenderId: "90270" };

Firebase.initializeApp(config);

this.ref = Firebase.database().ref('/');
var childRef = this.ref.child(this.props.params.username);
this.bindAsArray(childRef,'notes');

this tutorial really should go into the firebase part as well... wanted to learn React and not firebase..

also changed my rules in firebase to: <code> { "rules": { ".read": "true", ".write": "true" } } </code>

update:

got the firebase notes to pull from my own fb-db but it wouldn't iterate properly until i re-read react's docs on iterating

var notes = this.props.notes.map(function(note, index){ return <li className="list-group-item" key={index}>{note}</li> this worked for me instead of {note['.value']}

also what made firebase work for me was changing not to:

{ "rules": { ".read": "true", ".write": "true" } }

but changing it to: { "rules": { ".read": "auth == null", ".write": "auth == null" } }

I find this unexpected sideline into Firebase frustrating and a huge time-waster. And the links in the docs don't appear to work. (firebaseio.com is gone)

I'm getting the same Firebase.intializeApp is not a function error. Can we get an official update on how to use Firebase?

Just use local storage if you don't feel like messing around with firebase.

Hey guys, I was having trouble with the Mixins. I started tutorial differently from Tyler's initial steps (I used create-react-app). If you are using ES6(ish) like me and couldn't get it to work, try this - after a few days of struggle, I finally got it work using re-base (coincidentally, Tyler is the author). Here is the meat code that made it work for me:

//profile.js
...
var base = Rebase.createClass({
  apiKey: <YOURAPIKEY>,
  authDomain: <YOURAUTHDOMAIN>,
  databaseURL: <YOURDBURL>,
  storageBucket: <YOURBUCKET>,
});
class Profile extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      notes: ['whatever','you','want'],
      bio: {},
      repos: []
    }
  }
  componentDidMount(){
    base.syncState(this.props.params.username, {
      context: this,
      state: 'notes',
      asArray: true
    })
  }
  componentWillUnmount(){
    //this.unbind('notes');
    base.removeBinding(this.ref);
  }
  ... //the rest is similar as tutorial

And on Notelist, everything is the same except the mapping worked for me without .value: <li className="list-group-item" key={index}>{note}</li> Lastly, don't forget to check firebase rules

{
  "rules": {
    ".read": true,
    ".write": true
  }
}

Hope that helps! Don't forget to npm install rebase

Thank you Russell!!