Navigation links in React - Mini Project: Build & Apply

Navigation links

📖 Scenario: You are building a simple website header with navigation links. These links let users move between pages like Home, About, and Contact.

🎯 Goal: Create a React functional component that displays a navigation bar with three links: Home, About, and Contact. Each link should be a clickable anchor tag.

📋 What You'll Learn

Create a React functional component named NavBar.

Use a nav HTML element to wrap the links.

Add three anchor tags with href attributes: "/home", "/about", and "/contact".

Each anchor tag should have the link text exactly: Home, About, and Contact.

Use semantic HTML and ensure the component is accessible.

💡 Why This Matters

🌍 Real World

Navigation bars are essential for websites to help users move between pages easily.

💼 Career

Understanding how to build accessible navigation components is a key skill for frontend developers.

1

Create the NavBar component skeleton

Create a React functional component named NavBar that returns an empty nav element.

React

function NavBar() {
  return (
    
      {/* Navigation links will go here */}
    
  );
}

Need a hint?

Start by writing a function named NavBar that returns a nav element.

2

Add anchor tags for navigation links

Inside the nav element, add three anchor tags with href attributes: "/home", "/about", and "/contact". The link texts should be Home, About, and Contact respectively.

React

function NavBar() {
  return (
    
      {/* Add anchor tags for Home, About, and Contact here */}
    
  );
}

Need a hint?

Use three <a> tags inside <nav> with the exact href and text.

3

Add a class name for styling

Add a className attribute with the value "nav-links" to the nav element to prepare for styling.

React

function NavBar() {
  return (
    
      Home
      About
      Contact
    
  );
  // Add className="nav-links" to the nav element
}

Need a hint?

Add className="nav-links" inside the opening <nav> tag.

4

Export the NavBar component

Add an export statement to export the NavBar component as the default export.

React

function NavBar() {
  return (
    
      Home
      About
      Contact
    
  );
}

// Export NavBar as default

Need a hint?

Write export default NavBar; after the component function.