API Context en React: ¬ŅC√≥mo comunicar componentes mediante API Context en React.js?

Inicio‚Äļreact js‚ÄļAPI Context
API Context en React: ¬ŅC√≥mo comunicar componentes mediante API Context en React.js?

by Juan Carlos García

3-Mzo-2023

(3)

Suscribirme al canal:

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 ūüßź!

React JS

React JS

React.js: El mejor curso gratuito de React.js desde cero.

¬ŅQue es React JSX?

¬ŅQue es React JSX?

Gu√≠a para principiantes de React JSX: ¬ŅQu√© es React JSX? Introducci√≥n a React JSX

Componentes y propiedades

Componentes y propiedades

Components and Props React.js, Manejo de propiedades y componentes en React

State y Ciclo de vida en React

State y Ciclo de vida en React

State And Lifecycle: Comprendiendo el State y Ciclo de vida de los componentes en React.js

Refs React

Refs React

¬ŅQu√© son las React Refs y para que sirven? Uso de las Refs y manejo del DOM en React.js

Listas y condiciones en React

Listas y condiciones en React

Keys and List: ¬ŅC√≥mo manejar las listas y condicionales en React JS?

Formularios en React

Formularios en React

Formularios en React: ¬ŅC√≥mo manejar los formularios en React.js con input controlados y no controlados?

React develepor tools

React develepor tools

React Developer Tools: ¬ŅC√≥mo analizar el comportamiento y estado de nuestros componentes en React.js?

API Context

API Context

API Context en React: ¬ŅC√≥mo comunicar componentes mediante API Context en React.js?

Higher Order Component

Higher Order Component

HOC en React.js: ¬ŅC√≥mo utilizar los High Order Component (HOC) ?

Children en React JS

Children en React JS

Children en React.js: Manejo avanzado de Children en React.js, composición de componentes.

PropTypes en React

PropTypes en React

PropType en React.js: ¬ŅC√≥mo validar datos a trav√©s de PropType en React.js?

Hooks en React JS

Hooks en React JS

Master de Hooks en React JS: ¬ŅQu√© es un Hook en React.js? Tipos, funcionamiento y caracter√≠sticas.

Hook useState

Hook useState

useState: ¬ŅC√≥mo utilizar el Hook useState en React.js?

Hook useEffect

Hook useEffect

Hook useEffect: ¬ŅQu√© es el Hook useEffect? ¬ŅC√≥mo utilizarlo correctamente y qu√© reglas seguir?

Hook useContext

Hook useContext

¬ŅC√≥mo utilizar el Hook useContext? Comunicaci√≥n de componentes funcionales

Hook useReducer

Hook useReducer

¬ŅC√≥mo utilizar el Hook useReducer en React.js?

React memo

React memo

Memorizar componentes a través de React.memo en React.js

Hook useCallback

Hook useCallback

Utilizando los Hooks useCallback y useMemo en React.js

ūüßź Autoevaluaci√≥n: API Context

¬ŅQu√© es Context en React?

¬ŅCu√°ndo utilizar API Context?

¬ŅReact.createContext nos permite crear?

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

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.

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:

Interfaz de usuario del ejemplo que usaremos para API Context

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:

 

  1. Lo primero que tenemos que hacer es declarar nuestro provider.
//DECLARACI√ďN
const {Provider, Consumer} = React.createContext();

 

  1. 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>
    )
  }
}

 

  1. 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
}

 

  1. 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>
  )
}

 

  1. 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>

 

  1. 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.

ūüßź Autoevaluaci√≥n: API Context

¬ŅQu√© es Context en React?

¬ŅCu√°ndo utilizar API Context?

¬ŅReact.createContext nos permite crear?

Juan Carlos

Juan Carlos García

Desarrollador de software / SEO

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.

EWebik

Dise√Īo de p√°ginas web y aplicaciones moviles.

© 2023 EWebik