Curso Profesional de React Hooks

Clases del Curso Profesional de React Hooks

Instruido por:
Oscar Barajas Tavares
Oscar Barajas Tavares
Avanzado
6 horas de contenido
Ver la ruta de aprendizaje
Curso Profesional de React Hooks

Curso Profesional de React Hooks

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

Contenido del Curso
Tutoriales de estudiantes
Preguntas de estudiantes

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

¡Bienvenida! Este es un curso especial de React Hooks

Material Thumbnail

¿Qué aprenderás en el Curso Profesional de React Hooks?

01:01 min

Material Thumbnail

¿Qué son los React Hooks y cómo cambian el desarrollo con React?

05:32 min

Introducción a React Hooks

Material Thumbnail

useState: estado en componentes creados como funciones

11:23 min

Material Thumbnail

useEffect: olvida el ciclo de vida, ahora piensa en efectos

10:12 min

Material Thumbnail

useContext: la fusión de React Hooks y React Context

07:35 min

Material Thumbnail

useReducer: como useState, pero más escalable

09:06 min

¿Qué es memoization? Técnicas de optimización en programación funcional

04:10 min

Material Thumbnail

useMemo: evita cálculos innecesarios en componentes

11:43 min

Material Thumbnail

useRef: manejo profesional de inputs y formularios

04:03 min

Material Thumbnail

useCallback: evita cálculos innecesarios en funciones

04:48 min

Optimización de componentes en React con React.memo

07:18 min

Material Thumbnail

Custom hooks: abstracción en la lógica de tus componentes

07:12 min

Third Party Custom Hooks de Redux y React Router

02:01 min

Configura un entorno de desarrollo profesional

Material Thumbnail

Proyecto: análisis y retos de Platzi Conf Store

10:12 min

Material Thumbnail

Instalación de Webpack y Babel: presets, plugins y loaders

05:51 min

Material Thumbnail

Configuración de Webpack 5 y webpack-dev-server

17:01 min

Material Thumbnail

Configuración de Webpack 5 con loaders y estilos

05:48 min

Loaders de Webpack para Preprocesadores CSS

01:09 min

Material Thumbnail

Flujo de desarrollo seguro y consistente con ESLint y Prettier

11:11 min

Git Hooks con Husky

00:51 min

Estructura y creación de componentes para Platzi Conf Store

Material Thumbnail

Arquitectura de vistas y componentes con React Router DOM

12:46 min

Material Thumbnail

Maquetación y estilos del home

08:02 min

Material Thumbnail

Maquetación y estilos de la lista de productos

07:44 min

Material Thumbnail

Maquetación y estilos del formulario de checkout

04:55 min

Material Thumbnail

Maquetación y estilos de la información del usuario

08:33 min

Material Thumbnail

Maquetación y estilos del flujo de pago

04:05 min

Material Thumbnail

Integración de íconos y conexión con React Router

09:17 min

Integración de React Hooks en Platzi Conf Merch

Material Thumbnail

Creando nuestro primer custom hook

12:11 min

Material Thumbnail

Implementando useContext en Platzi Conf Merch

07:35 min

Material Thumbnail

useContext en la página de checkout

11:37 min

Material Thumbnail

useRef en la página de checkout

11:19 min

Material Thumbnail

Integrando third party custom hooks en Platzi Conf Merch

08:02 min

Configura mapas y pagos con PayPal y Google Maps

Paso a paso para conectar tu aplicación con la API de PayPal

01:59 min

Material Thumbnail

Integración de pagos con la API de PayPal

17:24 min

Material Thumbnail

Completando la integración de pagos con la API de PayPal

09:49 min

Paso a paso para conectar tu aplicación con la API de Google Maps

02:02 min

Material Thumbnail

Integración de Google Maps en el mapa de checkout

12:54 min

Material Thumbnail

Creando un Custom Hook para Google Maps

15:01 min

Estrategias de deployment profesional

Material Thumbnail

Continuous integration y continuous delivery con GitHub Actions

16:12 min

Material Thumbnail

Compra del dominio y despliega con Cloudflare

