隆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

Integrando third party custom hooks en Platzi Conf Merch

32/45
Recursos

Aportes 32

Preguntas 5

Ordenar por:

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

Ya lo solucionaron 馃槂 la aplicaci贸n funciona con el useHistory

Si estas usando React-Router-Dom v6 una solucion es usar el hook useNavigate

import React, { useContext, useRef } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { AppContext } from '../context/AppContext.js'
import '../styles/components/Information.css';

const Information = () => {
  const { state , addToBuyer } = useContext(AppContext);
  const form = useRef(null);
  const navigate = useNavigate()

  const handleSubmit = () => {
    const formData = new FormData(form.current);
    const buyer = {
      name: formData.get('name') ,
      email: formData.get('email'),
      address: formData.get('address') ,
      apto: formData.get('apto'), 
      city: formData.get('city'), 
      country: formData.get('country'),
      state: formData.get('state'),
      cp: formData.get('cp'),
      phone: formData.get('phone'),
    }
    addToBuyer(buyer);
    navigate('/checkout/payment')
  }

Les recomiendo usar la propiedad

devtool: 'source-map'

en su configuraci贸n de webpack. Con esto los errores se referencian a los archivos del proyecto y a las lineas de codigo que ustedes escriben. Sin esta propiedad los errores se marcan en el compilado de bundle.js y es m谩s dificil identificar su origen. Espero les sirva esto a la hora de hacer debugging.

A partir de la vesri贸n 6 de react-router-dom no se usa useHistory(), en su lugar tenemos useNavigate(), que cumple la misma funci贸n pero con algunas mejoras:

ej:

import { useNavigate } from "react-router-dom";

function App() {
  let navigate = useNavigate();
  function handleClick() {
    navigate("/home");
  }
  return (
    <div>
      <button onClick={handleClick}>go home</button>
    </div>
  );
}

Documentaci贸n

Ahora funciona useHistory, pero no deja de ser super did谩ctico la forma de proceder ante un bug y c贸mo reportarlo, ha sido incre铆ble Oscar!

Hola, si tienen el siguiente error

TypeError: Invalid attempt to spread non-iterable instance.
In order to be iterable, non-array objects must have a [Symbol.iterator]() method.
    at bundle.js:2
    at ie (bundle.js:2)
    at addToBuyer (bundle.js:2)
    at onClick (bundle.js:2)
    at Object.Ve (bundle.js:2)
    at Qe (bundle.js:2)
    at bundle.js:2
    at kr (bundle.js:2)
    at Cr (bundle.js:2)
    at bundle.js:2

Solo tienen que agregar la propiedad buyer al initialState.js porque la versi贸n que compartio el profesor en gist no la tiene, entonces el initialState.js queda asi

export default {
  cart: [],
  buyer: [],
  products: [
    {
      id: '1',
      image: 'https://arepa.s3.amazonaws.com/camiseta.png',
      title: 'Camiseta',
      price: 25,
      description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
    },
    {
      id: '3',
      image: 'https://arepa.s3.amazonaws.com/mug.png',
      title: 'Mug',
      price: 10,
      description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
    },
    {
      id: '4',
      image: 'https://arepa.s3.amazonaws.com/pin.png',
      title: 'Pin',
      price: 4,
      description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
    },
    {
      id: '5',
      image: 'https://arepa.s3.amazonaws.com/stickers1.png',
      title: 'Stickers',
      price: 2,
      description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
    },
    {
      id: '6',
      image: 'https://arepa.s3.amazonaws.com/stickers2.png',
      title: 'Stickers',
      price: 2,
      description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
    },
    {
      id: '7',
      image: 'https://arepa.s3.amazonaws.com/hoodie.png',
      title: 'Hoodie',
      price: 35,
      description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
    },
  ],
};

Hola a todos Chicos, Profesor algo que ayuda ver mejor p entender mejor el problema es dirigi茅ndose a Webpack y colocarlo en modo de desarrollo ya que el c贸digo actualmente para este video se esta produciendo para producci贸n. si se dan cuenta en la documentaci贸n dice que React evita mostrar el listado de errores en modo producci贸n. Ya para cuando lo pasen a modo de desarrollo React mostrar谩 m谩s detalles del error o errores.

En react-router-dom v6 useHistory() fue reemplazado por useNavigate()

import { useNavigate } from 'react-router-dom';
const navigate = useNavigate();
navigate('/home')

Esta clase fu茅 un poco rara, 隆nos habl贸 de como implementar un custom hook por parte de react-router-dom para a la final encontrar un error y no poderlo implementar!, ser铆a m谩s bien una clase de c贸mo identificar errores en nuestra app y c贸mo buscar soluciones/reaccionar ante ellos. Para los que tengan la duda a煤n, como han comentado los otros estudiantes, ya se puede usar el useHistory sin alg煤n problema, y tambi茅n puedes obtener m谩s informaci贸n de los errores si corres tu servidor de desarrolo en modo de desarrollo (valga la redundancia, pero en la configuraci贸n inicial de webpack que present贸 el profe no se hizo as铆).

Funciona perfecto con el useHistory!!!

En React Router v6 useHistory fue reemplazado por useNavigate

// This is a React Router v6 app
import { useNavigate } from "react-router-dom";

function App() {
  let navigate = useNavigate();
  function handleClick() {
    navigate("/home");
  }
  return (
    <div>
      <button onClick={handleClick}>go home</button>
    </div>
  );
}

Wow que excelente forma de dar con las soluciones que uno, como novato, normalmente las busca en stackOverflow

V6
<aside>
馃挕 Navigation with event :

</aside>

import { Link, useNavigate } from 'react-router-dom';
..
const navigate = useNavigate()
handleClick (){
	navigate('/checkout/payment')
}

Desde la versi贸n 6 de react router dom se dejo de usar el hook useHistory y fue remplazado por el hook useNavigate, para los que estan haciendo el curso en la versi贸n 6 de react router dom, el c贸digo quedar铆a de la siguiente manera.

import { useNavigate } from 'react-router-dom';

const Information = () => {
	const navigate = useNavigate()
	.
	.
	const handleSubmit = () => {
			.
			.
			navigate('/checkout/payment', { replace: true });
	}
}
	

Link de la documentaci贸n del hook
useNavigate

Les recomiendo modificar su script de start en el package.json para empezar en modo desarrollo, esto hacer que ver los errores se谩 m谩s f谩cil, yo tard茅 horas en arreglar algo, y con el modo desarrollo lo resolv铆 en un minuto jaja era un typo!!!

"start": "webpack serve --mode development",

Para los que tengan la V6 de react-router-dom, deben usar el hook useNavigate()

const navigate = useNavigate();

隆Hola! Estoy siguiendo este curso, pero usando NextJS + TypeScript + Tailwind + Zustand + React Hook Form. A煤n no lo termino, pero voy agregando poco a poco las cosas que vamos viendo.

Si les interesa ver el proyecto hasta esta clase, les dejo el link del proyecto: https://github.com/d4vsanchez/platzi-conf-merch/tree/react-hook-form

En esta clase Oscar nos ense帽a como googlear un bug de forma profesional, habilidad indispensable para los developers.

Deber铆an de cambiar el nombre de esta clase u omitirla, ya que, no se imparte como usar propiamente el Hook

Cre铆a que solo los mortales nos encontrabamos con este tipo de problemas jaja

si ya funciona!!

este error es un amigo ingrato
馃槢

Estoy usando las siguientes versiones a la fecha de Enero de 2021 y funciona perfecto

"react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-router-dom": "^5.2.0"```

El Hook que remplaza a useHistory es useNavigate, lo podemos instanciar de la misma forma pero este no requiere del m茅todo push para determinar la ruta. Basta con pasar la ruta entre parentesis. Dejo el c贸digo con esta opci贸n.

import React from 'react';
import { useRef, useContext} from 'react';
import { Link, useNavigate } from 'react-router-dom';
import AddContext from '../contex/AppContext'
import '../style/components/Information.css';

export const Information = () => {
  const {state, addToBuyer} = useContext(AddContext);
  const form = useRef(null);
  const navigate = useNavigate();
  const { cart } = state;

  const handleSubmit=()=>{
    const formData = new FormData(form.current);
    const buyer ={
      'name' : formData.get('name') ,
      'email' : formData.get('email') ,
      'address' : formData.get('address') ,
      'apto' : formData.get('apto') ,
      'city' : formData.get('city') ,
      'country' : formData.get('country') ,
      'state' : formData.get('state') ,
      'cp' : formData.get('cp') ,
      'phone' : formData.get('phone') 
    }
    addToBuyer(buyer);
    navigate('/checkout/payment');
  };

  return (
    <div className="Information">
      <div className="Information-content">
        <div className="Information-head">
          <h2>Informacion de contacto:</h2>
        </div>
        <div className="Information-form">
          <form ref={form}>
            <input type="text" placeholder="Nombre completo" name="name" />
            <input type="text" placeholder="Correo Electronico" name="email" />
            <input type="text" placeholder="Direccion" name="address" />
            <input type="text" placeholder="Apto" name="apto" />
            <input type="text" placeholder="Ciudad" name="city" />
            <input type="text" placeholder="Pais" name="country" />
            <input type="text" placeholder="Estado" name="state" />
            <input type="text" placeholder="Codigo postal" name="cp" />
            <input type="text" placeholder="Telefono" name="phone" />
          </form>
        </div>
        <div className="Information-buttons">
          <div className="Information-back">
            <Link to='/checkout'>
              Regresar
            </Link>

          </div>
          <div className="Information-next">
            <button
              type='button'
              onClick = {handleSubmit}
            >
              Pagar
            </button>
          </div>
        </div>
      </div>

      <div className="Information-sidebar">
        <h3>Pedido:</h3>
        {
          cart.map((item)=>(
            <div 
              className="Information-item"
              key={item.title}
            >
              <div className="Information-element">
                <h4>ITEM Name</h4>
                <span>${item.price}</span>
              </div>
            </div>
          ))
        }
      </div>
    </div>
  );
}

Una alternativa es usar

const navigate = useNavigate();

y en la funcion donde quieran redireccionar solo usan

navigate('ruta a la que quieras redireccionar')

useNavigate in reactrouterdomv6

Me gusto el recorrido por el error, creo que ha sido lo mas valioso del curso hasta ahora

Si tienen este tipo de errores donde es importante filtrar por fecha pueden usar las flags de google: after:2020 o before:2021

Me funciona el useHistory

import React, { useRef, useContext } from "react";
import { useHistory } from "react-router-dom";
import AppContext from "../context/AppContext";
import "../styles/Information.scss";

const Information = () => {
  const { state, addToBuyer } = useContext(AppContext);
  const form = useRef(null);
  const { cart } = state;
  let history = useHistory()
  const handleSubmit = () => {
    const instanceOfData = new FormData(form.current);

    const buyer = {
      nombre: instanceOfData.get("name"),
      email: instanceOfData.get("email"),
      address: instanceOfData.get("address"),
      apto: instanceOfData.get("apto"),
      city: instanceOfData.get("city"),
      country: instanceOfData.get("country"),
      state: instanceOfData.get("state"),
      cp: instanceOfData.get("cp"),
      phone: instanceOfData.get("phone"),
    };
    addToBuyer(buyer);
    history.push('/checkout/payment')
  };

Consejo , usen react developer tools para ver todos los props que tiene disponibles en sus componentes

Me parece genial que busques todos esos recursos para resolver el problema, en la documentacion en react, issues de react-router-dom. Super muy util

n