Componente Navbar
Contenido del curso
Alba Cecilia Arenas Navarro
Isaac Hernandez Resendiz
Usuario anónimo
User
Juan Mercado
Miguel Angel Reyes Moreno
Lucas Frazzetta
Mauricio Combariza
Esteban Pérez Zárate
Daniel Carpio Robles
Usuario anónimo
User
Pablo Joaquín Cruz
MAURICIO RAMON SILVA SANDOVAL
Juan Mercado
ANDRES FELIPE RINCON GRACIA
Bryan Enrique Garay Benavidez
Carlos Vera
Miguel Angel Reyes Moreno
Kary Salas
Jhon Sebastián Delgado Almendrales
Wilmer Alexander Mogollon Briceño
Hernan Dario Caicedo Sanchez
Vladimir Farrera Vera
Diego Garcia
Jean Bustamante
Jerson Hernán Uribe Montenegro
Germán de Jesús Hernández García
Jose Ever Muñoz Muñoz
Luis Valentin Iglesia Feller
Mario Garcia
Daniel Carpio Robles
Daniel Carpio Robles
Jose Manuel Vargas
Milton Estrada
Andrés Felipe Perdomo Alvarado
Javier Jael Castillo
Victor Hugo Cruz Carballo
Para tener un código más limpio y que luego sea mas fácil su mantenimiento y evolución yo hice lo siguiente:
// Cree un componente llamado NavItem que acepta las propiedades to, children y activeStyle const NavItem = ({ to, children, activeStyle }) => { return ( // Use la etiqueta NavLink y le pasé las propiedades to y className <NavLink to={to} className={({ isActive }) => (isActive ? activeStyle : undefined)} > {children} </NavLink> ); };
Y luego:
<li> <NavItem to="/clothes" activeStyle={activeStyle}> Clothes </NavItem> </li> <li> <NavItem to="/electronics" activeStyle={activeStyle}> Electronics </NavItem> </li> <li> <NavItem to="/fornitures" activeStyle={activeStyle}> Fornitures </NavItem> </li> <li> <NavItem to="/toys" activeStyle={activeStyle}> Toys </NavItem> </li> <li> <NavItem to="/others" activeStyle={activeStyle}> Others </NavItem> </li>
Me gusta su forma de pensar, justo estaba pensando como optimizar esa parte. Pero ya que tu lo hiciste te lo agradezco.
No lo sé. Me parece que solo se agrega código inecesario. Al final NavItem está sujeto a aceptar los mismos parámetros que NavLink.
Ya vimos en el video la forma imperativa: Les muestro una variante de forma mas declarativa:
1)Creamos 2 constantes que contengan un array con un objeto con las diferentes propiedades que gustemos
let menu1 = [ { to: '/', text: 'Shopi', className: 'font-semibold text-lg' }, { to: '/', text: 'All', className: '' }, { to: '/clothes', text: 'clothes', className: '' }, { to: '/electronics', text: 'electronics', className: '' }, { to: '/furnitures', text: 'furnitures', className: '' }, { to: '/toys', text: 'toys', className: '' }, { to: '/others', text: 'others', className: '' }, ] let menu2 = [ { to: '/email', text: 'juanmer382@gmail.com', className: 'text-black/60' }, { to: '/myorders', text: 'My orders', className: '' }, { to: '/myoccount', text: 'My occount', className: '' }, { to: '/signin', text: 'Sign in', className: '' }, { to: '/shoppcar', text: '🛒', className: '' }, ]
2)Recorremos y renderizamos con map el componente link.
const NavBar = () => { const textDecoration = 'underline underline-offset-4' return ( <nav className="flex items-center justify-between w-full py-5 px-8 text-sm"> <ul className='flex gap-3 items-center'> {menu1.map(link => ( <li key={link.text} className={link.className} > <NavLink to={link.to} className={({isActive})=> isActive ? textDecoration : undefined } > {link.text} </NavLink> </li> ))} </ul> <ul className='flex gap-3 items-center'> {menu2.map(link => ( <li key={link.text} className={link.className} > <NavLink to={link.to} className={({isActive})=> isActive ? textDecoration : undefined } > {link.text} </NavLink> </li> ))} </ul> </nav> ) }
Esperaba ver algo así, hay que sacar provecho de JS y React :D
Muy bueno!
Los emoji salen oprimiendo la tecla windows y el punto al mismo tiempo !!!
control + command + espacio
me salen, pero no se insertan :c
Si utilizaron arreglos para abstraer la informacion de cada NavLink para su componente. Se van a dar cuenta que el primer y segundo elemento se subrayan, ya que ambos tienen la misma direccion. Una solucion para este problema es agregar una nueva condicion al classname del componente Navlink.
Otra opción creo que podría ser poner ese NavLink del logo por aparte, sin el arreglo, porque tal vez no queremos que tenga el mismo estilo que los otros enlaces del navbar, ya que al ser el logo puede lucir diferente o incluso ni ser texto y ser una imagen.
concuerdo con pablo, la solución mas lógica, seria quitar el estilo a Shopify
Diferencias entre componentes: De react-router-dom 1)NavLink: Nos brinda un callback/funcion con un objeto con las propiedades: isActive y Pending. util para saber cuando un elemento esta activo o pendiente. su manera de uso popular es en los menu de navegacion, sin necesidad de recargar la pagina.
2)Link: No nos brinda nada y direcciona directamente a la ruta sin necesidad de recargar la pagina.
Mi resultado
Hola comunidad les comparto unos pequeños apuntes en Notion, espero les sean de utilidad. Link aquí:
En vez de hardcodear todos los navs cree un archivo que contenga todas las rutas (izq y der) para que sea dinámico y con un .map se recorrer todas y pegarlas
Maravilloso pero comparte el código, presume con elegancia
//Este es el codigo del archivo que contiene todas las rutas del navBar.
const navIzq = [
{name: 'IKED', to: '/' }, {name: 'All ', to: '/all' }, {name: 'Clothes', to: '/clothes', }, {name:'Electronics', to: '/electronics' }, {name: 'Forniture', to: '/forniture' }, {name: 'Toys', to: '/Toys' }, {name: 'Others', to: '/others' }
]
const navDer = [
{name: 'karydelvalle@gmail.com', to: '/' }, {name: 'My Account ', to: '/my-account' }, {name: 'My Orders', to: '/my-orders', }, {name:'My Order', to: '/my-order' }, {name: 'Sing In', to: '/sing-in' }, {name: '🛒0', }]
export { navIzq, navDer }
//Asi quedo el codigo en el componente NavBar usando map para recorrer los Links import { NavLink } from "react-router-dom"; import {navIzq, navDer} from './Rutas'
function NavBar() {
let activeStyle = 'underline' return ( <nav className='flex justify-between item-center fixed z-10 w-full py-5 px-8 text-sm font-light'> <ul className='flex item-center gap-3'> {navIzq.map(el => ( <li className='font-bold' key = {el.name}> <NavLink to={el.to} className={({isActive}) => isActive ? activeStyle : undefined }> {el.name} </NavLink> </li> ))} </ul> <ul className='flex item-center gap-3'> {navDer.map(el => ( <li className='font-bold' key = {el.name}> <NavLink to={el.to} className={({isActive}) => isActive ? activeStyle : undefined }> {el.name} </NavLink> </li> ))} </ul> </nav> )
}
export default NavBar
Comparto mi código. En lo posible trato de hacer mis patrones de diseño lo más escalable posibles. En este caso, en vez de crear tantos NavLink, creé dos constantes, que me almacenaran tanto el titulo del nav y su path. Con esto si a futuro tengo que remover o agregar alguno, solo modifico la constante y resulta más cómodo y a nivel visual también es más entendible. Lo único que dejé fijo y fuera de las constantes fue el correo y el carrito de compra. Que los puse textualmente ahí:
import { NavLink } from "react-router-dom"; const componentsToNavRight = [ { name: 'Shopi', path: '/' }, { name: 'All', path: '/' }, { name: 'Clothes', path: '/clothes' }, { name: 'Electronics', path: '/electronics' }, { name: 'Furnitures', path: '/furnitures' }, { name: 'Toys', path: '/toys' }, { name: 'Others', path: '/others' }, ]; const componentsToNavLeft = [ { name: 'My Orders', path: '/my-orders' }, { name: 'My Account', path: '/my-account' }, { name: 'Sign In', path: '/sign-in' }, ] function Navbar() { const activeStyle = "underline underline-offset-4"; return ( <nav className='flex justify-between items-center fixed z-10 w-full py-5 px-8 text-sm font-light'> <ul className='flex items-center gap-3 '> {componentsToNavRight.map((component, index) => ( <li key={index} className={index === 0 ? 'font-semibold text-lg': ''}> <NavLink to={component.path} className={({isActive}) => (isActive && index !==0) ? activeStyle : ''}> {component.name} </NavLink> </li> ))} </ul> <ul className='flex items-center gap-3'> <li className='text-black/60'> correo@correo.com </li> {componentsToNavLeft.map((component, index) => ( <li key={index}> <NavLink to={component.path} key={index}> {component.name} </NavLink> </li> ))} <li> Carrito de compra </li> </ul> </nav> ); } export { Navbar };
Hola compañeros. Alguno sabe qué extensión usa para los emojis. (Min 7:36)
si estas usando Windows puedes hacer el siguiente comando:
tecla windows + . (punto)
si usas mac seria control + command + espacio
Repeto el uso de TailwindCSS, creo que ayuda a muchos. Pero particularmente no me gusta como se vuleve un reguero de propiedades quitando la legibilidad de codigo de quien desarrolla!
a mi tampoco me gusta eso pero siempre lo he usado, tambien bootstrap, conoces otra opción que no sea usar css? pero al mismo tiempo solucione lo de muchas clases.
Otra herramienta que me parece buena para estilizar es Material UI, les dejo la documentación:
A partir del curso anterior de React, quizá esto pueda ser más escalable.
NavItem:function NavItem ({ className, to, activeStyle, navbarName }) { return ( <li className={(className)}> <NavLink to={to} className={ ({ isActive }) => (isActive ? activeStyle : undefined) } > {navbarName} </NavLink> </li> ) }
index.jsx, creamos un objeto con las siguientes propiedades:const navItems = [ { name: 'Shopi', to: '/', className: 'font-semibold text-xl' }, { name: 'All', to: '/' }, { name: 'Clothes', to: '/clothes' }, { name: 'Electronics', to: '/electronics' }, { name: 'Furnitures', to: '/furnitures' }, { name: 'Toys', to: '/toys' }, { name: 'Others', to: '/others' } ]
function Navbar () { const activeStyle = 'underline' return ( <nav className='flex items-center'> <ul className='flex items-center gap-3'> { navItems.map(({ to, className, name }) => ( <NavItem key={name} to={to} className={className} navbarName={name} activeStyle={activeStyle} /> )) } </ul> </nav> ) }
muy buena explicacion
Siii... funciono en Produccion!! Chau Hashhh.... Genia Estefy!! Te amo.. me salvaste !! si no tenia que emigrar a NExT :)
Si tenes problemas con vite y tailwindcss https://tailwindcss.com/docs/guides/vite muestra como instalarlo.
Consulta, en el minuto -5:43 le da click a los li, y la url cambia. Por qué no da 404 si las url en ese momento no existen. 😶
Me respondo a mi yo del pasado. Al darle clic llama al not found que se definió al inicio :)
Optimizando:
import { NavLink } from 'react-router-dom';
const categories = ['All', 'Clothes', 'Electronics', 'Furniture', 'Toys', 'Others'];const userLinks = ['My Orders', 'My Account', 'Sign In'];
const navLinks = (items) => { const activeStyle = ({ isActive }) => (isActive ? 'underline underline-offset-4' : ''); return items.map((item, index) => { const path = item === 'All' ? '/' : /${*item*.toLowerCase().replace(/*\s*/*g*, '-')}; const label = item; return ( <li key={index}> <NavLink to={path} className={activeStyle}> {label} </NavLink> </li> ); });};
const NavbarX = () => { return ( <nav className="fixed z-10 flex justify-between items-center gap w-full py-5 px-8 font-light text-sm border"> <ul className="flex items-center gap-x-4"> <NavLink to="/" className="mr-8 font-bold text-base"> Shopi </NavLink> {navLinks(categories)} </ul> <ul className="flex items-center gap-x-4"> <li className="mr-4 text-black/50 cursor-pointer">customer@shopi.com</li> {navLinks(userLinks)} <li className="cursor-pointer">🛒2</li> </ul> </nav> );};
export default NavbarX;
import { NavLink } from 'react-router-dom'; const categories = ['All', 'Clothes', 'Electronics', 'Furniture', 'Toys', 'Others']; const userLinks = ['My Orders', 'My Account', 'Sign In']; const navLinks = (items) => { const activeStyle = ({ isActive }) => (isActive ? 'underline underline-offset-4' : ''); return items.map((item, index) => { const path = item === 'All' ? '/' : `/${item.toLowerCase().replace(/\s/g, '-')}`; const label = item; return ( <li key={index}> <NavLink to={path} className={activeStyle}> {label} </NavLink> </li> ); }); }; const NavbarX = () => { return ( <nav className="fixed z-10 flex justify-between items-center gap w-full py-5 px-8 font-light text-sm border"> <ul className="flex items-center gap-x-4"> <NavLink to="/" className="mr-8 font-bold text-base"> Shopi </NavLink> {navLinks(categories)} </ul> <ul className="flex items-center gap-x-4"> <li className="mr-4 text-black/50 cursor-pointer">customer@shopi.com</li> {navLinks(userLinks)} <li className="cursor-pointer">🛒2</li> </ul> </nav> ); }; export default Navbar;
Un hack por si no lo sabían, en VScode le das a crear archivo y escribes ejem: Navbar/index.jsx
Automáticamente, te crea la carpeta y dentro el archivo y así no tienes que presionar: crear carpeta y luego crear archivo
Los filtros (ej: all, clothes), al ser menos complejos, los refactorice con un array para hacer más corto el NavBar:
const filtersRoutes = [ "all", "clothes", "electronics", "furnitures", "toys", "others", ]; return ( {filtersRoutes.map((route) => ( <li key={route}> <NavLink to={`/${route}`} className={({ isActive }) => (isActive ? activeStyle : undefined)}> {route.charAt(0).toUpperCase() + route.slice(1)} </NavLink> </li> ))} )
Como aporte adicional al comentario de Alba Cecilia, acá tengo un ejemplo del mismo código pero hecho con Typescript.
const activeStyle = "underline underline-offset-4"; const NavLinkStyled: FC<{ to: string; children: ReactNode; isLogo?: boolean; }> = ({ children, to, isLogo }) => ( <NavLink className={({ isActive }) => isActive && !isLogo ? activeStyle : undefined } to={to} > {children} </NavLink> );
La única diferencia es que mandé el estilo de activeStyle fuera de los componentes para no andarlo pasando como prop y adicional mandé una validación para no mostrar el underline en el logo.
