A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

React Context: estado compartido

16/23
Recursos

Aportes 37

Preguntas 16

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

馃挌 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

鈥淐orta 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 鈥渃ortando 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 鈥渂isabuelo鈥 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 鈥榗ortar 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 鈥渁buelo鈥 a un componente 鈥渘ieto鈥 sin necesidad de pasar las props por el componente 鈥渉ijo/padre鈥?