Intro to React Router

For this lesson, students should:

Understand components
Understand state and props

The first part is a demonstration of how Router works. Students can then work on each lab and the challenges.

Learning Objectives

Learn about routing with react
Using data from APIs and JSON files
Create a Stock Trading app

Preparation

First, we'll create a new app to learn how React Router works.

Create a new react app: create-react-app learn_react_router
cd learn_react_router
npm install react-router-dom

Once we're done learning the basics, students can clone this repository and use the starter files to get started with the labs.

What is React Router?

React Router is a module that makes it easy to make single page apps (SPAs). SPAs are web apps which load different sections of a website within the same page. The user feels as though they've never left the homepage because links swap out content and replace it with new content.

The main components of the router are:

BrowserRouter: The module that stores all the routes for the app as well as route history, current location and url.
Route: Used to define each individual route by relating each path to a specific component.

Since BrowserRouter is the parent component, we'll configure it in index.js. It would look like this:

import React from 'react';
import ReactDOM from 'react-dom';
import {
  BrowserRouter as Router
} from "react-router-dom"

import App from './App';

ReactDOM.render(
  <Router>
    <App />
  </Router>,
  document.getElementById('root')
);

Update index.js to include this code.

Next, let's add some routes. Open App.js and let's add let's import the routing components we'll need first.

import {
    Route,
    Link,
    Switch
} from 'react-router-dom'

Route is used to connect paths to components
Link is used to create links to Route paths.
Switch will find the first route to match a given path. Once found, it will stop looking, just like a Javascript switch statement

Now we need some routes. But first, let's create a new component that we can attach to a route:

About.js

import React, { Component } from 'react';

class About extends Component {
    render () {
        return (
            <div>
                All about stocks. Read it here, folks!
            </div>
        )
    }
}

export default About;

App.js

import React, { Component } from 'react';
import './styles/App.css';
import {
    Route,
    Link,
    Switch
} from 'react-router-dom'

+ import About from './About';

class App extends Component {
    render() {
        return (
+           <header>
+               <h1>Learn Routing</h1>
+               <nav>
+                   {/* Create our nav bar links using the Link element from react router */}
+                   <ul>
+                       <li><Link to="/about">About</Link></li>
+                   </ul>
+               </nav>

                {/* Create the routes. This will not appear on the page. */}
+               <div className="main">
+                   <Switch>
+                       <Route path="/about" component={ About } />
+                   </Switch>
+               </div>
+           </header>
        );
    }
}

export default App;

Done. We've successfully added a link to a route in our app. Try visiting the route in the browser!

Try adding a route back to the homepage. Don't worry about content for now!

Lab I: Stock Trader Basic

Starter code: https://github.com/SF-WDI-LABS/react-router-intro/blob/master/stock_basic.md

Create a basic Stock Trader app using React Router. It should have the following:

About, Stock components.
Links to each component, including the homepage.
Use the stocks.json file included in the data folder to display on the pages.

Further instructions available in the README.

Lab II: Stock Trader w/ API

Starter code: https://github.com/SF-WDI-LABS/react-router-intro/blob/master/stock_api.md

Add a third party api to the basic app for data instead.

Challenges

Improve the styling

Bootstrap is already imported into our styles directly. Improve the layout by adding:

a Header with inline navigation

Create a table for the Dashboard

The table should contain all of the stocks and their related data. Add a feature to display the amount of shares purchased for any given stock. Display the total value of the shares in a new column named Total Value

For example, a user can own 10 stocks of Google. They should be able to see the stock count and its total value on the Dashboard.

By default, users own 5 shares of each company.

You do not need to save or store this data in any database or api. Just hard code it for now.

Link to individual stocks.

Add a feature so users can click a stock link visit a page for individual stocks.

Users should also be able to increase and decrease the amount of shares owned and see the value of their total value on the page as well.