Beginners Guide: How to Code a Navigation Bar in ReactJS

Handling Navigation with React Router in Your Nav Component

As you might have already got an idea of what we will be building today, yes, we are going to cover the fundamentals of ReactJS for absolute beginners, which is a very simple and basic navigation bar. So, without further ado, let’s get started!

You might want to create an empty folder on your desktop and name it any name you wish. Open this folder in VSCode, then set up a new ReactJS project by running the following command in your terminal:

npx create-react-app navigationbar-app

Navigate to the project directory:

cd navigationbar-app

Create a new file named Navbar.js in the src directory and add the following code:

import React from 'react';
import { Link } from 'react-router-dom';

const Navbar = () => {
 return (
    <nav>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
        <li>
          <Link to="/contact">Contact</Link>
        </li>
      </ul>
    </nav>
 );
};

export default Navbar;

This code defines a navigation bar component with three links: Home, About, and Contact.

Next, update the App.js file to include the Navbar component:

import React from 'react';
import './App.css';
import Navbar from './Navbar';

const App = () => {
 return (
    <div className="App">
      <Navbar />
      {/* Add your other components here */}
    </div>
 );
};

export default App;

Finally, add some CSS code to style the navigation bar. Open the src/App.css file and add the following code:

nav {
 background-color: #333;
 padding: 10px;
}

nav ul {
 display: flex;
 justify-content: space-around;
 list-style-type: none;
 padding: 0;
}

nav li a {
 color: #fff;
 text-decoration: none;
}

nav li a:hover {
 color: #ccc;
}

This CSS code styles the navigation bar to create a visually appealing layout.

To make the links work, install the react-router-dom package by running the following command in your terminal:

npm install react-router-dom

Or,

yarn add react-router-dom

Then, update the App.js file to include the necessary components from react-router-dom:

import React from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import './App.css';
import Navbar from './Navbar';

const App = () => {
 return (
    <Router>
      <div className="App">
        <Navbar />
        <Routes>
          <Route path="/" exact>
            {/* Add your Home component here */}
          </Route>
          <Route path="/about">
            {/* Add your About component here */}
          </Route>
          <Route path="/contact">
            {/* Add your Contact component here */}
          </Route>
        </Routes>
      </div>
    </Router>
 );
};

export default App;

Now, when you run the project by executing npm start or yarn start in the terminal, you can navigate between the Home, About, and Contact pages using the navigation bar.

This solution demonstrates how to create a navigation bar in ReactJS using the react-router-dom package. You can further customize the styling and functionality of the navigation bar as needed.

Disclaimer: This is a very basic project for beginners to experience and learn their wayabouts in React, probably first-time encountering React? If you aren’t an absolute beginner, I don’t think this step-by-step introduction project is suitable for you.

If you enjoyed learning the basics of everything or just React, I have created a list that I will be writing and adding them to →

https://forelsketaura.medium.com/list/programming-coding-3d4395462530

PlainEnglish.io 🚀

Thank you for being a part of the In Plain English community! Before you go:

• Be sure to clap and follow the writer️
• Learn how you can also write for In Plain English️
• Follow us: X | LinkedIn | YouTube | Discord | Newsletter
• Visit our other platforms: Stackademic | CoFeed | Venture