Skip to content

Instantly share code, notes, and snippets.

View chrissycooper's full-sized avatar
😌

Chrissy Cooper chrissycooper

😌
View GitHub Profile

React Router Prework

Questions / Readings

Router Overview

React Router is a library that allows us to make our single page React applications mimic the behavior of multipage apps. It provides the ability to use browser history, allowing users to navigate with forward / back buttons and bookmark links to specific views of the app. Most modern sites use some form of routing. React Router exposes this functionality through a series of components. Let's start by looking at the overall structure of an app using router:

  1. Take a look at the quick start page of the React Router docs. Take note of the syntax and organization of the page. No worries if this looks unclear right now! (nothing to answer here)
  1. What is a "data model", and how does it relate to the DOM in a front-end application?

The data model is the part of the application that deals with the data, the variables, objects, and arrays of the application and keeps track of them as they change. Take for example the Hotel project we just finished in Mod 2. The data model includes the lists of room objects and all of their properties. It's the same for the customers data and bookings data. The data model would update the list of bookings when one is created or deleted. It updates the data on the server side and the DOM side. The DOM, or Document Object Model is how and when that data will be displayed on the client side for the user. The DOM is the ultimate visual represenation of the data model. For example, when a customer signs into the website, the data model would ensure that the DOM would show only the data that pertains to that user.

  1. What is a "framework?" And how does it differ from a "library?"

Frameworks are bundles of code that hel

Git - Check For Understanding

To start this assignment:

  1. Click the button in the upper right-hand corner that says Fork. This is now your copy of the document.
  2. Click the Edit button when you're ready to start adding your answers.
  3. To save your work, click the green button in the bottom right-hand corner. You can always come back and edit your gist.
  4. Remember to use the Preview button to check your markdown formatting before submitting this assignment.

Calendaring - CFU

To start this assignment:

  1. Click the button in the upper right-hand corner that says Fork. This is now your copy of the document.
  2. Click the Edit button when you're ready to start adding your answers.
  3. To save your work, click the green button in the bottom right-hand corner. You can always come back and edit your gist.
  4. As you are working, you can use the Preview button to check your markdown formatting.

Exercises