¡Bienvenida! Este es un curso especial de React Hooks

1

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

2

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

Introducción a React Hooks

3

useState: estado en componentes creados como funciones

4

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

5

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

6

useReducer: como useState, pero más escalable

7

¿Qué es memoization? Programación funcional en JavaScript

8

useMemo: evita cálculos innecesarios en componentes

9

useRef: manejo profesional de inputs y formularios

10

useCallback: evita cálculos innecesarios en funciones

11

Optimización de componentes en React con React.memo

12

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

13

Third Party Custom Hooks de Redux y React Router

Configura un entorno de desarrollo profesional

14

Proyecto: análisis y retos de Platzi Conf Store

15

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

16

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

17

Configuración de Webpack 5 con loaders y estilos

18

Loaders de Webpack para Preprocesadores CSS

19

Flujo de desarrollo seguro y consistente con ESLint y Prettier

20

Git Hooks con Husky

Estructura y creación de componentes para Platzi Conf Store

21

Arquitectura de vistas y componentes con React Router DOM

22

Maquetación y estilos del home

23

Maquetación y estilos de la lista de productos

24

Maquetación y estilos del formulario de checkout

25

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

26

Maquetación y estilos del flujo de pago

27

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

Integración de React Hooks en Platzi Conf Merch

28

Creando nuestro primer custom hook

29

Implementando useContext en Platzi Conf Merch

30

useContext en la página de checkout

31

useRef en la página de checkout

32

Integrando third party custom hooks en Platzi Conf Merch

Configura mapas y pagos con PayPal y Google Maps

33

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

34

Integración de pagos con la API de PayPal

35

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

36

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

37

Integración de Google Maps en el mapa de checkout

38

Creando un Custom Hook para Google Maps

Estrategias de deployment profesional

39

Continuous integration y continuous delivery con GitHub Actions

40

Compra del dominio y despliega con Cloudflare

Optimización de aplicaciones web con React

41

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

42

Análisis de performance con Google Lighthouse

43

Convierte tu aplicación de React en PWA

Bonus: trabaja con Strapi CMS para crear tu propia API

44

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

¿Qué sigue en tu carrera profesional?

45

Próximos pasos para especializarte en frontend

No tienes acceso a esta clase

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

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

12/45
Recursos

Aportes 27

Preguntas 3

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Aca pueden encontrar hooks creados por la comunidad:
https://github.com/streamich/react-use
https://usehooks.com/

Resultado final de esta sección:

Soy muy fan de hacer uso los custom hooks, personalmente hay uno que uso en todos mis proyectos para trabajar de forma muy sencilla el hecho de adaptar componentes a diferentes tamaños de pantalla (normalmente trabajo con styledComponents y me apoyo de la librería de useMediaQuery para detectar de forma sencilla el tamaño de pantalla)

<h3>Custom Responsive Hook</h3>
import { useMediaQuery } from 'react-responsive';

export const useResponsive = () => {
  const isSuperBigScreen = useMediaQuery({
    minWidth: 2270,
  });

  const isBigScreen = useMediaQuery({
    minWidth: 1400,
  });

  const isDesktop = useMediaQuery({
    minWidth: 801,
    maxWidth: 1399,
  });

  const isSmallDesktop = useMediaQuery({
    minWidth: 801,
    maxWidth: 1000,
  });

  const isTablet = useMediaQuery({
    minWidth: 501,
    maxWidth: 800,
  });
  const isPhone = useMediaQuery({
    maxWidth: 500,
  });

  const isTabletOrPhone = useMediaQuery({
    maxWidth: 800,
  });

  return {
    isBigScreen: isBigScreen,
    isTablet: isTablet,
    isPhone: isPhone,
    isDesktop: isDesktop,
    isTabletOrPhone: isTabletOrPhone,
    isSmallDesktop: isSmallDesktop,
    isSuperBigScreen: isSuperBigScreen,
  };
};
<h3>Uso en componentes</h3>
import styled from 'styled-components';
import { useResponsive } from '../hooks/useResponsive';

const Stack = ({ children, cols }) => {
  const { isSmallDesktop, isTablet, isPhone } = useResponsive();

  const StackContainer = styled.section``;

  const StackIconContainer = styled.div`
    display: grid;
    grid-template-columns: ${cols
      ? `repeat(${cols}, 1fr)`
      : isSmallDesktop
      ? 'repeat(5, 1fr)'
      : isTablet
      ? 'repeat(4, 1fr)'
      : isPhone
      ? 'repeat(3, 1fr)'
      : 'repeat(7, 1fr)'};
    grid-gap: 20px;
    margin-top: 60px;
  `;
  const IconContainer = styled.div`
    box-sizing: border-box;
    background: #e5e5e5;
    width: 100%;
    margin: 0px;
    border-radius: 15px;
    padding: 15px;
  `;

  return children ? (
    <StackContainer>
      <Title>Stack</Title>
      <StackIconContainer>
        {children.map((item) => {
          return (
            <IconContainer key={item.id}>
              <a href={item.url} rel="noopener noreferrer" target="_blank">
                {item.img}
              </a>
            </IconContainer>
          );
        })}
      </StackIconContainer>
    </StackContainer>
  ) : (
    ''
  );
};

export default Stack;

Es importante a esta altura del curso conocer las reglas de los hooks

Reglas de los hooks

  • No invocar hooks desde loops, condicionales o funciones anidadas.
  • Todo custom hook debe iniciar por la palabra use
  • 2 componentes compartiendo el mismo hook no comparten el mismo estado
  • Un hook puede invocar a otro hook
  • Los hook solo deben usarse en componentes funcionales
  • Deben utilizarse en el nivel superior de los componentes

