React Context: estado compartido

💚 Like si quieres un Curso de Patrones de Render en React.js donde podamos profundizar en los distintos patrones como las render props para maquetar o compartir información entre componentes

“Corta sin miedo” decían…

Pasé más de 1 hora pillando el error generado por cortar y pegar…

Esta web es una joyita, explica muy claro lo que se hace en esta clase y en la siguiente. Está en inglés pero no se hace complicado leer porque es muy breve y va al grano. Buen provecho: https://dmitripavlutin.com/react-context-and-usecontext/

React Context ha sido una maravilla 🤯
Solo he usado useEffect y useState. React Context es lo que realmente estaba necesitando

Lo que me está salvando la vida en este curso es hacer un git commit para cada clase; así, si tengo problemas “cortando y pegando” líneas de código, un git reset y voilà.

¿Que es el React Context?

• Es una herramienta de React que permite compartir estados a través de nuestros diferentes componentes de la app.
• Esto a partir de Providers y Consumer.
• Nos ayuda a reducir la cantidad de props que tengamos que compartir en todos los elementos de nuestros componentes.

Ejemplo:

//Archivo para usar React Context
const TodoContext = React.createContext();

//TodoContext se convierte asi en un Provider y un Consumer del método createContext.

function TodoProvider(props) {
	//Logica de tu app
	return (
		<TodoContext.Provider value={  { //propiedades (estados) que quieras compartir} }
			{props.children}
		</TodoContext.Provider>
}

export {TodoContext, TodoProvider};

Asi envovlviendo tu componente <AppUI> con <TodoProvider> compartes los estados que necesites con el restos de tu app (sin necesidad de recibirlas mediante props) de la siguinete manera:

//Dentro del componente App UI
<TodoContext.Consumer>
	{ value => { 
		//estados que tu componente va a necesitar 					usandando value.{estado}
		 }
	}
</TodoContext.Consumer>

Observaciones apreciadas ✌

Eso de las render props me exploto la cabeza, gracias a este curso estoy un poco mas cerca de mis metas.

Creo que desde un inicio se deberia estructurar todo el proyecot de forma correcta, para no generar relleno en los curso

Siento que voy a tener un blowmind. Esto de React Context es nuevo para mi

De hecho, desde la versión 17 de React ya no es necesario el import React from "react" si y solo si estamos usando archivos .jsx
.
De esta manera, para usar createContext() bastaría con importarlo simplemente con:

import { createContect } from "react"

Mismo con todos los hooks.

Alguien (Yo) no estuvo haciendo commits y ahora sufre por que le tronó el código y no encuentra el error 😦 Eso de cortar a diestra y siniestra no me ayudó mucho!

Que clase compleja, creo que al final lo entendi todo y sus detalles pero tuve que repetirla un monton de veces, muy bien explicado BTW

React context es como magia, pero es real

React Context

React context nos permite compartir y consumir datos en cualquier componente que necesitemos en nuestra app sin necesidad de usar props.
Context es una API interna de React, implementada desde la versión 16.
.

¿Qué problemas resuelve React Context?

Nos ayuda a evitar un problema llamado “props drilling”.
.
Props drilling es un término para describir cuando pasas props en varios niveles de profundidad, por ejemplo, supongamos que tienes un componente “bisabuelo” y ese componente quiere darle un regalo 🎁 (props) a su bisnieto, el componente bisabuelo tiene la opción de darle ese regalo al abuelo, para que se lo de al hijo, y este hijo al nieto. O también tiene la opción de mejor entregárselo él directamente, sin intermediaciones innecesarias, que ahí es donde entraría React Context.

.

¿Cómo uso React Context?

Hay 4 pasos para usar React Context:

1. Crear el contexto, utilizando const newConext = createContext();
2. Envolver tus componentes en el provider del contexto creado en el paso 1.
3. En la propiedad value del provider mandamos todas las props que queremos que sean accesibles por nuestros componentes.
4. Para usar una propiedad del provider en un componente, se usa <newConext.Consumer>

Que clase de magia es React Context! 🤯

Pregunta de examen:
¿Qué propiedad debemos enviarle al Provider de un contexto en React para consumirlo desde su respectivo Consumer?

Me esta costando un poco de trabajo comprender a detalle, revisare nuevamente este tutorial y revsiare si hay más cursos complementarios.

Brutal!, muy buen curso JuanC, toca practicar mucho esto para aprender a manejarlo sin perderse en mar de conocimiento jaja :’)

El profe: No tengas miedo a cortar B)
yo: ok Me crashea todo y tardo una hora en ver que pex

Me encanta este curso 🤟

interactuando diferentes estados compartidos los cuales nos deja realizar react

gracias profe por la documentacion que dejo

importante

Esta clase es oro puro! Para los que se les complica el uso del git, también existe el CTRL + Z 🤣🤣🤣

metodo diferentes estados dentro de react

Sacha y Oscar … Los extraños

react.createContext()

Me vi tres veces para entenderte jajaja esta super! Gracias

Me tarde como media hora solucionando un error que me lanzaba y luego me di cuenta que no habia envuelto <AppUI/> con Provider 🥲

Esto me recuerda a cuando inicie con vuejs y tuve que incuir vuex

Pregunta de examen:
¿Cómo creamos un contexto en React?

Estaria Bueno un BootCamp de REACT

Por ‘cortar sin miedo’ arruine el proyecto ajjaja no tengo idea de que hice mal, el Provider no pasa ninguna prop y no se por qué

Estoy encantado de la actualización de este curso… siento que aprendí muchísimo mas…

Lo que no me gusta a veces es que entre tanto código me pierdo mucho. Ejemplos más sencillos de cada funcionalidad primero ayudarían a tener una mejor idea antes de enredarnos en copia y pega, mueve y mueve, cambia y cambia bloques enormes de código… No todos podemos seguir al profe tan rápido como otros.

Juan es un excelente profe, solo que me ha pesado mucho ese detalle.

Si como yo React Context te rompió un poquito la cabeza, aquí está un artículo que me ayudó muchísimo a entenderlo como funciona de manera concisa y clara.

https://www.freecodecamp.org/news/react-context-for-beginners/

Pregunta de examen:
¿Cómo podemos enviar información de un componente “abuelo” a un componente “nieto” sin necesidad de pasar las props por el componente “hijo/padre”?