Organizzazione del codice con hook e contesto di React

Quando si lavora su progetti React su larga scala, è fondamentale disporre di una base di codice ben organizzata per una migliore manutenibilità e scalabilità.

In questo articolo, ci immergeremo nelle migliori pratiche per organizzare il tuo codice sorgente in React, con particolare attenzione all'utilizzo di React Hooks e Context.

 

Utilizzo di React Hooks per la gestione dello stato

Gli hook di React sono una raccolta di funzioni che ti consentono di utilizzare lo stato e altre funzionalità di React senza utilizzare le classi. Questo aiuta a scrivere codice più conciso e leggibile. Ad esempio, possiamo usare l'hook useState per gestire lo stato in un componente.

Ecco un esempio:

import React, { useState } from 'react';  
  
function Counter() {  
  const [count, setCount] = useState(0);  
  
  const increment =() => {  
    setCount(count + 1);  
  };  
  
  return( 
    <div>  
      <p>Count: {count}</p>  
      <button onClick={increment}>Increment</button>  
    </div>  
 );  
}  
  
export default Counter;  

 

Combinazione di ingredienti

Uno dei vantaggi di React è la possibilità di riutilizzare i componenti. Per aumentare l'organizzazione, possiamo utilizzare componenti più piccoli per costruire componenti più grandi.

Questo aiuta a suddividere il lavoro e semplifica la manutenzione del codice. Ad esempio, possiamo creare un <Button> componente da utilizzare in più punti della nostra applicazione:

import React from 'react';  
  
function Button({ onClick, children }) {  
  return <button onClick={onClick}>{children}</button>;  
}  
  
export default Button;  

 

Utilizzo del contesto per gestire lo stato globale

Il contesto è un meccanismo in React che ci consente di condividere i dati tra i componenti figlio senza passare attraverso i componenti padre. Questo evita il passaggio di attributi di dati su più livelli di componenti e aiuta a ridurre la complessità del codice.

Ecco un esempio di utilizzo di Context per condividere la lingua corrente nell'applicazione:

import React, { createContext, useContext, useState } from 'react';  
  
const LanguageContext = createContext();  
  
function App() {  
  const [language, setLanguage] = useState('en');  
  
  const changeLanguage =(newLanguage) => {  
    setLanguage(newLanguage);  
  };  
  
  return( 
    <LanguageContext.Provider value={{ language, changeLanguage }}>  
      <div>  
        <Navbar />  
        <Content />  
      </div>  
    </LanguageContext.Provider>  
 );  
}  
  
function Navbar() {  
  const { language, changeLanguage } = useContext(LanguageContext);  
  
  return( 
    <div>  
      <button onClick={() => changeLanguage('en')}>English</button>  
      <button onClick={() => changeLanguage('fr')}>French</button>  
      <button onClick={() => changeLanguage('es')}>Spanish</button>  
      <p>Current language: {language}</p>  
    </div>  
 );  
}  
  
function Content() {  
  const { language } = useContext(LanguageContext);  
  
  return <p>This is the content in {language}.</p>;  
}  
  
export default App;  

 

Sopra ci sono alcune best practice per organizzare il codice sorgente di React usando React Hooks e Context.