Organisation du code avec React Hooks et Context

Lorsque vous travaillez sur des projets React à grande échelle, il est crucial d'avoir une base de code bien organisée pour une meilleure maintenabilité et évolutivité.

Dans cet article, nous allons plonger dans les meilleures pratiques pour organiser votre code source dans React, en mettant l'accent sur l'utilisation de React Hooks and Context.

 

Utiliser React Hooks pour la gestion des états

React Hooks est une collection de fonctions qui vous permettent d'utiliser l'état et d'autres fonctionnalités de React sans utiliser de classes. Cela aide à écrire un code plus concis et lisible. Par exemple, nous pouvons utiliser le hook useState pour gérer l'état d'un composant.

Voici un exemple:

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;  

 

Combinaison d'ingrédients

L'un des avantages de React est la possibilité de réutiliser les composants. Pour augmenter l'organisation, nous pouvons utiliser des composants plus petits pour construire des composants plus grands.

Cela permet de décomposer le travail et de faciliter la maintenance du code. Par exemple, nous pouvons créer un <Button> composant à utiliser à plusieurs endroits dans notre application :

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

 

Utilisation de Context pour gérer l'état global

Le contexte est un mécanisme dans React qui nous permet de partager des données entre les composants enfants sans passer par les composants parents. Cela évite de transmettre des attributs de données à plusieurs niveaux de composants et aide à réduire la complexité du code.

Voici un exemple d'utilisation de Context pour partager la langue actuelle dans l'application :

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;  

 

Vous trouverez ci-dessus quelques bonnes pratiques pour organiser le code source de React à l'aide de React Hooks and Context.