Crear un contexto en React es fundamental para establecer una comunicación efectiva entre los componentes de tu aplicación. Este contexto es una forma de mandar datos, funciones y valores entre componentes sin tener que pasar por todo el árbol de componentes. Por ello, en este post, te enseñaremos a crear un contexto en React.
¿Cómo crear un contexto en React?
Para crear un contexto en React lo primero que debemos definir es qué dato queremos compartir con los distintos datos de nuestra aplicación. En nuestro caso, queremos compartir el estado isLogged que hemos creado en nuestro post sobre controlar estado login en React. Este estado define si el usuario ha iniciado sesión o no. Entonces, es perfecto para usar con el contexto, pues impacta en el sentido de toda nuestra aplicación. Por ende, debe tener un alcance global.
Ya que este contexto tiene el propósito de autenticar a nuestro usuario, lo guardaremos en un archivo dentro de nuestra carpeta auth (dentro de la carpeta components). Nosotros llamaremos a este archivo context.js.
Ahora que tenemos nuestro archivo, podemos crear un contexto en React. Para ello, declaramos una variable y le damos un valor con el comando createContext. Para usar este comando, deberás importarlo en tu archivo. Entonces, las líneas de código serán las siguientes:
import {createContext} from ‘react’;
const AuthContext = createContext ( )
Para crear un contexto en React también debemos inicializarlo. Para ello, basta con insertar los paréntesis. No hace falta que le demos un valor inicial, pues esto no tiene un valor a efectos prácticos en nuestra aplicación. Normalmente, cuando decidimos pasar el valor defaultValue es para hacer tests en los que queremos conectar componentes a un contexto, pero no tenemos un valor que pasar todavía. Esto nos ahorra tener que crear un provider en el testing.
¿Qué significa crear un contexto en React?
Para saber qué significa realmente crear un contexto en React, te recomendamos pintarlo en pantalla e inspeccionarlo con la herramienta inspector de tu navegador. Para ello, deberemos usar el comando console.log y exportar nuestra variable:
console.log(AuthContext);
export default AuthContext
Después de exportar, debemos importar la variable dentro del componente que se renderiza en pantalla. En nuestro caso, insertaremos la siguiente línea de código en el componente App.js:
import AuthContext from ‘./components/auth/context’;
Ahora, verás el contexto que acabamos de crear en tu inspector. Allí verás un objeto con una propiedad $$typeof. Sin embargo, lo que nos interesa son los componentes consumer y provider, especialmente este último. Como verás, el provider no es más que un componente de React con determinadas props.
Ya que sabemos qué contiene un contexto en React, podemos utilizar sus componentes de manera individual. Para ello, exportaremos el componente consumer y el componente provider dentro de nuestro context.js. Esto nos permitirá usarlos directamente en nuestro código, sin tener que acceder a ellos desde el contexto. Esto, además, nos permitirá darle a cada componente el nombre que queramos. En nuestro caso, le damos un nombre que describa su rol como autenticador:
export const AuthContextProvider = AuthContext.Provider
export const AuthContextConsumer = AuthContext.Consumer
Con las líneas anteriores, hemos logrado crear un contexto en React y separar sus componentes consumer y provider en variables que podemos utilizar a lo largo de nuestro código. Ahora, bastará con importar estas variables en nuestros distintos módulos para poder usarlas.
Otra forma de asegurarnos de que el contexto que hemos creado sea útil para toda nuestra aplicación es envolver la navegación en este contexto. Esto hará que todas las páginas que tenemos en nuestro proyecto tengan acceso a los valores que hemos guardado en el contexto. Esto es ideal cuando disponemos de un valor que queremos tener a nivel global.
Entonces, deberemos envolver todas nuestras rutas con el AuthContextProvider. A este provider le podemos pasar una propiedad value con las variables y funciones que queremos esparcir por nuestro proyecto.
<AuthContextProvider value= {{isLogged, handleLogin, handleLogout}}>
Ahora que tenemos la primera parte de nuestro contexto, faltará conectar los distintos componentes al provider. Para ello, podemos usar el useContext en React o el ContextConsumer en React.
¿Cuál es el siguiente paso?
Ahora que sabes cómo crear un contexto en React y separar sus componentes, ¡es el momento de utilizarlo en tus propios proyectos! KeepCoding también te acompaña en este proceso. Por ello, si quieres aprender a desarrollar todo tipo de proyectos de programación para la web, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp. En este programa de formación intensiva aprenderás a desarrollar con herramientas y lenguajes como JavaScript, HTML, CSS y JSX. ¿Aqué esperas para dar el paso que te cambiará la vida? ¡Te esperamos!
