¿Cómo crear un componente de NavBar en React?

Crear un componente de NavBar en React es un proceso fundamental para el diseño intuitivo de aplicaciones web. Este paso no solo mejora la interfaz de usuario, sino que también, cuando se realiza correctamente, fortalece la navegación y la experiencia del usuario final. Vamos a desglosar este proceso, desde la creación del componente hasta su implementación en la aplicación principal, además de contribuir con algunos estilos básicos con Tailwind CSS.

¿Cuál es la estructura básica del componente NavBar?

Para empezar, en nuestro proyecto, vamos a organizar todos los componentes dentro de una carpeta específica llamada components. Utilizamos un archivo llamado index.jsx para definir nuestro componente.

fullscreen
import { NavLink } from 'react-router-dom';

const NavBar = () => {
    return (
        <nav>
            <ul>
                <li>
                    <NavLink to="/">Shopee</NavLink>
                </li>
                <li>
                    <NavLink to="/all">All</NavLink>
                </li>
                <li>
                    <NavLink to="/clothes">Clothes</NavLink>
                </li>
                <li>
                    <NavLink to="/electronics">Electronics</NavLink>
                </li>
            </ul>
            <ul>
                <li>tef@platzi.com</li>
                <li>
                    <NavLink to="/my-orders">My Orders</NavLink>
                </li>
            </ul>
        </nav>
    );
};

export default NavBar;

En esta estructura básica, se utilizan los enlaces de React Router para facilitar la navegación entre diferentes rutas dentro de la aplicación. También se recomienda utilizar direcciones de correo o datos no reales al desarrollar proyectos de ejemplo.

¿Cómo añadimos estilos al NavBar?

Los estilos básicos son clave para mejorar la apariencia de nuestro componente. Usando Tailwind CSS, que proporciona clases de utilidad rápidas y flexibles, podemos estructurar el componente NavBar de la siguiente manera:

• Activar el Flexbox para los ul
• Justificar el contenido de manera uniforme con justify-between
• Centrarlos verticalmente usando items-center

fullscreen
<nav className="flex justify-between items-center fixed w-full px-8 py-5">
    <ul className="flex gap-3">
        <li><NavLink className="font-semibold text-lg" to="/">Shopee</NavLink></li>
        <li><NavLink to="/all">All</NavLink></li>
        {/* Más elementos aquí */}
    </ul>
    <ul className="flex gap-3">
        <li className="text-black opacity-60">tef@platzi.com</li>
        <li><NavLink to="/my-orders">My Orders</NavLink></li>
        {/* Más elementos aquí */}
    </ul>
</nav>

¿Cómo indicamos qué página está activa?

React Router ofrece un atributo especial que podemos usar: isActive. Para resaltar la página activa, Tailwind ofrece la clase underline que podemos aplicar a través de la función de estilo className para saber qué elemento está seleccionado.

fullscreen
<NavLink
    to="/clothes"
    className={({ isActive }) => (isActive ? "underline" : "")}
>
    Clothes
</NavLink>

¿Cómo se importa el NavBar en el componente principal?

Una vez que tu NavBar está listo y correctamente estilizado, el siguiente paso es integrarlo dentro del componente principal de tu aplicación, habitualmente App.js.

fullscreen
import React from 'react';
import NavBar from './components/NavBar/index'; 

const App = () => {
    return (
        <div>
            <NavBar />
            {/* Otros componentes y rutas aquí */}
        </div>
    );
};

export default App;

Esta forma de trabajar con el NavBar resulta en un componente reutilizable y fácil de mantener, adaptando cualquier aplicación web a un formato más estándar y mejorando la navegación y experiencia del usuario. Por supuesto, con Tailwind CSS, puedes seguir personalizando los estilos a tu preferencia para que encajen perfectamente con el diseño de tu proyecto. Continúa explorando y aprendiendo para expandir aún más tus habilidades de desarrollo web. ¡Éxito en tu proyecto!