Create the Application Stub

Create the application stub

In this step, we will create the stub of the application. This will include the previously mentioned components, but without any live data at this point.

We are going to create some new folders and files in the andy-pizza-shop directory. You can use the left column’s directory tree to edit these files.

1. First, open a new terminal in Cloud9 by selecting the + sign and selecting New Terminal Create Src Folder

2. In the new terminal, run the following commands:

# Change to app directory
cd ~/environment/andy-pizza-shop
# Create components folder
mkdir src/components
# Create new component files
touch src/components/menu.jsx
touch src/components/header.jsx
touch src/components/orders.jsx
touch src/components/sideCard.jsx

Verify that the new components folder is under the src folder: Create Src Folder

You should now have a directory structure that looks like this: Create Stub Files

3. Edit the src\index.js file and replace the contents with the following code. Then save index.js:

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import "bootstrap/dist/css/bootstrap.min.css";

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

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

The index.js file contains the reference to the root element and any shared components. In this file, we are simply adding a reference to the bootstrap css

Use the little Copy to Clipboard icon in the upper right corner of the code blocks to make copying the code easy!

4. Edit the src\App.js file and replace the contents with the following code. Then save App.js.

import React, { Fragment } from "react";
import "./App.css";
import { Container, Row, Col } from "reactstrap";
import Header from "./components/header";
import SideCard from "./components/sideCard";

function App() {
  return (
    <Fragment>
      <Header />
      <div className="my-5 py-5">
        <Container className="px-0">
          <Row
            noGutters
            className="pt-2 pt-md-5 w-100 px-4 px-xl-0 position-relative"
          >
            <Col
              xs={{ order: 2 }}
              md={{ size: 4, order: 1 }}
              tag="aside"
              className="pb-5 mb-5 pb-md-0 mb-md-0 mx-auto mx-md-0"
            >
              <SideCard />
            </Col>

            <Col
              xs={{ order: 1 }}
              md={{ size: 7, offset: 1 }}
              tag="section"
              className="py-5 mb-5 py-md-0 mb-md-0"
            >
              This is the main content!
            </Col>
          </Row>
        </Container>
      </div>
    </Fragment>
  );
}

export default App;

The App.js file contains the top-level code for our application. In this file, we are adding the layout of the single page application.

5. Edit src\components\header.jsx and replace the contents with the following code. Then save header.jsx

import React from "react";

import {
  Container,
  Row,
  Col,
  Button,
  Navbar,
  Nav,
  NavbarBrand,
  NavLink,
  NavItem,
  UncontrolledDropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem
} from "reactstrap";

const Header = props => {
  const currentUser = props.userName;
  return (
    <header>
      <Navbar
        fixed="top"
        color="light"
        light
        expand="xs"
        className="border-bottom border-gray bg-white"
        style={{ height: 80 }}
      >
        <Container>
          <Row noGutters className="position-relative w-100 align-items-center">
            <Col className="d-none d-lg-flex justify-content-start">
              <Nav className="mrx-auto" navbar>
                {currentUser ? (
                  <NavItem className="d-flex align-items-center">
                    <NavLink className="font-weight-bold" href="/">
                      Welcome, {currentUser}!
                    </NavLink>
                  </NavItem>
                ) : null}

                <NavItem className="d-flex align-items-center">
                  <NavLink className="font-weight-bold" href="/">
                    Home
                  </NavLink>
                </NavItem>

                <NavItem
                  className="d-flex align-items-center"
                  onClick={() => props.onHandleOrder()}
                >
                  <NavLink className="font-weight-bold btn">Menu</NavLink>
                </NavItem>

                <UncontrolledDropdown
                  className="d-flex align-items-center"
                  nav
                  inNavbar
                >
                  <DropdownToggle className="font-weight-bold" nav caret>
                    Account
                  </DropdownToggle>
                  <DropdownMenu right>
                    <DropdownItem
                      className="font-weight-bold text-secondary text-uppercase"
                      header
                      disabled
                    >
                      My Account
                    </DropdownItem>
                    <DropdownItem divider />
                    {currentUser ? <DropdownItem>Profile</DropdownItem> : null}
                    {currentUser ? (
                      <DropdownItem onClick={() => props.onHandleHistory()}>
                        Order History
                      </DropdownItem>
                    ) : null}
                    {currentUser ? (
                      <DropdownItem
                        onClick={() =>
                          props.onHandleLogout ? props.onHandleLogout() : null
                        }
                      >
                        Logout
                      </DropdownItem>
                    ) : (
                      <DropdownItem onClick={() => props.onHandleLogin()}>
                        Login
                      </DropdownItem>
                    )}
                  </DropdownMenu>
                </UncontrolledDropdown>
              </Nav>
            </Col>

            <Col className="d-flex justify-content-xs-start justify-content-lg-center">
              <NavbarBrand
                className="d-inline-block p-0"
                href="/"
                style={{ width: 80 }}
              >
                <img
                  src="https://jah-lex-workshop-2018.s3.amazonaws.com/mob302/images/0001.png"
                  alt="logo"
                  className="position-relative img-fluid"
                />
              </NavbarBrand>
            </Col>

            <Col className="d-none d-lg-flex justify-content-end">
              <Button
                className="info"
                onClick={() =>
                  props.onHandleReview ? props.onHandleReview() : null
                }
              >
                Tell us how we're doing
              </Button>
            </Col>
          </Row>
        </Container>
      </Navbar>
    </header>
  );
};
export default Header;

The header.jsx file contains the top navigation header links.

6. Edit the src\components\sideCard.jsx file and replace the contents with the following code. Then save sideCard.js:

import React, { Component, Fragment } from "react";
import {
  Button,
  UncontrolledAlert,
  Card,
  CardBody,
  CardTitle,
  CardSubtitle,
  Container,
  Row,
  Col
} from "reactstrap";

class SideCard extends Component {
  state = {};

  render() {
    return (
      <Fragment>
        <UncontrolledAlert color="primary" className="d-none d-lg-block">
          <strong>Recommended for you!</strong>
          <br />
          <Fragment>
            <b>Product Name</b>
            <br></br>
            This is a placeholder for a product description
            <br></br>
            <Button color="success">Add this to Order</Button>
          </Fragment>
        </UncontrolledAlert>

        <Card>
          <CardBody>
            <CardTitle className="h3 mb-2 pt-2 font-weight-bold text-secondary">
              Your Current Cart
            </CardTitle>
            <CardSubtitle
              className="text-secondary mb-2 font-weight-light text-uppercase"
              style={{ fontSize: "0.8rem" }}
            >
              Total: $0.00
            </CardSubtitle>
            <div
              className="text-secondary mb-4"
              style={{ fontSize: "0.75rem" }}
            >
              <Container>
                <Row className="font-weight-bold">
                  <Col>Item Name</Col>
                  <Col>Options</Col>
                  <Col>Price</Col>
                </Row>
              </Container>
            </div>
            <Button color="success" className="font-weight-bold">
              Checkout
            </Button>
          </CardBody>
        </Card>

        <br />
        <Button color="info">Chat to Order!</Button>
      </Fragment>
    );
  }
}

export default SideCard;

The sideCard.jsx file displays the shopping cart items.

7. Now, we are finished with adding code for the application stub. Return to the preview window for your application and you should see the skeleton of Andy’s Pizza and Sub web app.

Create Src Folder

You can now continue adding functionality in the next step.