Building a Basic Header With MaterialUI and React

Read on for how to build a clean, simple header

Photo by Ian Mustafa on Unsplash.

Hey, all. Anh here. I am a web developer who recently helped build a responsive header for Femmecubator, an up-and-coming web app that seeks to provide resources and support for women of color in tech. In this article, I will guide you through how to create your own simple desktop header using MaterialUI and React.

By the end of this tutorial, you should accomplish the following result:

1. Setup

• Create a new React app by running npx create-react-app header-app in your terminal.
• cd into header-app.
• Install the Material UI library and React Router DOM by running npm i @material-ui/core react-router-dom.
• Since we will be using the Link component from react-router-dom later in this tutorial, we need to wrap our App.js component within BrowserRouter. Without this step, our app will crash when we attempt to use Link.

2. Create a Header Component

• Create a Header component in Header.js.
• Import AppBar and ToolBar from @material-ui/core. These are premade components that will simplify the creation of our header component. Create a function called displayDesktop and add the ToolBar component here with some greeting text. Then, wrap the function call in between an AppBar component in the Header return statement:

• Import Header.js into App.js: