SICT

BTI425

Web Programming for Apps and Services

Schedule Notes Resources MyApps Instructions Graded Work Code examples

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 …).


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';


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:

They can be accessed using the routes:


Data Source

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