Exercise: Building a Responsive React Navbar
Step 1: Set Up Your React Project
1. Install Node.js:
o Make sure you have Node.js installed. You can check it by running node -v
and npm -v in the terminal.
o If not installed, go to Node.js and download the latest version.
2. Create a New React App:
o Open a terminal/command prompt.
o Navigate to the folder where you want to create your project.
o Run the following command to create a new React app:
“npx create-react-app navbar-app”
3. Navigate to the Project Directory:
“cd navbar-app”
4. Start the Development Server:
“npm start”
This will start the development server and open the default React app in your browser.
Step 2: Clean Up the Default Files
Before we start, let's clean up some of the default files created by React to keep the project
simple.
1. Delete unnecessary files: In the src folder, you can delete the following files:
o App.test.js
o logo.svg
o reportWebVitals.js
o setupTests.js
2. Update App.css: Remove the default styles. You can add your own styles later.
3. Update App.js: Replace the default code with a clean structure.
“
import React from 'react';
import './App.css';
function App() {
return (
<div className="App">
<h1>Welcome to My Navbar</h1>
</div>
);
}
export default App;
”
Step 3: Create a Navbar Component
1. Create a Navbar.js Component: In the src folder, create a new file called Navbar.js.
This component will contain the HTML structure of the navbar.
“
import React from 'react';
import './Navbar.css'; // Optional for styling later
const Navbar = () => {
return (
<nav className="navbar">
<div className="logo">MyWebsite</div>
<ul className="nav-links">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
);
};
export default Navbar;
“
Step 4: Use the Navbar in App.js
Now, let's include the Navbar component in App.js.
1. Update App.js:
“
import React from 'react';
import './App.css';
import Navbar from './Navbar';
function App() {
return (
<div className="App">
<Navbar />
<h1>Welcome to My Navbar</h1>
</div>
);
}
export default App;
”
Step 5: Add Basic Styling
Now that we have a functioning navbar, let's add some basic CSS to style it.
1. Create a Navbar.css file inside the src folder:
“
.navbar {
background-color: #333;
color: white;
padding: 15px;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 24px;
font-weight: bold;
}
.nav-links {
list-style: none;
display: flex;
gap: 20px;
}
.nav-links a {
color: white;
text-decoration: none;
font-size: 18px;
}
.nav-links a:hover {
text-decoration: underline;
}
”
Step 6: Make the Navbar Responsive
1. Add Media Queries for Mobile:
Add the following CSS to the Navbar.css file to make the navbar more responsive on
smaller screens.
“
@media (max-width: 600px) {
.nav-links {
flex-direction: column;
gap: 10px;
}
}
”
Step 7: Recap and Review
• Components: React components like Navbar allow us to break the UI into reusable
pieces.
• JSX: JSX combines JavaScript with HTML-like syntax, making it easier to structure
components.
• Styling: We used CSS to style the components and media queries to make the app
responsive.
• Props (Bonus): You can extend this example by passing props to the Navbar to make
it dynamic (e.g., pass a logo or diherent link sets).
Bonus Step (Optional): Add Active Link Highlighting
To add some interactivity, you can implement active link highlighting when a user clicks on
a particular section. This can be done using React state or libraries like react-router-dom
for navigation.
