El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

API de context

Següent ►
►

Introducció

La API de context de React és una eina poderosa que permet compartir dades entre components sense haver de passar explícitament les props a través de cada nivell de l'arbre de components. Això és especialment útil per a dades globals com l'usuari autenticat, el tema de l'aplicació, o la configuració de la llengua.

Conceptes clau

  • Context: Un objecte que permet compartir dades entre components sense haver de passar props manualment a cada nivell.
  • Provider: Un component que proporciona el context als seus fills.
  • Consumer: Un component que consumeix el context proporcionat pel Provider.

Creació d'un Context

Per crear un context, utilitzem la funció createContext de React. Aquí teniu un exemple bàsic:

import React, { createContext } from 'react';

// Creem el context
const MyContext = createContext();

// Exportem el context per utilitzar-lo en altres components
export default MyContext;

Utilització del Provider

El Provider és un component que permet als components fills accedir al context. Aquí teniu un exemple de com utilitzar el Provider:

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

const MyProvider = ({ children }) => {
  const [value, setValue] = useState('Hola, món!');

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

export default MyProvider;

Consumir el Context

Per consumir el context, podem utilitzar el hook useContext o el component Consumer. Aquí teniu exemples de les dues maneres:

Utilitzant el hook useContext

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

const MyComponent = () => {
  const { value, setValue } = useContext(MyContext);

  return (
    <div>
      <p>{value}</p>
      <button onClick={() => setValue('Hola, React!')}>Canviar valor</button>
    </div>
  );
};

export default MyComponent;

Utilitzant el component Consumer

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

const MyComponent = () => {
  return (
    <MyContext.Consumer>
      {({ value, setValue }) => (
        <div>
          <p>{value}</p>
          <button onClick={() => setValue('Hola, React!')}>Canviar valor</button>
        </div>
      )}
    </MyContext.Consumer>
  );
};

export default MyComponent;

Exemple complet

Aquí teniu un exemple complet que mostra com crear un context, utilitzar un provider i consumir el context en un component:

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

const MyContext = createContext();

export default MyContext;

// MyProvider.js
import React, { useState } from 'react';
import MyContext from './MyContext';

const MyProvider = ({ children }) => {
  const [value, setValue] = useState('Hola, món!');

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

export default MyProvider;

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

const MyComponent = () => {
  const { value, setValue } = useContext(MyContext);

  return (
    <div>
      <p>{value}</p>
      <button onClick={() => setValue('Hola, React!')}>Canviar valor</button>
    </div>
  );
};

export default MyComponent;

// App.js
import React from 'react';
import MyProvider from './MyProvider';
import MyComponent from './MyComponent';

const App = () => {
  return (
    <MyProvider>
      <MyComponent />
    </MyProvider>
  );
};

export default App;

Exercicis pràctics

Exercici 1: Crear un context per a un tema

  1. Crea un context per gestionar el tema de l'aplicació (clar o fosc).
  2. Crea un provider que permeti canviar el tema.
  3. Crea un component que mostri el tema actual i un botó per canviar-lo.

Solució

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

const ThemeContext = createContext();

export 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 ThemeContext;

// ThemeComponent.js
import React, { useContext } from 'react';
import ThemeContext from './ThemeContext';

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

  return (
    <div>
      <p>Tema actual: {theme}</p>
      <button onClick={toggleTheme}>Canviar tema</button>
    </div>
  );
};

export default ThemeComponent;

// App.js
import React from 'react';
import { ThemeProvider } from './ThemeContext';
import ThemeComponent from './ThemeComponent';

const App = () => {
  return (
    <ThemeProvider>
      <ThemeComponent />
    </ThemeProvider>
  );
};

export default App;

Resum

En aquesta secció, hem après què és la API de context de React i com utilitzar-la per compartir dades entre components sense haver de passar props manualment. Hem vist com crear un context, utilitzar un provider i consumir el context en components. També hem practicat aquests conceptes amb un exercici pràctic. En el proper mòdul, explorarem la introducció i ús bàsic dels hooks en React.

◄ Anterior
◄
Següent ►
►

Curs de React

Mòdul 1: Introducció a React

Mòdul 2: Components de React

Mòdul 3: Treballar amb esdeveniments

Mòdul 4: Conceptes avançats de components

Mòdul 5: Hooks de React

Mòdul 6: Enrutament en React

Mòdul 7: Gestió de l'estat

Mòdul 8: Optimització del rendiment

Mòdul 9: Proves en React

Mòdul 10: Temes avançats

Mòdul 11: Projecte: Construir una aplicació completa

El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats