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.

Juan Carlos García
by Juan Carlos García24-Ag-20223

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.

Suscribirme

Gracias por tu calificación:

3

Categorías


  • EWebik
  • React JS
  • SQL
  • Base de datos
  • PHP - MySQL
  • P√°gina Web
  • Servidores
  • Flexbox
  • NodeJS
  • WordPress
  • POO

ūü•á Creaci√≥n de p√°ginas web

‚ö°ÔłŹ Quiero mi p√°gina web ūüí™ūüŹľ

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

 

Suscribirme

Gracias por tu calificación:

3

Categorías


  • EWebik
  • React JS
  • SQL
  • Base de datos
  • PHP - MySQL
  • P√°gina Web
  • Servidores
  • Flexbox
  • NodeJS
  • WordPress
  • POO

ūü•á Creaci√≥n de p√°ginas web

‚ö°ÔłŹ Quiero mi p√°gina web ūüí™ūüŹľ
  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.

Suscribirme

Gracias por tu calificación:

3

Categorías


  • EWebik
  • React JS
  • SQL
  • Base de datos
  • PHP - MySQL
  • P√°gina Web
  • Servidores
  • Flexbox
  • NodeJS
  • WordPress
  • POO

ūü•á Creaci√≥n de p√°ginas web

‚ö°ÔłŹ Quiero mi p√°gina web ūüí™ūüŹľ

ūüßź Autoevaluaci√≥n: API Context

1 ¬ŅQu√© es Context en React?

2 ¬ŅCu√°ndo utilizar API Context?

3 ¬ŅReact.createContext nos permite crear?

Juan Carlos García

Juan Carlos García

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.

Desarrollador de software

© 2022 EWebik

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