¿Cómo crear un encabezado en React.js?

El encabezado es un elemento importante del diseño de un sitio web. Es la primera impresión del sitio web. Proporciona enlaces útiles a otras áreas del sitio web que el usuario puede querer visitar. En este artículo, crearemos un encabezado funcional utilizando React.js y Material UI.

Enfoque: Primero crearemos una aplicación de reacción básica usando algunas instalaciones. Haremos nuestro nuevo componente de encabezado con algo de estilo usando Material-UI. Para crear un encabezado, usaremos la barra de aplicaciones de Material UI, que proporcionará títulos de pantalla, navegación y acciones. Además, necesitaremos una barra de herramientas en el interior que establecerá las propiedades de los componentes secundarios para que estén todos alineados horizontalmente. Luego, haremos algunos cambios en nuestra página de inicio predeterminada, es decir, el archivo App.js, importando el encabezado recién creado. Ahora comencemos a crear esto.

Creación de la aplicación React e instalación del módulo:

Paso 1: Cree una aplicación React usando el siguiente comando:

npx create-react-app foldername

Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la carpeta, acceda a ella con el siguiente comando:

cd foldername

Paso 3:  Después de crear la aplicación React.js, instale los módulos material-ui usando el siguiente comando.

npm install @material-ui/core
npm install @mui/icons-material
npm install @mui/material

Estructura del proyecto: ahora cree un nuevo archivo Header.js en la carpeta llamada «src». Nuestro componente de encabezado residirá en este archivo. Ahora la nueva estructura del proyecto se verá así:

estructura del proyecto actualizada

Paso 3: Ahora haremos el componente de encabezado. Usaremos el componente de la barra de aplicaciones de Material UI. La barra de aplicaciones superior proporciona contenido y acciones relacionadas con la pantalla actual. Se utiliza para la marca, los títulos de pantalla, la navegación y las acciones. Puede transformarse en una barra de acción contextual o utilizarse como barra de navegación. La barra de herramientas de Material UI no funciona de forma independiente como la de otros componentes de Material-UI, funciona con AppBar. El componente de la barra de herramientas establece las propiedades del componente secundario haciendo que todos se alineen horizontalmente.

import * as React from "react";
  
// importing material UI components
import 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>
  );
}

Paso 4: después de crear el componente Header, lo importaremos en App.js y realizaremos los cambios en App.js de la siguiente manera.

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;

Paso para ejecutar la aplicación: Ejecute la aplicación usando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: ahora abra su navegador y vaya a http://localhost:3000/, verá la siguiente salida: