Cuando construyes un e-commerce en React, llega un momento en que los componentes necesitan hablar entre sí: el nav bar, las cards, el carrito de compras. Ahí entra Context en React, la herramienta que te permite crear un estado global y centralizar la fuente de verdad de toda tu aplicación.

Por qué el estado local ya no alcanza en un e-commerce

En la clase anterior creamos un estado local dentro de la página home para almacenar productos. Funcionó perfecto porque toda la información vivía en un mismo lugar y nutría a las cards sin necesidad de comunicarse con nadie más.

Pero ahora el escenario cambia. Imagina tu e-commerce: en la esquina superior derecha del nav bar tienes un carrito de compras que actúa como contador. Su valor inicial es cero y debe incrementar a uno, dos, tres, según el usuario haga clic en el ícono + de cada card.

Y aquí viene el detalle: la card vive en home, pero el carrito vive en el nav bar. Son dos componentes en lugares distintos del árbol que necesitan comunicarse.

¿Qué es un estado local en React? Es una caja de información que vive dentro de un solo componente. Sirve cuando no necesitas compartir esos datos con otras partes de tu aplicación.

Cómo funciona Context como fuente de verdad global

Context te permite sacar esa cajita de información del componente y ponerla por encima de todos. En lugar de vivir en home, el estado global observa a todos los componentes desde afuera, recibe sus solicitudes y les manda información de vuelta.

Piensa en un banco. Llega una persona pidiendo un crédito, llega una empresa pidiendo pagar a sus empleados, llega un trabajador reclamando su salario. El banco recibe todos esos requests, los procesa de forma centralizada y responde a cada uno según su necesidad. Ese banco es tu estado global.

En tu e-commerce pasa lo mismo: las cards envían el request de "agrega este producto", el carrito pide "dime cuántos productos hay", y el estado global responde a cada componente desde un solo lugar.

¿Qué es Context en React? Es una API que crea un estado global accesible desde cualquier componente, sin tener que pasar props manualmente nivel por nivel.

Cómo crear un Context Provider paso a paso

Podrías escribir el contexto directamente en App.jsx, pero lo más limpio es separarlo en su propio archivo. Dentro de src crea una carpeta llamada context y dentro un archivo index.jsx.

Importar createContext y crear el contexto

Lo primero es traer createContext desde React:

jsx import { createContext } from 'react'

export const ShoppingCartContext = createContext()

Le puedes poner el nombre que quieras. Como vamos a manejar un carrito de compras, ShoppingCartContext describe bien lo que hace.

Construir el Provider que envuelve la aplicación

El contexto por sí solo no comparte nada. Necesita un provider que actúe como wrapper alrededor de los componentes que van a consumir esa información. Funciona parecido al layout que ya creamos en clases anteriores, recibiendo children:

jsx export const ShoppingCartProvider = ({ children }) => { return ( <ShoppingCartContext.Provider> {children} </ShoppingCartContext.Provider> ) }

Este componente recibe los hijos y los envuelve con el provider del contexto, dejando todo listo para inyectar estados globales más adelante.

Envolver la aplicación en App.jsx

Ahora ve a App.jsx e importa el provider:

jsx import { ShoppingCartProvider } from './context'

Envuelve el Router y todo el contenido de tu aplicación dentro del provider:

jsx <ShoppingCartProvider> {/* Router y demás componentes */} </ShoppingCartProvider>

Con esto, cualquier componente dentro de App puede acceder al estado global cuando lo necesite.

¿Para qué sirve el Provider en Context? Es el componente que envuelve la aplicación y reparte la información del contexto a todos los hijos que estén dentro de él.

Qué sigue después de configurar el contexto

Por ahora dejamos el provider vacío de estados, pero la estructura ya está montada. En las siguientes clases empezarás a crear estados dentro del ShoppingCartProvider para conectar el botón + de cada card con el contador del carrito en el nav bar.

La idea de fondo es simple: cada componente dejará de cargar con su propia versión de la información y todos consultarán al mismo banco central.

Quiz rápido: ¿por qué dejamos de usar un estado local y migramos a un estado global? Cuéntame tu respuesta en los comentarios.