Creating Five Impactful Applications with ReactJS/

...

/

Header Component

Header Component

Understand the Header component and the use React.Fragment

We'll cover the following...

Header

The Header component will be used to display the name of our app on the top of the screen. We’ll make changes to the Header component and export it to the App.js file.

:root {
  --brand-color: #0ea5e9;
  --dark-color: #0f172a;
  --mid-color: #cbd5e1;
  --light-color: #ffffff;
}

.appHeader {
  background-color: var(--brand-color);
}
.appTitle {
  color: var(--dark-color);
  text-align: center;
  padding: 0.5em;
}
Header component to add the app name and display on the top of the screen.

The CSS for the Header component is already present in the corresponding CSS file so it won’t be covered here. However, it’s advisable to explore ...