React and Firebase with ReactFire

React from Kent

React becomes incredibly powerful when coupled with a real-time backend like Firebase. See how easy it is to bring the two together and chat with Star Wars characters while you're at it.

[00:00] My name is Kent C. Dodds, and I'm going to be talking about ReactFire. If you don't know what React and Firebase are, then I recommend you go look at them. I'm going to give an intro to how to integrate the two using ReactFire, which is a library created by the Firebase team to integrate with React really well.

[00:17] We have a demo application here. I'll just explain briefly what it does. First, you have the app. That's everything that you see here. That's pretty simple. Then you have the demo. That's everything inside of the area below the line.

[00:32] Then you have the ChatClient. This is what is holding our state. That's everything right here, between these two components here. It's holding the state for the messages and for adding a message. You have Messages and MessageInput.

[00:48] Those are our other two components, Messages, this list right here, and MessageInput. That's what this is here. This also has a getInitialState with messages. We have some initial messages that we have down here, just a couple quotes from "Star Wars" and a working order.

[01:03] We have Kent C. Dodds. I want to chat with Han Solo, Luke, and Princess Leia. I say, "Sup guys!" Unfortunately though, this isn't persisting. This isn't being sent to a server or anything. If I run with JS again, you see that's not actually being brought back in the list because that list is hard-coded.

[01:24] We want to be able to communicate with the back end. That's what we're going to be implementing in this intro to ReactFire. There are a couple things that you need to do so that you can use ReactFire.

[01:36] First is add these scripts. I've got those copied in there. If we open up our HTML and after we have added the React script to our page, we'll add the Firebase script and the ReactFire script.

[01:52] That added a couple globals that we'll be using here, but the only component that's really going to be using ReactFire is the one that holds our state and that cares about the state that we're going to be getting from Firebase. That is our ChatClient.

[02:09] We're going to add a mixin. It is called...It's on our global..."ReactFireMixin." Instead of messages being this getInitialMessages, we're going to make that an empty array. Now this is boring, but we can get rid of this bloat, which is nice.

[02:34] Now we have no messages. It's just set to an empty array, so we need to say, "Hey, Firebase. Get me my messages." We'll add a componentWillMount function here. This is where we are going to use this ReactFireMixin.

[02:49] The mixin adds a function to our component, called "bindAsArray." We pass it a Firebase reference. A Firebase reference is an instance of Firebase. We say, "new Firebase."

[03:06] We give it a Firebase URL. I've copied that into my CSS comment here. We'll paste that in here, and then we're going to say, "Hey, Firebase. I want you to add it to the messages property on my component."

[03:25] Now you can see everything is loading. In my Firebase, it's actually the same as what I've hard-coded before. That won't change, but you will see some cool stuff with this when we update our addMessage.

[03:41] Instead of setting our state, we need to tell Firebase, "Hey. There's a new message. Go send that message to Firebase." The mixin adds an object to our component, called "firebaseRefs." 

[03:54] We'll say, "this.firebaseRefs." It's the same name as our state property, ".messages." This is our array. All we have to do is say "push," and we'll push the newMessage. Now we should be all up and going on Firebase.

[04:16] Just to test this out to show you that this is actually working, we're going to open up this output in another tab. Let's open up two browsers here, windows here. You can see we've gotten the same messages here. Let's just scroll down.

[04:34] I'm going to be Kent C. Dodds over here. I'll be Luke Skywalker over here. In response to Han Solo, "No reward is worth this," I'll say, "Yes it is!" Watch carefully, over here. It gets added immediately, in real-time. That's something cool with Firebase. I'll say, "Yeah! Luke is right! Maybe?"

[05:04] You see, in real-time, back and forth, that is getting updated. All that we had to do to make this work...If we refresh, you'll see those were actually persisted, added to the Firebase. Those come back when I come back here.

[05:21] All that we had to do to make this work was first, in our HTML, we had to load the scripts. You can get those from Bower or NPM, if you like. Then we had to take our chat client, which is holding the state of our application and provide a mixin, ReactFireMixin.

[05:43] Then we just set our state to nothing because that's going to be coming from ReactFire. We load that state with componentWillMount. We use the ReactFireMixin function called "bindAsArray."

[05:56] We bind it with this Firebase URL here and bind it to our messages property on our state. With addMessage, instead of setting our state, Firebase will do that for us. We just push the newMessage onto our messages. 

[06:10] Another cool thing that the Firebase mixin will do is it will automatically unbind this Firebase reference from your messages when the component is going to unmount. You don't have to worry about managing your Firebase. You just use it and make something awesome. That's how you integrate React with Firebase.

Course

React from Kent

React and Firebase with ReactFire

Share this video with your friends