Platzi
Platzi

LA EDUCACI脫N ES UN REGALO 隆ACCEDE AL PRECIO ESPECIAL!

Antes: $249
$149
Currency
Antes: $249
Ahorras: $100
COMIENZA AHORA
Termina en: 16D : 16H : 9M : 29S

隆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? T茅cnicas de optimizaci贸n en programaci贸n funcional

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

useState: estado en componentes creados como funciones

3/45
Recursos

Aportes 68

Preguntas 9

Ordenar por:

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

React 17
Nota: desde la version 17 de React es opcional importar React en todos los componentes solo se importa una sola vez en todo el proyecto, este caso solo se importa en el archivo index.js, y solo se necesita importar lo que vamos a usar de la librer铆a
Antes en cualquier componente

import React, {useState} from 鈥榬eact鈥;

Versi贸n 17 de React

import {useState} from 'react鈥

Para generar el componente con el atajo en VSCode me funciono 鈥渞afce + Tabulador鈥

Para el que todavia no tenga activado la escritura rapida en react les dejo lo siguiente
presionan ctrl + shift + P
dan clic en Preferences: Open Settings (JSON)
y agregan a la ultima linea del json lo siquiente

"emmet.includeLanguages": {
        "javascript": "javascriptreact"
    }```

useState

Te permite poder usar variables de estado dentro de componentes funcionales.

El Hook useState siempre nos retorna un array de dos posiciones. En la primera posici贸n [0] vamos a tener el estado y 茅l la segunda posici贸n [1] vamos a tener la funciona para manipular el estado.

const [state, setState] = useState(0);

En este caso hacemos uso de la desestructuraci贸n del array una caracter铆stica de ES6.

state 鈬 0

setState 鈬 Funci贸n que actualiza el estado

Nuestro estado puede ser de los siguente tipos:

-String

-Boolean

-Number

-Float

-Null

-Undefined

-Object

-Array

useState: estado en componentes creados como funciones

Este Hook nos ayuda a manejar el estado en componentes creados como funciones

  • Crear carpeta components
  • Crear archivo Header.jsx


Header.jsx

// traemos useState al documento
import React, {useState} from 'react'

const Header = () => {
    /*
     * Integrar useState a esta logica
     * useState va a manejar este estado 
     * y haremos una funci贸n que cambia de Darmode a lightmode
     */

    /*
     * Constante que va a estructurar 2 elementos
     * el primero(darkMode) es el estado
     * el segundo(setDarkMode) es la funci贸n que cambiar谩 al estado(darkMode)
     * de useState y lo pasamos como una funci贸n con estado inicial false
     */
    const [darkMode, setDarkMode] = useState(false);

    /*
     * Funci贸n para hacer los cambios de estado
     */
    const handleClick = () => {
        setDarkMode(!darkMode);
    };

		/*
     * Creamos el header con el logo 
     * y un boton para activar el DarkMode
     * dentro del boton ingresamos la logica para mostrar darkmode o lightMode
     */
    return (
        <div className="Header">
            <h1>React hooks</h1>
            <button type="button" onClick={handleClick}>{darkMode ? 'Dark Mode' : 'Light Mode'}</button>
            <button type="button" onClick={() => setDarkMode(!darkMode)}>{darkMode ? 'Dark Mode 2' : 'Light Mode 2'}</button>
        </div>
    )
}

export default Header


App.js

import './App.css';

// Importamos componente Header
import Header from './components/Header';

function App() {
  return (
    <div className="App">
      <Header />
      <h1>
        Hola Mundo
      </h1>
    </div>
  );
}

export default App;
yo uso *rafce* para crear la estructura inicial

Al enlazar el estado 鈥淒ark Mode鈥 a la vista 鈥淏ot贸n鈥 a trav茅s de un manejador de eventos 鈥渉andleClick鈥 se est谩 aplicando la arquitectura MVC y se est谩 realizando un Two-way-data-binding?

tenia tiempo sin ver un curso de oscar 馃槃

<h1>A modo de repaso</h1>

useState es un Hook que te permite a帽adir el estado de React a un componente funcional.
Se debe importar de la siguiente manera

import { useState } from 'react'

Maneja una pareja de valores: el estado actual y una funci贸n que lo actualiza. Por eso escribimos en el ejemplo de la clase se escribe

const [darkMode, setDarkMode] = useState(false)

Siendo darkMode la variable que contiene el estado actual del componente y setDarkMode la funci贸n.
Dentro de useState() tenemos un par谩metro que es el estado inicial.
Al contrario que en las clases, el estado no tiene por qu茅 ser un objeto. Podemos usar n煤meros o strings si es todo lo que necesitamos.
En el caso particular de la clase, la funci贸n para cambiar nuestro estado ser谩 llamada dentro de un onClick que es un evento que dispara un trozo de c贸digo cada que un bot贸n es presionado. Como se muesta en el siguiente snippet

<button type="button" onClick={handleClick}>{darkMode ? 'Dark Mode' : 'Light Mode'}</button>

Y, el estado de nuestro componente ser谩 mostrado usando un operador ternario, que b谩sicamente es un if-else reducido a una l铆nea 馃槈

Yo escrib铆 un art铆culo en la que explico (seg煤n mis conocimientos y lo que he ido aprendido) sobre useState, espero les guste
.
El art铆culo es el siguiente: https://dartiles.dev/blog/como-funciona-el-hook-usestate-y-como-usarlos-con-arrays-y-objetos
.

.
El blog est谩 hecho con svelte, y lo hice gracias al curso de Oscar de sapper y svelte 鉂

Mas chido a煤n, funciona digitando rfc - enter

<import React from 'react'

export default function Header2() {
    return (
        <div>
            
        </div>
    )
}
>

para iniciar componente, excelente
rfc = reactFuncionalComponent

resultado:

<import React from 'react'

export default function Header() {
    return (
        <div>
            
        </div>
    )
}
>

Yo tambi茅n prefiero hacer la l贸gica con el handleClick por si despu茅s quiero agregarle m谩s l贸gica al click.

Esperaba mucho mas de esta clase, pense que hablarian mas de como funciona internamente useState que pasa con ese valor donde se almacena, como lo utiliza react, conocimientos mas profundos sobre el useState no solo para usarlo si no tambien entender que esta pasando mientras lo usamos, clase se tomo 5 minutos para crear un componente, este no es un curso basico y ya react tiene ese curso, me odiaran por el comentario pero me gustaria si vamos a hablar de useState nos centremos en el, no que nos tome tanto tiempo para de mas cosas.

Ojo aclaro todo este comentario es sin ofender a alguien, entiendo que hacer esto no es sencillo, pero es una critica constructiva para la clase.

a mi no me funciono el Shortcut 鈥渟lr鈥

Este snippet me ayuda a tener la estructura del componente funcional.

con la extensi贸n de 鈥楢uto Import鈥 ahorras el tiempo en buscar el componente, pues lo hace por ti.

para los que no entiende lo del toggle. setDarkMode(!darkmode) Simplemente verifica el estado de darkmode y lo cambia por lo contrario. si es true lo coloca false, si es false lo coloca true.

Notan que ahora la cara de los profesores aparece todo el tiempo
Se nota que Platzi escucha las sugerencias de sus estudiantes

Reglas de los Hooks

Los Hooks son funciones que necesitan seguir 2 reglas:

  1. Posicionamiento en Top Level
    • Los Hooks no deben ser llamados dentro de ciclos, condiciones o funciones profundas.
    • El Hook deber谩 ser llamado en el nivel para vincularse al comportamiento del despliegue del componente, permitiendo retener el estado del hooks entre llamadas.
  2. Dentro de Functions Declarations
    • Si el componente est谩 declarado como clase, no podr谩 utilizar hooks. Ya que ocupa otro tipo de abstracci贸n.

.


.

useState

馃挕 INFO
Retorna un valor, administrado por una funci贸n.

.

Definici贸n

// function definition
const [state, setState] = useState(initialState);
// update state
setState(newState);
// use of state
<p>You clicked {state} times</p>
  • Su primer despliegue, el valor del state es el declaro por initialState .
  • La funci贸n setState es usada para actualizar el estado, llam谩ndola se actualiza el estado y desplegando nuevamente al componente.

.

Consideraciones

El API de useState no permite abstraer su retorno mediante una referencia de un Array . Con el concepto de array destructuring podemos asignar nuevos valores referenciados a su valor de salida de la funci贸n.
.
Al declarar una variable de estado con useState , obtenemos un par de valores estructurados como Array .
.

鈿狅笍 NOTE
Si en un proceso de actualizaci贸n de estado del Hook, se asigna el mismo valor que que el actual, el componente no se actualizar谩 para desplegarse de nuevo.

Me gustar铆a aclarar este punto que menciono el profe Oscar

<button type="button" >Darkmode </button>

<button> por defecto utiliza " type=鈥榮ubmit鈥 "
Cuando realicemos nuestros proyectos es importante declarar si se quiere un 鈥渟ubmit鈥 o un "button"
Para que en consola no est茅 apareciendo un mensaje 鈥淲arning鈥 de React

No se si lo dijeron ya pero crear la funcion dentro del onclick es una mala practica por que cada vez que se renderice el componente se va a estar creando una funcion anonima en el stack. o sea que si el componete se renderiza 50 veces voy a tener 50 arrows anonimas creadas. Por eso siempre es mejor llamar la funciona con un nombre.

React.useState:

  1. import React, {useState} from 鈥榬eact鈥;
  2. Crear const [uno, setUno] = useState(鈥1鈥)
    1. Donde uno es la variable que modificara su estado, setUno es la funci贸n que modificara su estado al suceder X cosa, y 鈥1鈥 es el valor inicial que tendr谩 esa variable
  3. En el valor inicial o 鈥1鈥 puede ir: bool, numero, string, objeto o array.
  4. Manejando el evento de lo que modificara su estado o alg煤n estado activaremos la funci贸n que recibir谩 el evento y activara la funci贸n setUno para modificar su valor, ej: setUno(鈥2鈥)
  5. Siempre que se recargue la pagina, el valor volver谩 a su valor inicial!
  6. Para la funci贸n que activara la funci贸n setUno, la convenci贸n es llamarla 鈥渉andleNOMBRE_DE_LA_VARIABLE鈥, ej: handleUno.
  7. C贸digo a tener en cuenta: al activar setToggle (!toggle), siempre modificara el valor que tiene toggle en ese momento pero a su inversa.

const [toggle, setToggle] = useState(false);

const handleToogle = () => {
setToggle(!toggle);
}

  1. Si toggle es false no se mostrara, si toggle cambia a verdadero si lo mostrara, por el siguiente condicional:

    {toggle && <Menu/>}

Tambi茅n podemos hacer:

setDarkMode(prev => !prev)

Aca la en la funcion que setea el nuevo estado podemos pasarle una funcion donde como primer parametro recibe el estado actual y retornar谩 el estado nuevo.

Cabe destacar aqu铆 que si tu pr贸ximo valor del estado depende del anterior, el hook de useState tambi茅n recibe una funci贸n con el valor del estado anterior, el cual podr铆as utilizar para setear el siguiente. Es decir, adaptando el ejemplo de lo que nos explica el gran profe Oscar:

import React, {useState} from 'react'

const Header = () => {
    const [darkMode, setDarkMode] = useState(false);

    const handleClick = () => {
	/*
	 * En este caso estamos utilizando el valor anterior del estado y 
	 * seteando su valor contrario con el return de la funcion
	*/
    	setDarkMode(prevValue => {
				return !prevValue
	 		 });
    };

    return (
        <div className="Header">
            <h1>React hooks</h1>
            <button type="button" onClick={handleClick}>{darkMode ? 'Dark Mode' : 'Light Mode'}</button>
        </div>
    )
}

export default Header

Es m谩s 贸ptimo utilizar esta forma ya que evitas posibles errores en tiempo de ejecuci贸n.

Importante recordar que useState maneja no solo booleanos sino tambi茅n strings, etc. Yo suelo pensarlo como una constante normal que puede tomar cualquier tipo de valor y se cambia por medio del set.

si no econtraron slr es porque al parecer es un shorcut personal.
pero si existe

rafce (react arrow function component with es7 module system)
con este shorcut conseguimor imr + slr que hizo Oscar

Si alguien usa vim y quiere usar los shrotcuts, lo que pueden hacer es instalar el plugin coc.nvim con el plugin hacen la instalacion de coc snippets
https://github.com/neoclide/coc-snippets
cuando lo tengan, abren un archivo de jsx y usan el comando :CocCommand snippets.editSnippets

Una vez en el archivo de configuracion, pueden copiar estos snippets que encontre en un repo de github
https://github.com/neoclide/coc-snippets/blob/master/tests/snippets/coffee-react.snippets
Y listo, tienen snippets

Dejo mi aporte 馃槂

Los componentes de React por convenci贸n inician en may煤sculas.
Y para crear los templates de HTML debemos usar la extensi贸n .jsx

Me gusta este curso, nada mejor que aprende haciendo proyectos

Les recomiendo esta extension (Error lens), si quieren ver estos mensajes de ayuda en el codigo

隆Que genial que hagan un curso de Hooks!

隆Que genial, es la extensi贸n de VS Code que estaba precisando!

Este video me ayudo a repasar los hooks que se ven en el curso UWU

En lo personal a mi me parece mejor hacer una funcion en vez de colocar la logica en el boton, porque asi se puede separar y ver mejor, y en el template solo tienes los elementos de template y no logica compleja

Para poder usar los states, tenemos que importarlos: import React, { useState } from 'react'.

Dentro de 鈥榮rc鈥 creamos la carpeta 鈥榗omponents鈥 y el archivo 鈥楬eader.jsx鈥.

import React, { useState } from 'react'

/*useState lo usaremos para la l贸gica que cambia entre dark mode y light mode*/

const Header = () => {
  const [darkMode, setDarkMode] = useState(false) //*Valor inicial
  //* Variable, Funci贸n

  const handleClick = () => {
    setDarkMode(!darkMode); //*Toggle para cambiar su valor
  }

  return (
    <div className="Header">
      <h1>ReactHooks</h1>

      <button
        type="button"
        onClick={handleClick}
      >
        {darkMode ? 'Dark Mode' : 'Light Mode'}
      </button>

    </div>
  )
}

export default Header

Usamos el componente en App.js:

import './App.css';
import Header from './components/Header';

function App() {
  return (
    <div className="App">
      <Header />
      <h1>Hola mundo</h1>
    </div>
  );
}

export default App;

Y como resultado tendremos un bot贸n que cambia de texto cuando le hacemos click.

鈥淗eader鈥 suena m谩s como 鈥渏edr鈥 no 鈥渏idr鈥, la 鈥渆a鈥 en este caso se dice como una 鈥渆h鈥 como en 鈥渂ed鈥.

sinceramente me gusta mas usar hook que class

Header.jsx

import React, { useState } from 'react'

const Header = () => {
    //Definici贸n de variable y modificador 
    const [darkMode, setDarkMode] = useState(false);
    
    //Handler que al ser  ejecutada cambia el estado de la variable a su inverso 
    const handleClick = () => {
        setDarkMode(!darkMode);
    }

    return (
        <div className="Header">
            <h1>React Hooks</h1>
            {/* handleClick se ejecuta al presionar el bot贸n, y
                seg煤n vaya cambiando el estado, mostrar谩 una palabra u otra */}
            <button type="button" onClick={handleClick}>
                { darkMode ? 'DarkMode' : 'LightMode' }
            </button>
        </div>
    )
}

export default Header

As铆 es como yo entiendo el useState

En esta clase tenemos, const [darkMode, setDarkMode] = useState(false)

useState(false) es el valor inicial de darkMode, y cuando queramos cambiar el valor de darkMode, tenemos que invocar setDarkMode para actualizar a darkMode

si no te aparece el shortcut de slr es porque tienes que descargar otro plugin m谩s, el cual es el siguiente >> https://marketplace.visualstudio.com/items?itemName=EQuimper.react-native-react-redux

Les comparto la documentaci贸n oficial para que puedan buscar un poco m谩s profundo sobre useState en el siguiente link!

驴A que se refiere Oscar con 鈥淒estructurar鈥 el estado?

Tengo una consulta, si tengo un formulario para registrar una empresa (por ejemplo) tendr铆a que hacer un setValue para cada input? (SetNombre, setPais, setDireccion, setRepresentante鈥 y as铆 con todos los datos)??? Porque antes con un setState({ e. target. name: e. target. value}) era suficiente para meterlo a una funcion llamada handleChange y pasarle a todos los input. Ahora como podr铆a manejarse el hook useState para formilarios grandes?

Hola de forma accidental elimine la barra de herramientas del lado del Vscode, como se vuelve a poner? muchas gracias.

Ese plugin de snippets para VSCode es oro 馃ぉ

import React, { useState } from 'react';

export const Header = () => {
    const [ darkMode, setDarkMode ] = useState(false); 

    //==> Creating a function to handle the click of the button
    function handleClick() {
        setDarkMode(!darkMode);
    }

    return (
        <header>
            <h1>React Hooks</h1>
            <button type="button" onClick={ () => setDarkMode(!darkMode) } >{ darkMode ? 'Dark Mode' : 'Light Mode' }</button>
            <button type="button" onClick={ handleClick } >{ darkMode ? 'Dark Mode' : 'Light Mode' }</button>
        </header>
    )
}

useState nos ayuda a manejar el estado en componentes funcionales, algo que antes solo se pod铆a hacer con componentes de clases鈥

la extensi贸n 鈥Reactjs code snippets鈥 tiene shortCuts buenos

buen ejemplo de como comenzar con useState, muy claro profe,

Que bueno saber las dos formas de mandar a llamar a la funci贸n:

<button type="button" onClick={handleClick}>{darkMode ? 'Dark Mode' : 'Light Mode'}</button>
y 
 <button type="button" onClick={() => setDarkMode(!darkMode)}>{darkMode ? 'Dark Mode 2' : 'Light Mode 2'}</button>

no me deja correr en visual, ya descargue todos los archivos para empezar y no me da鈥

<h3>useState</h3>
  • Estado en componentes creados como funciones

  • Nos sirve para utilizar los estados en componentes funcionales

  • Para usarlo se importa useState de react

    • Creamos la variable y la 鈥渇uncion para cambiar su valor鈥 , adicional le asignamos el valor por defecto
      • const [isDarkMode, setIsDarkMode] = useState(false);
    • Para cambiar su valor usamos la funcion y le asignamos el valor deseado
      • setIsDarkMode(!isDarkMode);
    • Para usar su valor usamos el nombre de la variable
      • {isDarkMode ? "Dark Mode" : "Light Mode"}

Other feature of useState is that you can pass a callback to operate with the current state and return a new one. For example, I want to operate a state called count and I would like to increase, decrease and reset the state. Let鈥檚 do it.
.

import React, { useState } from 'react'

export default function HookCounter() {

	const initialCount = 0;
	const [count, setCount] = useState(initialCount);

	return (
		<div>
			Count : {count}
			<!-- I can pass a value as argument to set a new one -->
			<button onClick={() => setCount(initialCount)}>
				Reset
			</button>
		
			<!-- I can pass a callback to interact with the previous state  and return a new value -->
			<button onClick={() => setCount(prevCount => prevCount + 1)}>
				Increment
			</button>
		
			<button onClick={() => setCount(prevCount => prevCount - 1)}>
				Decrement
			</button>		
		</div>
	) 	  
}

.
Thanks

Muy interesante el reto.
Aca mi solucion

https://gifyu.com/image/Uvtm

Que significa destructurar un objeto? es que veo siempre que usan {} como en el caso de useState

Excelente clase鈥 ahora todo tiene m谩s sentido
Pd: minuto 11:19 useEsFake o useEffect jajaja

驴Se pierde el sonido al final de cada video?

Bastante, bastante entendible

Hola, voy a seguir este curso en NextJS, les dejo el repositorio de mi proyecto:

https://github.com/danyel117/platzi-conf-store

Excelente! Me encanta como explica Oscar, entiendo mejor ahora lo de setear el estado directamente 馃槂

m

Parece ser que en la versi贸n 17 de React, ya no es necesario hacer el

import React from 'react'

.

que consola esta usando?

Oscar el .jsx es estrictamente necesario, o tu lo usas por costumbre?