Search⌘ K
Home
Courses
Beginning Node.js, Express & MongoDB Development

Creating the Navigation Bar

Explore how to create a responsive navigation bar in React using React-Bootstrap combined with react-router-dom. Understand how to set up routing to various components like movies list, movie details, reviews, and login/logout links that adapt based on user authentication state. This lesson prepares you to connect frontend navigation seamlessly to your backend server.

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 ...