Temario y recursos del Curso de React Avanzado
Temario del Curso de React Avanzado
Introducción al curso avanzado de React
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
Para este curso vas a necesitar
6 Horas de contenido
18 Horas de práctica
Proyecto del curso
PetgramCrea una aplicación para subir y compartir fotos de mascotas usando Webpack, GraphQL, React Hooks, React Router, SEO y PWAs.
Para este curso vas a necesitar
6 Horas de contenido
18 Horas de práctica
Proyecto del curso
PetgramCrea una aplicación para subir y compartir fotos de mascotas usando Webpack, GraphQL, React Hooks, React Router, SEO y PWAs.
Introducción al curso avanzado de React
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
