Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m

Next lesson playing in 5 seconds


Free Preview: Building a Wiki With React and Firebase


  • Overview
  • Transcript

React is a powerful and effective JavaScript library. In this course, Tuts+ instructor Andrew Burgess will show you how to use it to build a multi-user web application from start to finish.

You'll also learn how to use Firebase, a cloud-hosted data back-end for web and mobile applications. In this course, you'll use Firebase to implement a very simple JSON-based data store for the course project: a live collaborative wiki.

We've built comprehensive guides to help you learn JavaScript and React, whether you're just getting started or you want to explore more advanced topics.

1. Getting Started

1.1 Introduction

Welcome to building a wiki with React and Firebase. I'm Andrew Burgess and I'll be your instructor for this course. React is a really, really popular framework right now. And so we're going to be building a web application with React in this course. But that's not all we're going to be using. We're also going to use Firebase which is a back-end for data storage. Firebase can do a lot of powerful things, but we're just going to use some of its basic features, which include using it basically as a JSON database that we can store all of our data in. In this project, we're going to be building a wiki, but it's more than just a wiki. It's going to be a live updating wiki so that multiple users can be editing the same page at once and see each other's changes almost immediately. This will be really, really simple with React on the front-end. And it allows us to take advantage of the live data that Firebase gives us. We're also going to be using ECMA Script 6 or ECMA Script 2015. This is the latest version of JavaScript. And all of its features will be standard in browsers and other platforms, n the near future. So it's a good idea to get started learning those features. And so that's what we're going to do in this course. All right. So if you're ready to get started building this web application. Let's go.

1.2 Application Demo

Before we get started building this application, let's take a look at the final application so you have a good idea of where we'll be heading. I'll load up our application in the browser and then I can go ahead and sign in. Now currently there is no content in this Wiki. So I'll start by adding a new page. I'll type in the page title, hit enter, and we've created a new page. Notice that not only is the page displayed in the list of pages on the left hand side, but we also are moved directly to that page and you can see that on the right. Now I can click the add section button to add a new section. And I can start typing some markdown text, right inside this text box. When I'm finished, I just have to click outside the text box. And you can see that where rendering are marked down as HTML. I can go ahead and add another section if I like to as well. In this one let me actually use a markdown link. You can see that if I click that link, I'm taken to the links location. Now one of the important features that we wanna build in this application is collaboration. So I'm gonna open a second window here. And I'm going to go ahead and view our Dogs page. And when I do that, you can see that all the content is displaying exactly as it was. If I go back to the other browser window where I'm logged in, and then make some changes to our markdown, then when I go back to our second window you can see that those changes are automatically reflected. So our application does live updating. In my second browser window here, I can sign up for a new user account. And now you can see I have the ability to edit this wiki page myself, since I'm signed in. I can click one of our sections, and it converts back to the markdown text in a text box so that I can actually make some changes. Noticed that the other user has that section grayed out now. They can't make changes to the same section that I'm editing. When I click outside that section, it updates in the other browser window as well. So you can see that not only does this update live, but it also prevents two people from updating the same section at the same time. The first user here now can make some changes. We'll change the word great to awesome in bold, and you can see that pretty much instantaneously, the other users see the updates. I can go ahead and create a new page as well of course. And then let's go back to our dogs page. And I can actually link to our cats page by using double square brackets. Now when I click the cats link there I'm taken directly to the cats page through our applications routing system. We don't actually do a whole page refresh. So these are the features that we're going to be building in this application. When you're ready to get started let's begin in the next lesson.