API Context en React: ¿Cómo comunicar componentes mediante API Context en React.js?
Hola de nuevo viajero, hoy en nuestro curso de React JS desde cero, veremos uno de los temas que suele complicarnos la vida cuando iniciamos en esto de React, me refiero a la comunicación entre componentes, por lo que, en esta ocasión aprenderás como hacer esto a través de API Context y comprobarás que es relativamente sencillo.
- Durante el desarrollo utilizaremos React Developer Tools el cual es el tema del capítulo anterior, te invito a que lo revises para que entiendas a la perfección esta clase.
Bien, espero que te guste y que te suscribas a mi canal de YouTube para brindarme apoyo, con ello, podré subir cada vez más vídeos y cursos gratuitos.
¡No te puedes perder las nuevas clases 🧐!
Suscribirme
by Juan Carlos García
3-Mzo-2023
(3)
Suscribirme al canal:
Tabla de contenido
- 1 Hoy aprenderás API Context y:
- 2 ¿Qué es Context en React?
- 3 Funcionamiento de Context
- 4 ¿Cuándo deberías usar Context?
- 5 Ventajas de utilizar Context
- 6 Desventajas de utilizar Context
- 7 API Context
- 8 React.createContext
- 9 Context.Provider
- 10 Context.Consumer
- 11 Declaración de Context
- 12 Ejemplo: Creando una aplicación utilizando API Context
- 13 Pasos para implementar API Context
- 14 Código CSS de los componentes
Hoy aprenderás API Context y:
- Verás como comunicar componentes de padre a hijo, y de hermano a hermano, es una estructura común y que estoy seguro la tendrás en tu proyecto, si o si.
- Identificar de que componente viene un dato.
- Como se propaga la información entre tus componentes.
- Verás en acción las tools de React.
Repositorio
- Puedes descargar el código que se encuentra en la rama api-context
- O simplemente puedes clonar el repositorio y posicionarte en la rama api-context
git clone https://github.com/EWebik/react-js.git
git checkout api-context
¿Qué es Context en React?
Context es una forma de comunicación del árbol de componentes en React, ya que, nos evita pasar propiedades (props) de forma manual por cada nivel de componentes que tenga nuestro árbol.
Funcionamiento de Context
Recordemos que por lo regular en una aplicación hecha en React los datos se propagan de los componentes padres a los hijos a través de las pops.
Si bien, podemos hacer aplicaciones grandes utilizando este método de propagación de datos, llegará el momento en que el código se volverá muy complicado de leer y sobre todo de mantener, ya que, esta propagación se realiza por cada nivel.
El funcionamiento de Context permite realizar una propagación de datos entre componentes sin que de forma explicita tengamos que asignar propiedades a los componentes por cada nivel.
Lo anterior nos permite crear aplicaciones escalables, sin alterar el hecho de que la información fluye de componentes padres a hijos.
¿Cuándo deberías usar Context?
Esto realmente varía dependiendo del tipo de aplicación que deseas desarrollar, no obstante, si requieres:
- Comunicar una gran cantidad de componentes.
- Comunicar componentes hermanos.
- Si existen componentes intermedios que no requieren hacer uso implícito de propiedades.
- Etc.
Ventajas de utilizar Context
- Puedes comunicar una gran cantidad de componentes que se encuentran en diferentes niveles.
- Aislamiento de componentes.
- Código mas legible.
- Concentración de actualización de datos
Desventajas de utilizar Context
- Utilizar Context puede limitar la reutilización de componentes.
Excelente, en este punto ya tienes bastante información de este concepto, ahora pasemos a ver como aplicarlo.
API Context
React libero desde la versión 16 una forma de propagación de datos a través de la utilización del Conext, no obstante, ahora se tiene una versión antigua y la versión que se recomienda utilizar.
En este post, solo veremos la nueva versión y la que actualmente recomienda la documentación oficial de React, al momento de la publicación de este post.
React.createContext
Bien, la API Context, provee un método que nos permite utilizar ciertos componentes que nos ayudan a la propagación de información.
Con React.createContext creamos un objeto que nos permite definir un:
- Provider
- y un Consumer
Context.Provider
Cuando definimos Context, este viene con un componente Provider, y todo componente que se suscriba a el, podrá acceder a su contexto.
Características de Context.Provider
- Acepta una propiedad de nombre value, la cual sera propagada a todos los componentes consumidores o suscritos a el.
- Puede o no estar conectado a muchos componentes denominados consumidores.
- Puede existir anidación, con la intención de sobreescribir valores de los niveles más bajos del árbol de componentes.
- Los componentes suscritos son capaces de detectar cuando hay un cambio en el contexto y actualizan la DOM.
Context.Consumer
Es un componente de React que se suscribe a un componente Provider con la intención de detectar cambios dentro de sus contexto.
Características de Context.Consumer
- Requiere de una función como hijo principal.
- Dicha función es capaz de recibir el valor del contexto actual, y retorna un elemento, o mejor dicho, un nodo de React.
- El valor recibido es igual a la propiedad value del Provider al que este suscrito, es decir, el mas cercano, ya que recuerda que React soporta anidación de Provider.
Suscribirme
Gracias por tu calificación
(3)
Categorías
Declaración de Context
Podemos declarar un Context a través de:
const Context = React.createContext(objDefault);
createContext, es capaz de recibir un valor por default, el cual será asignado a los consumidores cuando en el Provider no exista un contexto.
Y por destructuración podemos, obtener directamente el Provider y el Consumer.
const {Provider, Consumer} = React.createContext();
Ejemplo: Creando una aplicación utilizando API Context
Bien, ahora es momento de hacer un ejemplo, recuerda que la explicación y el paso a paso esta en el vídeo. Aquí te voy a explicar los pasos a grandes rasgos de como implementar el API Context.
Para ejemplificar, vamos a crear un pequeño chat donde todos los componentes se van a enterar de lo que dicen los otros, es decir:
- Cada componente tendrá un input textarea que permitirá introducir texto y lo propagaremos a cada uno de los componentes del árbol, tanto padres como hijos.
- En cada componente mostraremos el texto que se introduce y distinguiremos, a través, del cambio de color y texto, indicando de que componente se escribió dicho texto o mensaje.
Quizá suena algo complejo, es por ello que te recomiendo ver el vídeo, no obstante, la interfaz de usuario es la siguiente:

Como puedes ver en la imagen cuando escribes algo en algún componente, todos los componentes dentro del árbol se enteran, es decir, los datos se propagan tal y como indica React.
Pasos para implementar API Context
Bien, veamos como desarrollar la aplicación propuesta:
- Lo primero que tenemos que hacer es declarar nuestro provider.
//DECLARACIÓN
const {Provider, Consumer} = React.createContext();
- Ahora tenemos que envolver con nuestro componente Provider, el árbol de componentes que deseamos comunicar.
class Padre extends React.Component{
constructor(props){
super(props)
this.state={
mensaje:"",
index:0
}
}
actualizarMensaje = (e, index)=>{
const {value} = e.target;
this.setState({
...this.state,
mensaje:value,
index
})
}
render(){
return(
<Provider value={{
mensaje: this.state.mensaje,
index: this.state.index,
actualizarMensaje:this.actualizarMensaje
}}>
<div className="padre">
<h1>EWebik - API Context</h1>
{
this.state.mensaje !== "" ?(
<p className={
this.state.index === 0 ? 'colorPadre':
this.state.index === 1 ? 'colorHijo1':
this.state.index === 2 ? 'colorHijo2':''
}>{
((this.state.index === 0 ? 'Padre dice:':
this.state.index === 1 ? 'Hijo 1 dice:':
this.state.index === 2 ? 'Hijo 2 dice:':'')
+ ' ' + this.state.mensaje)
}</p>
):("")
}
<textarea
rows="5"
onChange={(e)=>{
this.actualizarMensaje(e,0);
}} />
<div className="hijos">
<Hijo1 />
<Hijo2 />
</div>
</div>
</Provider>
)
}
}
Suscribirme
Gracias por tu calificación
(3)
Categorías
- Definimos el objeto o valor de la propiedad value del Provider, que en este ejemplo lo declaramos como un JSON.
{
mensaje: this.state.mensaje,
index: this.state.index,
actualizarMensaje:this.actualizarMensaje
}
- Declarando nuestros componentes consumidores o Consumer. En este ejemplo necesitamos dos Hijo 1 e Hijo 2.
const Hijo1 = (props)=>{
return(
<Consumer>
{
({mensaje, index, actualizarMensaje}) =>(
<div className="hijo">
<h2>Hijo 1</h2>
{
mensaje !== "" ?(
<p className={
index === 0 ? 'colorPadre':
index === 1 ? 'colorHijo1':
index === 2 ? 'colorHijo2':''
}>{
((index === 0 ? 'Padre dice:':
index === 1 ? 'Hijo 1 dice:':
index === 2 ? 'Hijo 2 dice:':'')
+ ' ' + mensaje)
}</p>
):("")
}
<textarea
rows="5"
onChange={(e)=>{
actualizarMensaje(e,1);
}} />
</div>
)
}
</Consumer>
)
}
const Hijo2 = (props)=>{
return(
<Consumer>
{
({mensaje, index, actualizarMensaje}) =>(
<div className="hijo">
<h2>Hijo 2</h2>
{
mensaje !== "" ?(
<p className={
index === 0 ? 'colorPadre':
index === 1 ? 'colorHijo1':
index === 2 ? 'colorHijo2':''
}>{
((index === 0 ? 'Padre dice:':
index === 1 ? 'Hijo 1 dice:':
index === 2 ? 'Hijo 2 dice:':'')
+ ' ' + mensaje)
}</p>
):("")
}
<textarea
rows="5"
onChange={(e)=>{
actualizarMensaje(e,2);
}} />
</div>
)
}
</Consumer>
)
}
- Bien, en este punto ya debería funcionar tu aplicación, solo recuerda que los consumidores requieren de una función que recibe el valor del contexto del Provider más cercano, en este caso solo tenemos uno, pero igual aplica. Para este ejemplo recibe los datos: mensaje, index y actualizarMensaje.
<Consumer>
{
({mensaje, index, actualizarMensaje}) =>(
...
)
}
</Consumer>
- Excelente, en este punto me gustaría resaltar el uso de actualizarMensaje:
- este método se declara en el componente Padre y se propaga a través del contexto a todos los hijos
- Esto es útil, ya que todos los hijos pueden ejecutar este método, que actualizará el state del padre
- Con lo cual, actualizara la propiedad value del Provider, modificando el contexto recibido en cada consumidor, permitiendo que estos actualicen la DOM.
actualizarMensaje = (e, index)=>{
const {value} = e.target;
this.setState({
...this.state,
mensaje:value,
index
})
}
Código CSS de los componentes
Te dejo el archivo CSS para que te quede la interfaz igual a la foto del ejemplo.
.padre{
position: relative;
text-align: center;
border: 1px solid #111;
padding: 5px;
}
.hijos{
margin: 20px 0px;
display: flex;
justify-content: space-around;
align-items: center;
}
.hijo{
text-align: center;
border: 1px solid #111;
padding: 5px;
margin: 0px 10px;
width: 90%;
}
.padre textarea,
.hijo textarea{
width: 90%;
}
.colorPadre{
color: blue;
font-weight: bold;
}
.colorHijo1{
color: red;
font-weight: bold;
}
.colorHijo2{
color: green;
font-weight: bold;
}
Excelente, ya has terminado de crear tu aplicación donde comunicas componentes a través de la API Context, si sientes que se mira complicado, puedes descargar el código y verlo en acción, seguramente así te quedará más claro.
Bueno, espero te haya gustado, que hayas aprendido mucho y que me haya ganado un suscriptor, nos vemos en el próximo post.
Suscribirme
Gracias por tu calificación
(3)
Categorías
🧐 Autoevaluación: API Context
¿Qué es Context en React?
¿Cuándo utilizar API Context?
¿React.createContext nos permite crear?
Juan Carlos García
Desarrollador de software
Durante años he desarrollado plataformas dedicadas al rastreo satelital y varios sitios web que se encuentran en la primera página de Google, y hoy quiero compartir contigo lo que se en tecnologías como: Node JS, PHP, C# y Bases de datos.
Si quieres apoyarme sígueme en mis redes sociales y suscríbete a mi canal de YouTube.