Creating our sections

Let's create some sections to test some basic routes. We need to create four stateless components (About, Contact, Home, and Error404) and name them as index.tsx in their directories.

You can add the following to the src/components/Home.tsx component:

const Home = () => ( 
  <div className="Home">
    <h1>Home</h1>
  </div>
)

export default Home

The src/components/About.tsx component can be created with the following:

const About = () => ( 
  <div className="About">
    <h1>About</h1>
  </div>
)

export default About

The following creates the src/components/Contact.tsx component:

const Contact = () => ( 
  <div className="Contact">
    <h1>Contact</h1>
  </div>
)

export default Contact

Finally, the src/components/Error404.tsx component is created as follows:

const Error404 = () => ( 
  <div className="Error404">
    <h1>Error404</h1>
  ...