Putting it All Together

For this next section, we will be walking through the Week 4 Example. The following instructions are here to help get us started, as well as to provide guidance for installing dependencies, styles, 3rd party components, routes, etc.

New App - my-app

To begin, create a new app as usual:

npx create-react-app my-app

Dependencies

Once this is complete, we must change to the newly created “my-app” directory and install the following packages from npm (npm install …).

• react-router-dom - (Enable client-side routing in the browser)

• react-bootstrap@1 bootstrap@4 (Include the Bootstrap 4 Components for React & bootstrap)

• react-router-bootstrap (Integration between React Bootstrap & React Router, primarily the “LinkContainer” Component )

CSS

App.css

The example does not make use of any of the App.css code included with the new app, so we can go ahead and remove all of the content included and replace it with the following single entry:

span.navbar-brand:hover{
  cursor: pointer;
}

index.css

Similarly, we can wipe out all CSS in the index.css file.

Bootstrap CSS

Lastly, since we’re working with Bootstrap Components for react, we must explicitly import the included CSS in our App component:

import 'bootstrap/dist/css/bootstrap.min.css';

NavBar

The Week 4 example uses the following navbar consisting of the custom components installed using npm (above). This navbar is placed above the (soon to be added) <Routes></Routes> element in App.js

<Navbar bg="light" expand="lg">
  <LinkContainer to="/">
    <Navbar.Brand>WEB422 - React Routing</Navbar.Brand>
  </LinkContainer>
  <Navbar.Toggle aria-controls="basic-navbar-nav" />
  <Navbar.Collapse id="basic-navbar-nav">
    <Nav className="mr-auto">
      <LinkContainer to="/products">
        <Nav.Link>Products</Nav.Link>
      </LinkContainer>
      <LinkContainer to="/about">
        <Nav.Link>About</Nav.Link>
      </LinkContainer>
    </Nav>
  </Navbar.Collapse>
</Navbar>

Container, Routes & Components

All routes in the example code are defined using a <Routes></Routes> element in App.js. Immediately surrounding this component (below the Navbar), we need to add the bootstrap “Container”, “Row” and “Col” components, ie:

<Container>
  <Row>
    <Col>
      <Routes>
        ...
      </Routes>
    </Col>
  </Row>
</Container>

Routes & Components

The example uses 4 components:

• <Products />: Renders a collection of elements in a table, where each row is a link to a specific element

• <Product />: Renders the details of a specific element

• <About />: Simple component that renders Lorem Ipsum Text

• <NotFound />: Renders a “Not Found” message as well as a link that redirects the user back to the “/” route

They can be accessed using the routes:

• ”/” - Redirects to “/Products”

• “/Products” - Renders <Products />

• “/Product/:id “- Renders <Product />

• “/About” - Renders <About />

• “(Not Found)” - Renders <NotFound />

Data Source

Finally, the data source used in the example is provided by reqres.in. Specifically, it’s the routes:

• GET https://reqres.in/api/unknown - for a list of products (“data”)
• GET https://reqres.in/api/unknown/n - for a single product (“data”) where “n” is the “id” value.