No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Contexto global de la aplicaci贸n

9/31
Recursos

Aportes 55

Preguntas 5

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

Por que usaremos un estado global
Para que, cuando nuestro proyecto vaya aumentando su complejidad, no s茅 vuelva tedioso estar pasando la informaci贸n que componetes, hermanos, hijos, padres, necesitan entr茅 s铆.

Tambi茅n, por que es mas facil debuggear errores teniendo una sola fuente de la verdad en cuanto almacenamiento para nuestra aplicaci贸n a la vez que lo hace mas legible y facil de mantener. 馃槂

Con el context evitamos el 鈥減rops drilling鈥 驴Que es? Cuando tenemos que pasar los datos que necesita cada componte por las propiedades,

Componete padre => hijo => nieto => bisnietos.

Con reactContext nos evitamos eso. y directamente llamamos dentro del componente al dato que necesitamos a travez del contexto.

Los tenemos por separados
Componente padre {contexto = dato}
Hijo {contexto = dato}
nieto{contexto = dato}
bisnieto {contexto = dato}

El prop drilling lo definimos como un paso del desarrollo que ocurre cuando necesitamos obtener datos que est谩n en varias capas en el 谩rbol de componentes React, es decir, necesitamos comunicar los componentes padres con sus componentes hijos.

El contexto global nos permite evitar el env铆o de props entre todos estos componentes (prop drilling), teniendolos 鈥渃entralizados鈥 viviendo en un solo lugar y al cual podemos acceder desde cualquier parte de nuestra aplicaci贸n (todo lugar que se encuentre contenido en el wrapper)

Hola comunidad les comparto mis apuntes de la clase sobre el uso de Context en React, espero les sean de utilidad.
Link aqu铆:
https://bg99astro.notion.site/Contexto-global-8668a3e7a2ce4e398221689616a633e2

Hola compa帽eros, se que todos estaremos escribiendo lo mismo pero ahi les va por que usamos un contexto global en sencillas palabras.

