Bootcamp Part 3: React Router & React–Redux–Firebase

Deadline: November 12th 11:59PM ET

This week, we will be working on expanding our basic React application to allow for multiple pages and connecting Firebase and React together. This week is a lighter coding workload than usual as it's a lot more of introducing new concepts than actually coding. As usual, if you're stumped, try to come out to one of our office hours to ask questions! Let's get into this week's material.

Video

Again, the videos are split up as follows (they are also linked in their respective sections below):

• React Router
• Intro to Firebase Realtime Database
• React-Redux-Firebase

You can find the slides here: Slides

Below is a "transcript" of the major steps of the coding, so you can easily come to this document to reference commands that you might have missed. It is not a replacement for the video itself because I explain more in detail conceptual aspects of what each command does. The "transcript" is to supplement the video and not the other way around!

React Router

Link to Video on React Router: Video

The easiest way to add multiple pages to your React application is to use a router; a router takes in requests from the user (the specific path/link the user wants) and dynamically renders the correct page (read React component) for the user.

1. Install React Router: npm install --save react-router-dom

2. Then in your index.js file, import the Router at the top:

   import { BrowserRouter } from "react-router-dom";

3. Then wrap your App component with the BrowserRouter:

   <BrowserRouter>
     <App />
   </BrowserRouter>

4. Follow the video to change the CardEditor and CardViewer components to be rendered on different routes/URL paths.

   • If you weren't able to catch some of my code, here are the changes I've made so far: Github link. You'll want to at the green highlighted changes, the code that I added.

TASK #1: Homepage

You are going to implement a Homepage component to be the / route/path for our application. A brief outline in words what needs to be done:

1. Create a new file Homepage.js, create a Homepage component, and export it, just like how we did it with the other components before. Decide if we should use a functional or class component (it doesn't really matter).

2. Add two links to be rendered, one linking to /viewer and the other linking to /editor.

3. Finally, add the / route to App.js and make it render the Homepage component, imported from Homepage.js.

Come out to my office hours, if this still doesn't make sense, or email/Slack me with questions!

Resources

Docs on React Router: https://reacttraining.com/react-router/web/guides/quick-start

Intro to Firebase Realtime Database

Link to Video on Firebase Realtime Database: Video

Link to slides: Slides

We need a way to save flashcard data permanently and persistently in a database. We will be using Firebase Realtime Database to do this! In short, Firebase Realtime Database is just a huge Javascript dictionary/object with strings, integers, and booleans as keys and values (called a JSON format).

TASK: Add flashcards to database

Create 2 decks of flashcards, each deck with a name and cards attribute. The name attribute will be a string and the cards attribute will be a list/array of 3 cards in your Firebase Realtime Database. (I know I mentioned 5 cards per deck in the video, but feel free to do only 3.) Each card should be an object that has a front and back attribute (just like the internal state in our App component). All your sets of flashcards should go under the same flashcards (or similarly named) path. You will also need to come up with a key for both of your flashcards decks (can be as simple as deck1 and deck2).

• A small hint (do try out the task on your own first!): https://pastebin.com/CUiWLYfj

Resources

More on structuring your Firebase data: https://firebase.google.com/docs/database/web/structure-data

Setting up Firebase

Link to Video on React/Firebase (and Redux) connection: Video

There is some setup necessary to connect Firebase to our React Application. (We only set up Firebase hosting last week, so this week is actually connecting Firebase to React.)

TASK #2

1. Install Firebase for our React app: npm install --save firebase

2. Go to Firebase to register your app. Then copy the config to your index.js file.

   import firebase from "firebase/app";
   
   const firebaseConfig = {
     apiKey: "some_api_key",
     authDomain: "blah.firebaseapp.com",
     ...
   };
   
   firebase.initializeApp(firebaseConfig);

   • If you weren't able to catch some of my code, you can find my changes for this part here: Github link. You'll want to look at the green highlighted changes, the code I added.

Connecting Firebase and React with React-Redux-Firebase package

The react-redux-firebase package is a wrapper around how we communicate with Firebase, whether it’s the database, authentication, etc. It abstracts away a lot of the nasty stuff and leaves us with simple functions that we can call to interact with Firebase.

Moreover, what is Redux? In simple terms, you can think of it as a global state manager. Each component has its own individual state, but with Redux, you can keep a global state with which each component has access to. When we take data from Firebase, we store it locally in our app and Redux is where we store it; that's why Redux is called a global STORE. We don't really need to know how Redux works, since again a lot of it is abstracted away for us.

TASK #3

1. Install the following packages: npm install --save redux react-redux react-redux-firebase

2. Install the Redux DevTools Extension (optional, but super helpful!!!). I use it a lot to explain things, but it's just a really nice way to visualize everything. https://github.com/zalmoxisus/redux-devtools-extension#readme

3. Follow the video to initialize React-Redux-Firebase and connect to React app. I use the Getting Started section from the React-Redux-Firebase docs as a guide to this part.

   • If you weren't able to catch some of my code, you can find my changes for this part here: Github link. You'll want to look at the green highlighted changes, the code I added.

Resources

Want to learn more about Redux? https://redux.js.org/introduction/getting-started

Once you're done

Fill out this form when you're done! Make sure to deploy your app and push your changes to GitHub (be sure to be doing this as you go), so we can take a look. Also, export your database as a JSON to upload to the form (click the 3 dots on the right corner of your Firebase Realtime Database).

Form link: https://forms.gle/iMFkPvi3xa7AMSdN6