La creación de un contexto en React es el primer paso para utilizar el Context API. Un contexto es creado mediante la función React.createContext y es fundamental para compartir datos de manera eficiente en componentes que no están directamente relacionados.

Pasos para Crear un Contexto

1. Importar React y createContext
2. Crear un Contexto
3. Proveer el Contexto
4. Consumir el Contexto

1. Importar React y createContext

Primero, necesitamos importar React y la función createContext desde la biblioteca de React.

jsx

2. Crear un Contexto

Utilizamos createContext para crear un nuevo contexto. Esta función devuelve un objeto con dos componentes: Provider y Consumer.

jsx

En este ejemplo, MyContext es ahora un contexto que puede ser usado en nuestra aplicación.

3. Proveer el Contexto

Para que el contexto esté disponible en el árbol de componentes, necesitamos envolver los componentes donde queremos que el contexto sea accesible con el componente Provider del contexto.

jsx

Aquí estamos proporcionando el valor user al contexto MyContext, lo que hace que cualquier componente dentro de MyContext.Provider pueda acceder a este valor.

4. Consumir el Contexto

Para acceder a los datos del contexto, usamos el componente Consumer proporcionado por el contexto.

jsx

En este ejemplo, UserProfile consume el valor del contexto y lo utiliza para renderizar información del usuario.

Ejemplo Completo

Juntando todos los pasos, aquí tienes un ejemplo completo de creación y uso de un contexto en React.

jsx

Uso con useContext Hook

A partir de React 16.8, también puedes utilizar el Hook useContext para consumir el contexto de una manera más sencilla.

jsx

El Hook useContext simplifica el código necesario para consumir el contexto, haciéndolo más limpio y fácil de leer.

Conclusión

Crear un contexto en React es un proceso sencillo que puede mejorar significativamente la forma en la que compartimos datos entre componentes. Al entender el proceso de creación y utilización de un contexto, podemos construir aplicaciones más eficientes y fáciles de mantener. En el próximo capítulo, profundizaremos en el componente Provider del contexto.