Curso de React Avanzado

Clases del Curso de React Avanzado

Instruido por:
Miguel Ángel Durán
Miguel Ángel Durán
Avanzado
6 horas de contenido
Ver la ruta de aprendizaje
Petgram
Proyecto del curso
Petgram

Crea una aplicación para subir y compartir fotos de mascotas usando Webpack, GraphQL, React Hooks, React Router, SEO y PWAs.

Curso de React Avanzado

Curso de React Avanzado

Progreso del curso:0/50contenidos(0%)

Contenido del Curso
Tutoriales de estudiantes
Preguntas de estudiantes

Progreso del curso:0/50contenidos(0%)

Introducción al curso avanzado de React

Material Thumbnail

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

04:26 min

Material Thumbnail

Proyecto y tecnologías que usaremos

02:55 min

Preparando el entorno de desarrollo

Material Thumbnail

Clonando el repositorio e instalando Webpack

06:04 min

Material Thumbnail

Instalación de React y Babel

07:46 min

Zeit es ahora Vercel

00:23 min

Material Thumbnail

Linter, extensiones y deploy con Now

12:15 min

Creando la interfaz con styled-components

Material Thumbnail

¿Qué es CSS-in-JS?

03:30 min

Material Thumbnail

Creando nuestro primer componente: Category

09:06 min

Material Thumbnail

Creando ListOfCategories y estilos globales

10:10 min

Material Thumbnail

Usar información real de las categorías

03:42 min

Material Thumbnail

Creando PhotoCard y usando react-icon

11:11 min

Material Thumbnail

SVGR: de SVG a componente de ReactJS

05:34 min

Material Thumbnail

Creando animaciones con keyframes

06:41 min

Hooks

Material Thumbnail

¿Qué son los Hooks?

10:13 min

Material Thumbnail

useEffect: limpiando eventos

09:46 min

Material Thumbnail

useCategoriesData

06:32 min

Material Thumbnail

Usando Intersection Observer

10:47 min

Material Thumbnail

Uso de polyfill de Intersection Observer e imports dinámicos

07:30 min

Material Thumbnail

Usando el localStorage para guardar los likes

08:20 min

Material Thumbnail

Custom Hooks: useNearScreen y useLocalStorage

07:59 min

GraphQL y React Apollo

Material Thumbnail

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

09:58 min

Material Thumbnail

Parámetros para un query con GraphQL

05:26 min

Material Thumbnail

Usar render Props para recuperar una foto

10:24 min

Material Thumbnail

Refactorizando y usando variables de loading y error

03:42 min

Material Thumbnail

Usando las mutaciones con los likes

09:34 min

Reach Router

Material Thumbnail

¿Qué es Reach Router? Creando la ruta Home

09:32 min

Material Thumbnail

Usando Link para evitar recargar la página

05:57 min

Material Thumbnail

Creando la página Detail

04:26 min

Material Thumbnail

Agregando un NavBar a nuestra app

07:44 min

Material Thumbnail

Estilando las páginas activas

04:22 min

Gestión del usuario

Material Thumbnail

Introducción a React.Context

08:59 min

Material Thumbnail

Creación del componente UserForm; y Hook useInputValue

08:41 min

Material Thumbnail

Estilando el formulario

06:09 min

Material Thumbnail

Mutaciones para registro

08:51 min

Material Thumbnail

Controlar estado de carga y error al registrar un usuario

05:31 min

Material Thumbnail

Mutaciones para iniciar sesión

05:25 min

Material Thumbnail

Persistiendo datos en Session Storage

07:33 min

Material Thumbnail

Hacer like como usuario registrado

09:47 min

Material Thumbnail

Mostrar favoritos y solucionar fetch policy

10:27 min

Mejores prácticas, SEO y recomendaciones

Material Thumbnail

Últimos retoques a las rutas de nuestra aplicación

06:10 min

Material Thumbnail

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

10:38 min

Material Thumbnail

React.lazy() y componente Suspense

05:08 min

Material Thumbnail

Usando PropTypes para validar las props

11:25 min

Material Thumbnail

PWA: generando el manifest

08:40 min

Material Thumbnail

PWA: soporte offline

09:10 min

Material Thumbnail

Testing con Cypress

10:55 min

Conclusiones

nuevosmás votadossin responder
Renato Renzo Luna Herrera
Renato Renzo Luna Herrera
Estudiante

Hola. Alguien que me responda porfa, si uso create-react-app, todos estos pasos se generan automáticamente verdad?

1
Luis Evelio Garcia Rodriguez
Luis Evelio Garcia Rodriguez
Estudiante

En esta primer unidad se ha visto muchas configuraciones muy interesantes, pero tengo un vació. Este tiene que ver con la parte estructural o de arquitectura de la aplicación, me gustaría saber una buena practica para la creación de carpetas y demás. Me explico: Generalmente creamos una carpeta components donde guardamos los diferentes componentes… PERO! que otras buenas practicas hay? por ejemplo si yo estoy creando una aplicación la cual se que va a ser grande, como debería armar la estructuras de carpetas? Supongamos si fuera ha hacer un sistema de inventario, voy a tener un modulo tal ves para entradas, otro para salidas, otros de cuadre, etc. La idea seria que si no tengo el modulo de inventario la app funcionara igual (que pudiera ser escalable), entre mas temas que a mi parecer deberían tenerse en cuenta en esta etapa de la configuración del proyecto, para así no importando el tamaño de nuestra aplicación a futuro sea fácil de agregar secciones o módulos como se quieran llamar.

1
Luis Evelio Garcia Rodriguez
Luis Evelio Garcia Rodriguez
Estudiante

Tengo una duda, se creo el primer componente dentro de una carpeta llamada Category. Dentro del componente esta; export const Category = … el nombre del archivo es index.js.
Entonces la pregunta, no debería llamarse el archivo igual que el componente? según sea la respuesta como se sustenta? Lo pregunto por que yo generalmente lo hago así, el nombre del archivo es el mismo del export, uso archivos index.js cuando tengo varios componentes en una misma carpeta, entonces hago el export const {defailt…

1
Andrés Muñoz
Andrés Muñoz
Estudiante

si graphQL no sustituye a rest API entiendo que pueden convivir los 2 en un proyecto ? Cuando es aconsejable usar uno o el otro para traer los datos ? de qué sirve tener una ruta N + 1 universal de graphQL ? qué problema soluciona ?

1
Alejandro Mejia Escobar
Alejandro Mejia Escobar
Estudiante

¿Ya se fucionaron?

1
Alejandro Mejia Escobar
Alejandro Mejia Escobar
Estudiante

¿Cómo podría disminuir los likes en caso de que se desmarque el corazón?

1
Alejandro Mejia Escobar
Alejandro Mejia Escobar
Estudiante

No he logrado desplegar el front + el back. Si hago deploy del API, no me sale el site, sin hago deploy del site, no me sale la data en /Categories… ¿Alguien sabe cómo corregir esto?

1
Andrés Muñoz
Andrés Muñoz
Estudiante

¿Es preferible concentrarse en tener estilos individuales o globales? a donde es preferible inclinar la balanza ?

2
Andrés Muñoz
Andrés Muñoz
Estudiante

Al pasar todos props con el spread operator puede haber alguna problema de rendimiento si el objeto al que hago spread es muy grande osea tiene muchas propiedades ? es recomendable hacer esto ?

1
Daniel Ruiz
Daniel Ruiz
Estudiante

Es estrictamente necesario ver el curso de graphql para tomar este curso?

1