Before we start work on our form, we need a page to host the form in. The page will be a container component, and our form will be a presentational component. We also need to create a navigation option that takes us to our new page.

We'll write the following codes before starting to implement our form:

1. If you haven't already, open the React shop project in Visual Studio Code. Create a new file called ContactUsPage.tsx in the src folder, containing the following code:

import * as React from "react";

class ContactUsPage extends React.Component {
  public render() {
    return (
      <div className="page-container">
        <h1>Contact Us</h1>
        <p>
         If you enter your details we'll get back to you as soon as  
         we can.
        </p>
      </div>
    );
  }
}

export default ContactUsPage;

This component will eventually contain state, so, we have created a class-based component. This simply renders a heading with some instructions at the moment. Eventually, it will reference our form.

2. Let's now add this page to the available routes. Open Routes.tsx, and import our page:

import ContactUsPage from "./ContactUsPage";

3. In the render method for the Routes component, we can now add a new route to our page just above the admin route:

<Switch>
  <Redirect exact={true} from="/" to="/products" />
  <Route path="/products/:id" component={ProductPage} />
  <Route exact={true} path="/products" component={ProductsPage} />
  <Route path="/contactus" component={ContactUsPage} />
  <Route path="/admin">
    ...
  </Route>
  <Route path="/login" component={LoginPage} />
  <Route component={NotFoundPage} />
</Switch>

4. Open Header.tsx now, which contains all the navigation options. Let's add a NavLink to our new page just above the admin link:

<nav>
  <NavLink to="/products" className="header-link" activeClassName="header-link-active">
    Products
  </NavLink>
  <NavLink to="/contactus" className="header-link" activeClassName="header-link-active">
    Contact Us
  </NavLink>
  <NavLink to="/admin" className="header-link" activeClassName="header-link-active">
    Admin
  </NavLink>
</nav>

5. Run the project in your development server, by entering the following in the terminal:

npm start

You should see a new navigation option that takes us to our new page:

Now that we have our new page, we are ready to implement our first controlled input in a form. We'll do this in the following section.