React Cookbook

How to do it...

In this recipe, we are going to display some components based on the routes:

1. We need to create four functional components (About, Contact, Home, and Error 404) and name them as index.jsx in their directories.
2. Create the Home component:

import React from 'react';const Home = () => (  <div className="Home">    <h1>Home</h1>  </div>);export default Home;

File: src/components/Home/index.jsx

3. Create the About component:

import React from 'react'; const About = () => (  <div className="About">    <h1>About</h1>  </div>); export default About;

File: src/components/About/index.jsx

4. Create the Contact component:

      import React from 'react';      const Contact = () => (        <div className="Contact">          <h1>Contact</h1>        </div>      );      export default Contact; ...