Header Component
Understand how to create and export a Header component in React for your ToDo List app. Learn to use React.Fragment to wrap multiple elements without adding extra divs to the DOM, ensuring cleaner and more efficient code.
We'll cover the following...
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 ...