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!

Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Curso de React Avanzado

Curso de React Avanzado

Miguel Ángel Durán

Miguel Ángel Durán

Creando animaciones con keyframes

13/50
Recursos

Aportes 29

Preguntas 5

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Moví el archivo GlobalStyles dentro de styles y automaticamente Visual Studio me modificó la ruta en App. ¿Será una actualización nueva? No recuerdo nunca que haya pasado esto.

Las funciones para styled components deben mandar un return implícito de css!

Aquí mi avance:

Me gustaria que cada elemento se muestre uno despues del otro, he intentado poner un delay según el index de cada elemento y no me funciona

Si quisieramos usar la libreria de animate.css Podríamos integrarla con styled-components?

Gracias

Vacansisimo el curso hasta el momento…

La animacion no me esta funcionando, estoy probando en Microsoft Edge Version 85.0.564.51 (Official build) (64-bit)

en la consola puedo ver lo siguiente:

que podra ser??

Excelente llevo usando styled components un tiempo y nunca use funciones era tan obvio, Gracias!

Muy buena clase, pero el profesor muchas veces va muy rapido.

Tengo un bug con la animación, me he dado cuenta que al activar el filtro blur el border-radius no se aplica correctamente, esto solo ocurre en chrome, en firefox la animación no tiene ningún problema, @midudev creas que sea un bug de chrome, que versión es la que usabas al grabar el curso?

https://www.loom.com/share/b1be07261ca4403785e7bb192f301fd7

He revisado todos los estilos y son los mismos que se utilizan en la clase
https://petgram-91rr7cwzl.now.sh/

Tremeeendo Moduloooo !!

Hermoso

Muy buenos ejemplos prácticos, muchas gracias!

Muy buenas practicas, excelente 🚀…

Muy buena clase.

Genial

¡Excelente!, un core prácticamente desde cero para armar una aplicación y la parte de estilos muy bien explicada

Muy buena la clase, con ganas de aprender a hacer mas animaciones

Muy interesante!

A por ello!

Exelente, vamos derecho con React…!!!

Hasta aquí mi avance!

Asi me quedo, trate de igualarlo al layout de instagram

Al terminar la animación, la imagen tiene un pequeño efecto de rebote que dura menos de 1 segundo. He tratado de retirar ese efecto pero aun no lo logro, alguien tuvo ese problema?
este es mi animation.js

import { css, keyframes } from ‘styled-components’

const fadeKeyframes = keyframesfrom { filter: blur(5px); opacity: 0; } to{ filter: blur(0); opacity: 1; }
export const fadeIn = ({ time = ‘1s’, type = ‘ease’ } = {}) => css`animation: ${time} ${fadeKeyframes} ${type};

En el inspector veo esto:

Me gusta como va hasta ahora la aplicación: https://petgram-one-theta.vercel.app/

Este orden hace que todo sea más simple para modularizar, me encanta el curso

Súper, muy buena práctica lo de agrupar por orden, me parece mas ordenado y eficiente. 😃 Gracias!!

Este curso esta genial , ahi vamos 💪