08:51 min

Optimización de aplicaciones web con React

Material Thumbnail

Integración de React Helmet para mejorar el SEO con meta etiquetas

09:02 min

Material Thumbnail

Análisis de performance con Google Lighthouse

03:43 min

Convierte tu aplicación de React en PWA

04:15 min

Bonus: trabaja con Strapi CMS para crear tu propia API

Material Thumbnail

Crea una API con Strapi CMS y consúmela con React.js

19:55 min

¿Qué sigue en tu carrera profesional?

Material Thumbnail

Próximos pasos para especializarte en frontend

01:40 min

nuevosmás votadossin responder
AABH
AABH
Estudiante

que es mejor useReducer o manejar reducer con Redux
ya no entendí jejeje

1
moises vargas
moises vargas
Estudiante

¿Cual es la fuente que usa el instructor en VScode?

1
jose1470bry
jose1470bry
Estudiante

Hola compañeros, para solucionar el bug que se genera en el curso realice la siguiente solución, pero no estoy seguro de que sea correcta, lo arregle modificando unicamente el cursom hook useIntialState como se muestra a continuación:

import { useState } from"react";
import initialState from '../initialState';

const useInitialState = () => {
  const [state, setState] = useState(initialState);
  // const [cart, setCart] = useState(false)
  let cart = false
  const validar = (item,payload) => {
    if(cart){
      // debugger
      return true
    }
    else if(item.id === payload.id){
      // debugger
      // setCart(true);
      cart = true
      return false
    }else if(item.id !== payload.id){
      return true
    }
  }
  const addToCart = payload => {
    setState({
      ...state,
      cart: [...state.cart, payload]
    });

  }

  const removeFromCart = payload => {
    setState({
      ...state,
      cart: state.cart.filter( (item) => validar(item,payload) )
    });
    // setCart(false)
    cart = false
    // debugger
  }

  return {
    addToCart,
    removeFromCart,
    state,
  };
}

export default useInitialState;

como se puede notar, esta comentado un intento que realice con useState, finalmente no lo use porque no logro entender en que momento se actualiza el estado usando useState?, porque lo que me paso fue que al usar setCart(true) en la siguiente iteración de la función filter, mi estado cart continuaba en false y yo esperaba que fuera true debido a la ejecución de setCart(true), por ello al final solamente use let cart para intercambiar entre true y false
Espero haberme dado a entender.

1
David Cervantes Arrioja
David Cervantes Arrioja
Estudiante

¿Qué pasa si tengo muchos valores que quiero tener en mi contexto, por ejemplo puedo mandar un array o un objeto?

1
Tomas Agustin Maldonado Sarmiento
Tomas Agustin Maldonado Sarmiento
Estudiante

Esta buenísimo! pero me acaba de surgir una duda, como utilizamos o remplazamos por completo el uso de useContext en las clases ? (estoy justo trabajando un componente grande hecho con clases y es mucho trabajo el solo cambiarlo por algo tan sencillo)

1
David Cervantes Arrioja
David Cervantes Arrioja
Estudiante

Una duda, ¿el hook useState solo funciona dentro del componente que es declarado? ¿hay alguna forma de hacerlo “global”?

1
jose1470bry
jose1470bry
Estudiante

Alguien sabe por qué mi webpack serve no detecta los cambios si mis archivos estan en widnows 10 y utilizo wsl2?
En el home de wsl2 si funciona todo bien pero quisiera hacerlo funcionar en windows 10

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

¿por qué es necesario usar useEffect y no se puedo solo usar axios y setMap y que todo hook sea una función asyncrona ?

1
Carlos Luis Marin
Carlos Luis Marin
Estudiante

Estoy siguiendo los pasos de dotenv pero desaparece el boton de paypal pero si dejo la variable directa si sale, alguna ayuda

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

¿Cómo puedo hacer para no escribir el clientID de forma directa en el código, se puede usar una variable de entorno o algo así? Entiendo que para enseñar esta bien pero ya en algo real que sale a producción estas claves no se pueden subir en el código…

1