B谩sicamente lo usamos para poder tener diferentes estados y usarlos en toda la aplicaci贸n, sin la necesidad de volverlos a crear cada vez que necesitemos un estado en particular en cada archivo [index.jsx[.

En resumen, es para no repetir c贸digo a lo que yo pude entender, y esto har谩 que nuestro c贸digo sea mas limpio y ordenado

En el curso de introducci贸n a react varias cosas no me quedaron claras, varias cosas aparec铆an y solo se infer铆a que se utilizaban. Como el provider y consumer.

Esas mismas cosas en este curso me quedan m谩s claras, pero eso no implica que el curso de introducci贸n a react no sea bueno, el curso de intro a react b谩sicamente nos quita el miedo a afrontar el entorno y este muestra m谩s claro varios conceptos.

Es como aprender ingl茅s, duolinguo no te ense帽ara ingles, pero te quita el miedo a afrontar el idioma y hablar con nativos realmente te ense帽ara como se usa realmente el lenguaje.

Me encanta como estos nuevos cursos se complementan.

Usaremos un estado global ya que es m谩s sencillo comunicar las propiedades y el estado por los componentes.
Como la aplicaci贸n no es tan grande, Context es bastante 煤til en lugar de Redux o useReducer().

De igual manera, considero importante crear un Hook de useContext() para reutilizarlo a lo largo de la aplicaci贸n.

Por si a alguien le interesa les muestro mi implementacion del contexto con typescript.

import { createContext, ReactNode } from "react";

type Props = {
    children:  ReactNode
}

const ShoppingCartContext = createContext<Props | null>(null); 

export const ShoppingCartProvider: React.FC<Props> = ({children}: Props) => {
    return (
        <ShoppingCartContext.Provider value={{ children }}>
            {children}
        </ShoppingCartContext.Provider>
    )
}

export default ShoppingCartProvider;

Por fin una explicaci贸n sencilla y did谩ctica sobre el tema, gracias!

El principal motivo para utilizar React Context para compartir datos globalmente es mantener un estado compartido accesible a lo largo de varios componentes en una aplicaci贸n de React, sin necesidad de pasar expl铆citamente props a trav茅s de m煤ltiples niveles de la jerarqu铆a de componentes.

Para evitar el prop drilling
En proyectos de React, suelo preferir el uso de un estado global, especialmente cuando la aplicaci贸n se vuelve m谩s compleja y necesita una gesti贸n centralizada del estado. Al usar un estado global, evitamos la necesidad de pasar datos entre m煤ltiples componentes mediante props, simplificando el c贸digo y mejorando la escalabilidad. Adem谩s, herramientas como Redux facilitan el manejo de estados as铆ncronos y aportan estructura al desarrollo, especialmente en proyectos m谩s grandes. En resumen, para situaciones m谩s complejas, me inclino hacia el estado global.

El Estado Global de nuestra aplicacion generado por createContext de React, nos permite acceder a todos los datos que necesita un componente, independiente de todo el resto.
Esto nos permite manejar de manera individual las props que recibe cada componente y asi hacer mas facil la correccion de errores ya que tenemos toda la informacion de la aplicacion reunida en el Context.

para utilizar los valores de los estados en distintos componentes!

Usamos un estado global porque es la manera m谩s profesional, f谩cil y escalable de hacer que la informaci贸n se converse en toda nuestra aplicaci贸n.

Usamos un estado global para que as铆 distintas partes de la aplicaci贸n tengan la capacidad de interactuar con la data que viene de la API, para hacer un filter, ejemplo de Electronics, se accede al estado global, se filtran desde all铆 y se obtiene, para no estar realizando constantes fetchs en los distintos labels de los productos

Eso es lo que pienso 馃槂

1. ```jsx import { createContext } from "react"; import PropTypes from "prop-types"; const ShoppingCartContext = createContext(); export const ShoppingCartProvider = ({ children }) => { return ( <ShoppingCartContext.Provider>{children}</ShoppingCartContext.Provider> ); }; ShoppingCartProvider.propTypes = { children: PropTypes.node.isRequired, }; ```error children is missing in props validation Esta advertencia se produce porque la `children`propiedad no est谩 definida ni validada expl铆citamente.
Yo estoy usando Typescript paa el proyecto y as铆 quedo el tipado de mi contexto. `import { ReactNode, createContext } from "react";` `import { Product } from "../models/Product";` `type ShoppingCartContextType = {` ` products: Product[];` `}` `const ShoppingCartContext = createContext<ShoppingCartContextType | null>(null);` `export const ShoppingCartProvider : React.FC<{children: ReactNode}> = ({children}) => {` ` return (` ` <ShoppingCartContext.Provider value={{` ` products: [],` ` }}>` ` {children}` ` </ShoppingCartContext.Provider>` ` );` `}` El *ShoppingCartContextType* representa al objeto que le vamos a pasar luego como *value* a nuestro Provider.
Se utiliza un estado global porque hay elementos como el carrito que interact煤an en toda la extensi贸n del proyecto, por tanto a medida que aumenta la complejidad del proyecto es necesario ofrecer elementos 煤tiles en toda la aplicaci贸n.
Quiz - Por que se va a dejar de usar Estados Locales y se van a Empezar a usar Estados Globales? * Para manejar datos de la aplicacion compartidos entre varios componentes * Para comunicar a componentes no relacionados
para evitar el props drilling y pasar props de padres a nietos sin intermediarios
![](https://static.platzi.com/media/user_upload/image-3c91e23f-0ab9-460c-8d66-ca92ee036de5.jpg) Alguien ech贸 a perder la api, le pusieron puros no romper please

Me gustan estas clases gr谩ficas donde la profesora se pone a explicar lo m谩s simple y con pizarra los conceptos que aprendemos 馃槂

La cosa es que yo tengo una carrito de compras que es un contador, es decir cada vez que un usuario agregue un producto o lo quite este carrito va a sumar o restar dependiendo del caso, el asunto es que el puede variar desde el Home si se agrega un articulo, o desde el componente My Orders si el usuario se arrepiente y borra el art铆culo, es por ello que mi carrito debe convertirse en un estado global porque puede recibir muchos requerimientos de componentes distintos como en este caso que mencion茅 se usaron los componentes Home y My Orders.

Hola... ahora necesitamos el estado global que lo maneja Context, para que los diferentes componentes puedan comunicarse: Navbar, Card, MyOrder... y que los eventos que sucedan en un pantalla puedan actualizarse en las demas vistas.
Vamos a usar un estado global para evitar un problema de las props drilling, y facilitar la comunicaci贸n de estados entre variso componentes
Estamos usando el context para evitar el prop drilling que es cuando los componentes ra铆z tienen que enviar info hasta las hojas y entre hojas se deben comunicar, haciendo dif铆cil el manejo de la info. Por eso ya todos se comunican a un elemento central.
Me desespera cuando dice"yeiii" 馃槕
![](https://static.platzi.com/media/user_upload/carbon%20%284%29-5368914a-1a76-431a-a931-aa0f0e8df6c3.jpg)
El estado global nos servir谩 **cuando** se requiere tener acceso a toda la data, funciones, desde cualquier parte de nuetra web, ahora, no quiere decir que lo usaremos en todos lados, se requerir谩, segun el contexto, determinar d贸nde ser谩 necesario implementarlo. En algunos casos necesitar谩s un contexto local local y en otros Global. **Y porqu茅 usar contexto global en vez de props?** Porque nos ayuda a comunicarnos de forma mas directa, sin requerir el uso de props en todos lo componentes intermedios (Padre-hijo, y sucesores....)

Usar el estado global permite que tengamos un c贸digo m谩s prolijo y con una comunicaci贸n m谩s eficiente entre componentes, sin necesidad de pasar props. Se evita el prop drilling.

Utilizaremos el estado Global, para compartir desde nuestro contexto todos los estados necesarios para para los componentes que se encuentran en nuestra aplicacion y asi pasar la informacion,
Usaremos un estado global que nos permitira obtener la informacion necesaria en los componentes y evitarno los "props drilling" y hacemos un codigo mas legible y facil de mantener

Siempre se debe usar el estado global para poder comunicar todos los componentes con este unico contexto y de esta manera evitar el Prop Drilling con la comunicacion de padre e hijo y asi sucesivamente

Usamos estado global para tener una 煤nica fuente de verdad a donde sin importar que componente sea pueda acceder a la informaci贸n de forma directa; con esto nos evitamos el uso de props para comunica informaci贸n entre componentes.

驴Por qu茅 usaremos un estado global?
Creo que utilizaremos un estado global en este proyecto porque siendo un e-commerce va a necesitar que los componentes se comuniquen eficientemente y que a la vez sea escalable en el futuro. Tambi茅n que pueda ser mantenido f谩cilmente.
.
Una analog铆a divertida para que se entienda el concepto es la siguiente:

imagina que est谩s dirigiendo un equipo de construcci贸n. En lugar de que cada trabajador tenga su propio conjunto de herramientas y materiales en cada piso, decides tener un almac茅n central donde todos pueden obtener lo que necesitan. Esto acelera el proceso de construcci贸n y asegura que todos tengan acceso a las mismas herramientas de manera eficiente

Usamos el estado global para comunicar la informaci贸n a todos los componentes.

Para tener acceso desde todo los componente a variables y constantes

A como lo entiendo,

el contexto local nos permite detectar las interacciones en un mismo componente y que dicho componente act煤e en consecuencia pero el contexto local es invisible para otros componentes.

el contexto global permite que cualquier componente pueda ver las interacciones donde se ha establecido el contexto global.

Y mi analog铆a ser铆a, el contexto local es todo lo que tienes almacenado en el disco duro de tu computadora y todo lo que haces en ella, el contexto global es como si estuvieras trabajando con muchas personas pero desde google drive!

B谩sicamente utilizaremos el estado global para facilitar la comunicaci贸n entre componentes evitando el prop drilling.

Usamos el Estado Global para tener asceso a nuestro componentes en cualquier parte de la App y asi no caer en la tediosa tarea de estar comunicando proops por doquier y caer en Proops Drilling.

Utilizamos un estado global, ya que necesitamos disponer de los elementos y el contador de productos mientras nos desplazamos a traves de nuestra aplicaci贸n, si lo dejamos en local solo las dispondremos en el home o tendr铆amos que pasarla por props a cada pagina donde la quisieramos tener.

Por qu茅 ya no vamos a utilizar un estado local si no vamos a utilizar un estado global?
Porque necesitamos que todos los componentes compartan informaci贸n entre ellos y no queden aislados. Adem谩s, es una forma de evitar pasar informaci贸n mediante propiedades entre componentes padres a hijos, debido a que cuando se tiene un gran cantidad de ellos se vuelve tedioso trabajarlos a esto tambi茅n se le conoce como 鈥減rops drilling鈥.

Usaremos un estado global ya que de esa manera, enviaremos la informaci贸n entre componentes del 谩rbol, y as铆 evitaremos el prop drilling . Tambi茅n har谩 que nuestro c贸digo sea m谩s legible.

La raz贸n es que nos permite comunicar informaci贸n entre componentes de manera m谩s eficiente y permite hacer m谩s escalable el proyecto. Por otro lado, podr铆amos usar props, pero ello genera que el proyecto sea m谩s complejo a la hora de comunicar la informaci贸n entre componentes y a medida que el proyecto crezca se har谩 m谩s confuso y tedioso.

Se utiliza el Contexto para no tener que estar pasado props entre elementos padre e hijo y solamente queda llamar la propiedad en el componente que se necesita

Necesitamos un estado global para compartir datos entre varios componentes en nuestra aplicaci贸n de React. En lugar de pasar los datos manualmente a trav茅s de m煤ltiples niveles de componentes como 鈥減rops鈥, el estado global permite que los componentes accedan a los datos directamente desde el contexto sin necesidad de pasarlos expl铆citamente.

Podemos usar un contexto en React para que nuestra API viva alli, y se pueda usar en todas las paginas sin necesidad de hacer varios reaquest (tocaria hacer varios request si nuestra API viviera en lo local). Asi usamos una sola fuente de almacenamiento.

Con estado global el usuario va a poder hacer muchas solicitudes en diferentes componentes de forma de que te manda la informaci贸n centralizada y va a escuchar todos los componentes de forma din谩mica y mas efectiva de manera local es demasiado complicado y no es lo mismo como lo que dice el ejemplo del banco

Respuesta del quiz = Vamos a usar un estado global para poder consumirlo desde distintos componentes

B谩sicamente, Context provee una forma de pasar datos a trav茅s del 谩rbol de componentes sin tener que pasar props manualmente en cada nivel.

Porque usar el estado global?
Nuestro proyecto no solo requiere que tengamos informacion aislada en un estado local en cada componente, sino que compartiremos informacion en los distintos componentes que estamos creando. Ademas de tener una fuente unida de verdad para administrar la informacion a todos los componentes

Un contexto global nos permite acceder desde cualquier parte de nuestra aplicacion

Usaremos un estado global para que todos los componentes est茅n comunicados entre s铆 y tengan acceso a todas las props, estados, etc.