Proyecto con todos los hooks.

El proyecto de esta sección
Repository

Esto me parece mucho mejor. Aquí el código pero usando async/await:

import { useState, useEffect } from "react";
const useCharacters = url => {
  const [characters, setCharacters] = useState([]);
  useEffect(() => {
    async function fetchCharacters() {
      const response = await fetch(url);
      const characters = await response.json();
      setCharacters(characters.results);
    }
    fetchCharacters();
  }, [url]);
  return characters;
};

export default useCharacters;

Amo vue, pero este curso está muy pro!

Así quedo mi deploy final perdonen los estilos pero practiqué mucho los hooks haha 😄 https://hooks.franciscoep.vercel.app/

usando todos los hooks

Dark Mode

Acá tiene una lista de reproducción que implementa custom hooks que se suelen usar:

https://youtube.com/playlist?list=PLZlA0Gpn_vH-aEDXnaFNLsqiJWFpIWV03

Resultado final de esta sesión! 😄

Decidí agregar un nuevo customHook llamado ‘useCharacterContext’ donde me encargo de utilizar useContext y retornar los valores de CharacterContext, de esta manera evito estar importando useContext en los componentes donde quiera usar el contexto de character, de la siguiente manera:

Luego, en el componente donde necesite hacer uso del contexto, nada mas encapsulo el componente dentro del provider, y luego lo importo de la siguiente forma:

Por ultimo, así quedo visualmente !

Así quedó el mio
si lo quieren checar también tiene responsive:

Agradecería mucho si me siguen en GitHub y me regalan unas estrellitas:

Por si alguien tiene curiosidad en cuanto a pasarle en el array a useEffect la url, tenemos 3 casos, cuando no le mandamos nada, cuando le mandamos un array vacío y cuando le enviamos la url en el array

Caso 1. No enviamos nada al segundo parámetro

En este caso, entraríamos en un Loop Infinito, por qué? Porque recordar que cuando no enviamos ese segundo parámetro, el useEffect se va a renderizar en cada ocasión que cambie el estado. Por ende, cada vez que en la lìnea 4 llamamos al método “setCharacters” y definimos el nuevo estado de characters, este estado se ve actualizado lo que implica re renderizar el componente. Por ello, entraríamos en un bucle infinito (incluir un console.log si quieren comprobarlo)

Caso 2. Le enviamos un array vacio
En este otro caso, de enviar un array vacío, le estamos diciendo a useEffect que se renderice en dos de sus etapas de ciclo de vida, cuando se monte y cuando se desmonte. Esto no provocará un ciclo infinito, pero ocasionará que el componente se invoque 4 veces.

  1. Carga la página, nace el componente por primera vez
  2. Justo después de cargar la página, todavía no se ha llamado dentro de Characters, por ende “muere”
  3. Cuando finalmente lo llamamos desde Characters, el componente “nace”
  4. Cuando retornamos el valor characters, el componente “muere”

Si bien es cierto que es funcional, en algunos casos llamar 4 veces al componente podría acabar en un problema en el performance de la aplicación

Caso 3. Le enviamos la url en el array
En este caso, el expuesto en la clase, este se renderiza solamente 2 veces, cuando el componente nace y cuando lo invocamos dentro de Characters. Ya no importa si el componente está muriendo, ni tampoco importa que se actualice el estado, ya que solo se actualizará cuando nuestra url se actualice (cosa que no ocurrirá dentro del mismo Componente, evitando así un Loop infinito)

Esto sería más o menos todo, esto fue lo que entendí de las clases y revisando documentación y blogs, ya que no entendía del todo porque esto ocurría, si hay algún punto donde esté fallando o me esté confundiendo agradezco me lo indiquen y de igual manera, espero les ayude a comprender un poco el porqué de esta acción

Si alguno tiene problemas con que la data no llega al momento de renderizar el componente pueden probrar lo siguiente

// Notese el optional chaining
const filteredUsers = useMemo(() => {
    return characters?.filter(user => {
     return user.name.toLowerCase().includes(search.toLowerCase())
   })
  }, [characters, search])

// En el renderizado 

      <div className="character-wrapper">
        { characters && filteredUsers.map((character, key) =>
          (
            <Character {...character} parentCallback={setFavorite} key={key}/>
            )
            )}
      </div>
	

Resultado final de esta sección: Repositorio en Github

LightMode:

DarkMode:

Asi quedo el proyecto final de esta seccion:

Repo
Live Project



muy buen profesional Oscar Bajaras he seguido varios de sus cursos y cada vez son mejores Gracias

En este caso ¿el custom hook funciona de manera sincrona?¿puede pasar que el componente quiera renderizarse y la data de la API no haya llegado?

Custom hook con estado de loading para avisarle al padre que la petición se encuentra en proceso y así mostrar un spinner o algo similar

import {useState, useEffect} from 'react';

const useCryptos = (API_URL, page) => {
    const [cryptos, setCryptos] = useState([]);
    const [isLoading, setIsLoading] = useState(true);
    useEffect(() => {
        setIsLoading(true);
        fetch(`${API_URL}${page}`)
        .then((res) => res.json())
        .then((data) => {
            setCryptos(data);
            setIsLoading(false);
        });
    }, [API_URL, page]);
    return [cryptos, isLoading]
}

export default useCryptos

Así quedó mi código. Si alguien separó el Characters.jsx en componentes mas pequeños estaria bueno que lo comparta!

muchas gracias profesor 😄

Resultado de Uso de Hooks de React y algunos estilos improvisados:
.

.

Así quedó mi código. Si alguien separó el Characters.jsx en componentes mas pequeños estaria bueno que lo comparta!

https://github.com/Irungaray/R-M_PWA

Está incre!