Scribd
Upload
3 views5 pages

Exercise

Uploaded by

Nguyễn Thiên Phú
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views5 pages

Exercise

Uploaded by

Nguyễn Thiên Phú
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

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.

You might also like