Este · es el punto que @midudev usa, si usan este . por los estilos que se utilizan no se va a ver en el navbar. Pasé más tiempo del debido viendo que problemas tenían mis estilos y era sólo el carácter ajajaja
Introducción al curso avanzado de React
Qué necesitas para este curso y qué aprenderás sobre React.js
Proyecto y tecnologías que usaremos
Preparando el entorno de desarrollo
Clonando el repositorio e instalando Webpack
Instalación de React y Babel
Zeit es ahora Vercel
Linter, extensiones y deploy con Now
Creando la interfaz con styled-components
¿Qué es CSS-in-JS?
Creando nuestro primer componente: Category
Creando ListOfCategories y estilos globales
Usar información real de las categorías
Creando PhotoCard y usando react-icon
SVGR: de SVG a componente de ReactJS
Creando animaciones con keyframes
Hooks
¿Qué son los Hooks?
useEffect: limpiando eventos
useCategoriesData
Usando Intersection Observer
Uso de polyfill de Intersection Observer e imports dinámicos
Usando el localStorage para guardar los likes
Custom Hooks: useNearScreen y useLocalStorage
GraphQL y React Apollo
¿Qué es GraphQL y React Apollo? Inicializando React Apollo Client y primer HoC
Parámetros para un query con GraphQL
Usar render Props para recuperar una foto
Refactorizando y usando variables de loading y error
Usando las mutaciones con los likes
Reach Router
¿Qué es Reach Router? Creando la ruta Home
Usando Link para evitar recargar la página
Creando la página Detail
Agregando un NavBar a nuestra app
Estilando las páginas activas
Rutas protegidas
Gestión del usuario
Introducción a React.Context
Creación del componente UserForm; y Hook useInputValue
Estilando el formulario
Mutaciones para registro
Controlar estado de carga y error al registrar un usuario
Mutaciones para iniciar sesión
Persistiendo datos en Session Storage
Hacer like como usuario registrado
Mostrar favoritos y solucionar fetch policy
Cerrar sesión
Mejores prácticas, SEO y recomendaciones
Últimos retoques a las rutas de nuestra aplicación
React Helmet
Midiendo el performance de nuestra app y usando React.memo()
React.lazy() y componente Suspense
Usando PropTypes para validar las props
PWA: generando el manifest
PWA: soporte offline
Testing con Cypress
Conclusiones
¡Felicidades!
Aún no tienes acceso a esta clase
Crea una cuenta y continúa viendo este curso
Reach Router nos agrega un atributo aria-current="page"
en la página que esté activa en ese momento para que podamos estilarla, agregarle algún tipo de funcionamiento o decirle al usuario en donde se encuentra.
Aportes 16
Preguntas 3
Este · es el punto que @midudev usa, si usan este . por los estilos que se utilizan no se va a ver en el navbar. Pasé más tiempo del debido viendo que problemas tenían mis estilos y era sólo el carácter ajajaja
Si no consiguen el aria-current con Link usando react router, lo que deben hacer es cambiar el import de Link a NavLink. Es un nuevo componente de react router que si incluye esta clase.
Con react-router hay que utilizar NavLink en lugar de Link en los estilos.
import styled from "styled-components";
import { NavLink as LinkRouter } from "react-router-dom";
Pero además para que se desactive el icono de Home al seleccionar otro item, hay que agregarle exact al elemento Link en el index de NavBar:
<Nav>
<Link exact to="/">
<MdHome size={ICON_SIZE} />
</Link>
<Link exact to="/favorites">
<MdFavorite size={ICON_SIZE} />
</Link>
<Link exact to="/user">
<MdPerson size={ICON_SIZE} />
</Link>
</Nav>
Solo por curiosidad, que desventajas (o ventajas) puede otorgarnos una librería como Materia-UI?. Siendo que ya tiene en su core componentes como el NaBar que estamos diseñando.
En Nextjs no tengo el atributo aria-current. Mi solución fue usar el Router de Nextjs para identificar en cuál dirección estoy y crear una clase “selected”, que luego usé en el styles.js. Recibo sugerencias de como hacer esto de una manera más eficiente!
NavBar.js:
<code>
import React from 'react';
import {Nav, A} from './styles'
import { useRouter } from 'next/router';
import Link from 'next/link';
import {MdHome,MdFavoriteBorder, MdPersonOutline} from 'react-icons/md'
const SIZE='32px'
const NavBar = () => {
const router = useRouter();
console.log(router);
return (
<Nav>
<Link href={'/'}>
<A className={router.route === '/' ? 'selected' : ''}>
<MdHome size={SIZE} />
</A>
</Link>
<Link href={'/favs'}>
<A className={router.route === '/favs' ? 'selected' : ''}>
<MdFavoriteBorder size={SIZE} />
</A>
</Link>
<Link href={'/user'}>
<A className={router.route === '/user' ? 'selected' : ''}>
<MdPersonOutline size={SIZE} />
</A>
</Link>
</Nav>
);
}
export default NavBar;
styles.js:
<code>
import styled from 'styled-components'
import { fadeIn } from 'styles/animation';
export const Nav=styled.nav`
align-items:center;
background:#fcfcfc;
border-top:1px solid #e0e0e0;
bottom:0;
display:flex;
height:50px;
justify-content:space-around;
left:0;
margin:0 auto;
max-width: 500px;
position:fixed;
right:0;
width:100%;
z-index:1000;
`
export const A = styled.a`
align-items: center;
color: #888;
display: inline-flex;
height: 100%;
justify-content: center;
text-decoration: none;
width: 100%;
&.selected {
color: #000;
&:after {
${fadeIn({time:'0.5s'})}
content: '·';
position: absolute;
bottom: 0;
font-size: 34px;
line-height: 20px;
}
}
`;
Les dejo mi repositorio con el avance hasta ahora:
Fecha: 26-03-22
Para los que usamos react-router-dom no tenemos ese atributo asi que implemente esta solucion:
index.js:
import React from 'react'
import { Link, Nav } from './styles'
import { MdHome, MdFavoriteBorder, MdPersonOutline } from 'react-icons/md'
import { useLocation } from 'react-router-dom';
const SIZE = '32px';
export const NavBar = () =>{
const { pathname } = useLocation();
return (
<Nav>
<Link to='/' className={pathname==='/'?'selected':''}><MdHome size={SIZE} /></Link>
<Link to='/favs' className={pathname==='/favs'?'selected':''} ><MdFavoriteBorder size={SIZE} /></Link>
<Link to='/user' className={pathname==='/user'?'selected':''} ><MdPersonOutline size={SIZE} /></Link>
</Nav>
)
}
styles.js:
import styled from 'styled-components'
import { Link as LinkRouter } from 'react-router-dom'
import { fadeIn } from '../../styles/animation';
export const Nav = styled.nav`
align-items: center;
background: #fcfcfc;
border-top: 1px solid #e0e0e0;
bottom: 0;
display: flex;
height: 50px;
justify-content: space-around;
left: 0;
margin: 0 auto;
max-width: 500px;
position: fixed;
right: 0;
width: 100%;
z-index: 1000;
`
export const Link = styled(LinkRouter)`
align-items: center;
color: #888;
display: inline-flex;
height: 100%;
justify-content: center;
text-decoration: none;
width: 100%;
&.selected {
color: #000;
&:after {
${fadeIn({time:'0.5s'})}
content: '·';
position: absolute;
bottom: 0;
font-size: 34px;
line-height: 20px;
}
}
`
Estilos
export const Link = styled(LinkRouter)`
align-items: center;
color: #888;
display: inline-flex;
height: 100%;
justify-content: center;
text-decoration: none;
width: 100%;
&[aria-current] {
color: #000;
&:after {
${fadeIn({ time: '0.5s' })};
content: '·';
position: absolute;
bottom: 0;
font-size: 34px;
line-height: 20px;
}
}
`
codigo:
Atributo aria-current
muy interesante este curso
Lo hice de dos formas y obtuve resultados similares con NavLink en vez de Link, o con “&:hover{}”.
Cabe destacar que con hover en version desktop, el icono sera de color negro incluso si se pasa el cursor sin darle Click.
Yo use el caracter ’ . ’ y para que se pudiera ver aumente el bottom
&[aria-current]{
color: black;
&:after{ /*Elemento justo despues*/
content: '.';
position: absolute;
bottom: 10px;
font-size: 34px;
line-height: 20px;
}
}
Excelente UX
Me encanto esta seccion, muy util, y Reach Router lo hace mas facil, creo que cada vez mas me convence de utilizar Reach Router.
aria-current no lo conocía pero le da muy buen estilo y mejora la experiencia del usuario, creo que lo usaré en el próximo proyecto 😄
Todos los usos que podemos darle son enfocados en los estilos supongo
¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.