Introducción al curso avanzado de React

1

Qué necesitas para este curso y qué aprenderás sobre React.js

2

Proyecto y tecnologías que usaremos

Preparando el entorno de desarrollo

3

Clonando el repositorio e instalando Webpack

4

Instalación de React y Babel

5

Zeit es ahora Vercel

6

Linter, extensiones y deploy con Now

Creando la interfaz con styled-components

7

¿Qué es CSS-in-JS?

8

Creando nuestro primer componente: Category

9

Creando ListOfCategories y estilos globales

10

Usar información real de las categorías

11

Creando PhotoCard y usando react-icon

12

SVGR: de SVG a componente de ReactJS

13

Creando animaciones con keyframes

Hooks

14

¿Qué son los Hooks?

15

useEffect: limpiando eventos

16

useCategoriesData

17

Usando Intersection Observer

18

Uso de polyfill de Intersection Observer e imports dinámicos

19

Usando el localStorage para guardar los likes

20

Custom Hooks: useNearScreen y useLocalStorage

GraphQL y React Apollo

21

¿Qué es GraphQL y React Apollo? Inicializando React Apollo Client y primer HoC

22

Parámetros para un query con GraphQL

23

Usar render Props para recuperar una foto

24

Refactorizando y usando variables de loading y error

25

Usando las mutaciones con los likes

Reach Router

26

¿Qué es Reach Router? Creando la ruta Home

27

Usando Link para evitar recargar la página

28

Creando la página Detail

29

Agregando un NavBar a nuestra app

30

Estilando las páginas activas

31

Rutas protegidas

Gestión del usuario

32

Introducción a React.Context

33

Creación del componente UserForm; y Hook useInputValue

34

Estilando el formulario

35

Mutaciones para registro

36

Controlar estado de carga y error al registrar un usuario

37

Mutaciones para iniciar sesión

38

Persistiendo datos en Session Storage

39

Hacer like como usuario registrado

40

Mostrar favoritos y solucionar fetch policy

41

Cerrar sesión

Mejores prácticas, SEO y recomendaciones

42

Últimos retoques a las rutas de nuestra aplicación

43

React Helmet

44

Midiendo el performance de nuestra app y usando React.memo()

45

React.lazy() y componente Suspense

46

Usando PropTypes para validar las props

47

PWA: generando el manifest

48

PWA: soporte offline

49

Testing con Cypress

Conclusiones

50

¡Felicidades!

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Aprende todo un fin de semana sin pagar una suscripción 🔥

Aprende todo un fin de semana sin pagar una suscripción 🔥

Regístrate

Comienza en:

4D
20H
36M
16S
Curso de React Avanzado

Curso de React Avanzado

Miguel Ángel Durán

Miguel Ángel Durán

Estilando las páginas activas

30/50
Recursos

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 19

Preguntas 3

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

o inicia sesión.

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.

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

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>

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;
    }
  }
`

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:

https://github.com/danyel117/petgram-platzi/tree/navbar

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;
    }
  }
`

Para que se desative el icono del Home con react con react router 6 se usa el atributo end en vez de exact y queda asi el código index.js

import React from "react";
import { BrowserRouter } from "react-router-dom";
import { Nav, Link } from "./styles";
import { AiOutlineHome, AiOutlineHeart, AiOutlineUser } from "react-icons/ai";

const SIZE = "32px";

export const NavBar = () => {
  return (
    <BrowserRouter>
    <Nav>
        
      <Link end to="/">
        <AiOutlineHome size={SIZE} />
      </Link>
      <Link end to="/favorites">
        <AiOutlineHeart size={SIZE} />
      </Link>
      <Link end to="/user">
        <AiOutlineUser size={SIZE} />
      </Link>
    
    </Nav>
    </BrowserRouter>
  );
};

codigo:

Atributo aria-current

muy interesante este curso

Muy buen tip el de aria-current , no esta en la escuela de html y css.

con react router dom no coloca el class ‘current-area’, esta fue mi solución para colocarlo usando el hook useLocation que provee la librería:

import React from 'react'
import { useLocation } from 'react-router-dom'
import { MdHome, MdFavoriteBorder, MdPersonOutline } from 'react-icons/md'
import { Nav, Link } from './styles'

const SIZE = '25px'

export const Navbar = () => {
  const { pathname } = useLocation()
  const setCurrentArea = (path) => {
    return pathname === path ? 'area-current' : ''
  }

  return (
    <Nav>
      <Link className={setCurrentArea('/')} to='/'><MdHome size={SIZE} /></Link>
      <Link className={setCurrentArea('/favs')} to='/favs'><MdFavoriteBorder size={SIZE} /></Link>
      <Link className={setCurrentArea('/user')} to='/user'><MdPersonOutline size={SIZE} /></Link>
    </Nav>
  )
}

❤️

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