How to create Header in React.js ? - GeeksforGeeks

13 Dec, 2021
The Header is an important element of a website’s design. It’s the first impression of the website. It provides useful links to other areas of the website that the user may want to visit. In this article, we will create a functioning Header using React.js and Material UI.
Approach: First we will create a basic react app using some installations. We will make our new Header Component with some styling using Material-UI. To create a Header, we will use App Bar from Material UI which will provide screen titles, navigation, and actions. Also, we will need a ToolBar inside which will set the properties to child components making them all horizontally aligned. Then we will make some changes to our default Home page i.e. App.js file by importing the newly created Header into it. Now Let’s start creating this.
Creating React Application And Installing Module:
Step 1: Create a React application using the following command:
npx create-react-app foldername
 
Step 2: After creating your project folder i.e. foldername, move to it using the following command:
cd foldername
Step 3: After creating the React.js application, install the material-ui modules using the following command.
npm install @material-ui/core
npm install @mui/icons-material
npm install @mui/material
Project Structure: Now create a new file Header.js in  the folder named “src” . Our header component will reside in this file. Now the new project structure will look like this :
updated project structure
Step 3: Now we will make the header component. We will use App Bar Component is from Material UI .The top App Bar provides content and actions related to the current screen. It’s used for branding, screen titles, navigation, and actions. It can transform into a contextual action bar or be used as a navbar. Tool Bar from Material UI doesn’t work independently as that of other Material-UI components, it works with the AppBar. Toolbar component sets the properties to child component making them all horizontally align.
Header.js
import * as React from "react";  // importing material UI componentsimport AppBar from "@mui/material/AppBar";import Box from "@mui/material/Box";import Toolbar from "@mui/material/Toolbar";import Typography from "@mui/material/Typography";import Button from "@mui/material/Button";import IconButton from "@mui/material/IconButton";import MenuIcon from "@mui/icons-material/Menu";  export default function Header() {  return (      <AppBar position="static">        <Toolbar>          {/*Inside the IconButton, we            can render various icons*/}          <IconButton            size="large"            edge="start"            color="inherit"            aria-label="menu"            sx={{ mr: 2 }}          >            {/*This is a simple Menu              Icon wrapped in Icon */}            <MenuIcon />          </IconButton>          {/* The Typography component applies            default font weights and sizes */}            <Typography variant="h6"             component="div" sx={{ flexGrow: 1 }}>            GeeksforGeeks Header          </Typography>          <Button color="inherit">Login</Button>        </Toolbar>      </AppBar>  );}
Step 4: After creating the Header component , we will import it in App.js and make changes in App.js as follows.
App.js
import React from "react";import Header from "./Header";  function App() {  return (     // Using the newly created Header    // component in this main component   <Header/>  );}export default App;
Step to run the application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output:
Picked
React-Questions
ReactJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
ReactJS useNavigate() Hook
How to set background images in ReactJS ?
Axios in React: A Guide for Beginners
How to create a table in ReactJS ?
How to navigate on path by button click in react router ?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
Difference between var, let and const keywords in JavaScript