Beginning Node.js, Express & MongoDB Development/

...

/

Creating the Navigation Bar

Creating the Navigation Bar

Let's learn how to create a navigation bar using React.

We'll cover the following...

In this lesson, we’ll add a navigation header bar that allows users to select different routes to access various components in the central part of the page. We’ll start by creating some simple components, and our router will load them, depending on the user’s URL route. The code files created previously have been provided below for reference:

import React from 'react'
import { Switch, Route, Link } from "react-router-dom" 
import "bootstrap/dist/css/bootstrap.min.css"
 function App() {
  return (
    <div className="App">
    Hello World
    </div>
    ); 
  }
export default App;
The initial front-end files we will build on

We first create a components folder in the src folder.

Components

In the components folder, we’ll create four new component files:

  • The movies-list.js component lists movies.

  • The movie.js component displays a single movie.

  • The add-review.js component adds a review.

  • The login.js component is the login component.

Let’s first use a simple ...