El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

API de Contexto

Siguiente ►
►

La API de Contexto en React es una herramienta poderosa que permite compartir datos entre componentes sin necesidad de pasar props manualmente a través de cada nivel del árbol de componentes. Esto es especialmente útil en aplicaciones grandes donde ciertos datos necesitan ser accesibles por muchos componentes en diferentes niveles de la jerarquía.

¿Qué es la API de Contexto?

La API de Contexto proporciona una forma de pasar datos a través del árbol de componentes sin tener que pasar props manualmente en cada nivel. Esto es útil para datos globales como el tema de la aplicación, el usuario autenticado, la configuración de la aplicación, etc.

Conceptos Clave

  1. Contexto: Un objeto que contiene los datos que se desean compartir.
  2. Provider: Un componente que envuelve a otros componentes y proporciona el contexto.
  3. Consumer: Un componente que consume el contexto.

Creando un Contexto

Para crear un contexto, se utiliza la función React.createContext. Esta función devuelve un objeto con dos propiedades: Provider y Consumer.

import React from 'react';

// Crear un contexto con un valor predeterminado
const MyContext = React.createContext('valor predeterminado');

Proveedor de Contexto (Provider)

El Provider es un componente que envuelve a otros componentes y les proporciona el contexto. El Provider acepta una prop value que se pasará a los componentes descendientes.

import React from 'react';
import { MyContext } from './MyContext';

const MyProvider = ({ children }) => {
  const value = 'Hola desde el contexto';

  return (
    <MyContext.Provider value={value}>
      {children}
    </MyContext.Provider>
  );
};

export default MyProvider;

Consumidor de Contexto (Consumer)

El Consumer es un componente que consume el contexto. Utiliza una función como hijo para acceder al valor del contexto.

import React from 'react';
import { MyContext } from './MyContext';

const MyComponent = () => {
  return (
    <MyContext.Consumer>
      {value => <div>{value}</div>}
    </MyContext.Consumer>
  );
};

export default MyComponent;

Uso de useContext Hook

En React 16.8 y versiones posteriores, se puede utilizar el hook useContext para consumir el contexto de una manera más sencilla.

import React, { useContext } from 'react';
import { MyContext } from './MyContext';

const MyComponent = () => {
  const value = useContext(MyContext);

  return <div>{value}</div>;
};

export default MyComponent;

Ejemplo Completo

A continuación, se muestra un ejemplo completo que ilustra cómo crear y usar un contexto en una aplicación React Native.

Crear el Contexto

// MyContext.js
import React from 'react';

const MyContext = React.createContext('valor predeterminado');

export default MyContext;

Proveedor de Contexto

// MyProvider.js
import React from 'react';
import MyContext from './MyContext';

const MyProvider = ({ children }) => {
  const value = 'Hola desde el contexto';

  return (
    <MyContext.Provider value={value}>
      {children}
    </MyContext.Provider>
  );
};

export default MyProvider;

Consumidor de Contexto

// MyComponent.js
import React, { useContext } from 'react';
import MyContext from './MyContext';

const MyComponent = () => {
  const value = useContext(MyContext);

  return <div>{value}</div>;
};

export default MyComponent;

Integración en la Aplicación

// App.js
import React from 'react';
import { View, Text } from 'react-native';
import MyProvider from './MyProvider';
import MyComponent from './MyComponent';

const App = () => {
  return (
    <MyProvider>
      <View>
        <Text>Aplicación con Contexto</Text>
        <MyComponent />
      </View>
    </MyProvider>
  );
};

export default App;

Ejercicio Práctico

Ejercicio

  1. Crea un contexto para manejar el tema de la aplicación (claro/oscuro).
  2. Crea un Provider que permita cambiar el tema.
  3. Crea un componente que consuma el contexto y muestre el tema actual.
  4. Crea un botón que permita alternar entre los temas claro y oscuro.

Solución

Crear el Contexto

// ThemeContext.js
import React from 'react';

const ThemeContext = React.createContext();

export default ThemeContext;

Proveedor de Contexto

// ThemeProvider.js
import React, { useState } from 'react';
import ThemeContext from './ThemeContext';

const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme(prevTheme => (prevTheme === 'light' ? 'dark' : 'light'));
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

export default ThemeProvider;

Consumidor de Contexto

// ThemeComponent.js
import React, { useContext } from 'react';
import { View, Text, Button } from 'react-native';
import ThemeContext from './ThemeContext';

const ThemeComponent = () => {
  const { theme, toggleTheme } = useContext(ThemeContext);

  return (
    <View>
      <Text>El tema actual es: {theme}</Text>
      <Button title="Cambiar Tema" onPress={toggleTheme} />
    </View>
  );
};

export default ThemeComponent;

Integración en la Aplicación

// App.js
import React from 'react';
import { View, Text } from 'react-native';
import ThemeProvider from './ThemeProvider';
import ThemeComponent from './ThemeComponent';

const App = () => {
  return (
    <ThemeProvider>
      <View>
        <Text>Aplicación con Tema</Text>
        <ThemeComponent />
      </View>
    </ThemeProvider>
  );
};

export default App;

Conclusión

La API de Contexto es una herramienta poderosa para manejar datos globales en una aplicación React Native. Permite compartir datos entre componentes sin necesidad de pasar props manualmente a través de cada nivel del árbol de componentes. Con la introducción de hooks como useContext, el uso de la API de Contexto se ha vuelto aún más sencillo y directo. En el próximo módulo, exploraremos los hooks en React Native y cómo pueden mejorar la funcionalidad y la legibilidad de tu código.

◄ Anterior
◄
Siguiente ►
►
El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados