How to create Header Component in React JS ?

The Header component is a most important element of any website’s design, this element provides useful links of other websites that user can redirect easily. In this article, we will create a header component using React component and Bootstrap.

Approach:

To create a responsive header, we will use Bootstrap, you can easily integrate Bootstrap by including its CSS and using its pre-built classes which will provide title, navigation and actions. Let’s create a header component step by step.

Steps to create React Application And Installing Module:

Step 1: Create a React application using the following command:

npx create-react-app my-app

Step 3: Once you have created your project folder i.e. foldername, move to it using the following command:

cd my-app

Step 4: After creating the React.js application, install the Bootstrap modules using the following command.

npm install bootstrap

Step 5: Once installed, import Bootstrap CSS into your src/index.js or src/App.js:

import 'bootstrap/dist/css/bootstrap.min.css';  // Import Bootstrap CSS
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Create the Header Component

After completing above steps, let’s create the Header.js component that uses Bootstrap’s navigation classes for a simple, responsive header.

import React from 'react';

const Header = () => {
    return (
        <header>
            <nav className="navbar navbar-expand-lg navbar-dark bg-primary">
                <div className="container-fluid">
                    <a className="navbar-brand" href="/">My Website</a>
                    <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                        <span className="navbar-toggler-icon"></span>
                    </button>
                    <div className="collapse navbar-collapse" id="navbarNav">
                        <ul className="navbar-nav ms-auto">
                            <li className="nav-item">
                                <a className="nav-link active" aria-current="page" href="/">Home</a>
                            </li>
                            <li className="nav-item">
                                <a className="nav-link" href="/about">About</a>
                            </li>
                            <li className="nav-item">
                                <a className="nav-link" href="/contact">Contact</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
        </header>
    );
};

export default Header;

If you want to learn about react, kindly read What is React ?

Use the Header Component in App.js

Once Header.js component is created, use Header component in App.js file.

import React from 'react';
import './App.css';
import Header from './Header';  // Import the Header component

function App() {
    return (
        <div className="App">
            <Header />  {/* Use the Header component here */}
            <div className="container mt-4">
                <h2>Welcome to the main content!</h2>
                {/* Your other content goes here */}
            </div>
        </div>
    );
}

export default App;

Step 4: Now, run the application.

npm start

This will launch the app in your browser. You should see a responsive Bootstrap navigation bar with links to “Home”, “About”, and “Contact”. The navbar will collapse into a hamburger menu on smaller screens.

Explanation of Bootstrap Classes:

• navbar: This class is used to style the entire navigation bar.
• navbar-expand-lg: This makes the navbar responsive. On larger screens, the navbar items are shown inline. On smaller screens, they collapse into a hamburger menu.
• navbar-dark bg-primary: These classes style the navbar with dark text and a primary (blue) background.
• navbar-toggler: The button used to toggle the navbar on smaller screens.
• navbar-nav ms-auto: These classes are used to style the navigation links and align them to the right.