Meilleures pratiques ReactJS : rédiger du code propre et maintenable

ReactJS est une bibliothèque JavaScript puissante et populaire pour créer des interfaces utilisateur dynamiques. Cependant, à mesure que votre application se développe, il devient essentiel de maintenir un code propre et organisé pour qu'il reste évolutif, efficace et lisible. Voici quelques bonnes pratiques pour vous aider à écrire du code React propre et maintenable.

1. Organisez la structure de votre projet L'établissement d'une structure de dossiers claire vous aide, vous et votre équipe, à localiser facilement les fichiers. Une structure commune suit une approche « basée sur les fonctionnalités » où chaque fonctionnalité possède son propre dossier :

src/
├── components/
│   └── Button/
│       ├── Button.js
│       ├── Button.css
│       └── index.js
├── pages/
│   └── Home.js
└── App.js

Séparer les composants par fonctionnalité (ou responsabilité) peut rendre la base de code plus modulaire et plus facile à naviguer à mesure qu'elle grandit.

1. Utiliser des composants fonctionnels et des crochets Les React Hooks ont remplacé les composants de classe dans de nombreux cas et simplifient le code en évitant ces liaisons. Les composants fonctionnels sont généralement plus courts, plus lisibles et plus faciles à tester.

Exemple :

// Instead of class component:
class MyComponent extends React.Component {
  state = { count: 0 };

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return <button onClick={this.increment}>{this.state.count}</button>;
  }
}

// Use functional component with hooks:
import React, { useState } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

1. Décomposer les composants
   Les gros composants sont difficiles à entretenir et à réutiliser. Essayez de créer de petits composants ciblés qui gèrent chacun une seule tâche. Si un composant fait plusieurs choses, envisagez de le diviser en sous-composants plus petits.

2. Utilisez PropTypes ou TypeScript
   Les PropTypes de React ou le typage statique de TypeScript peuvent aider à détecter rapidement les erreurs de type. La définition des types d'accessoires attendus rend les composants plus prévisibles et moins sujets aux erreurs.

Exemple avec PropTypes :

import PropTypes from 'prop-types';

function Greeting({ name }) {
  return <h1>Hello, {name}</h1>;
}

Greeting.propTypes = {
  name: PropTypes.string.isRequired,
};

Exemple avec TypeScript :

type GreetingProps = {
  name: string;
};

const Greeting: React.FC<GreetingProps> = ({ name }) => {
  return <h1>Hello, {name}</h1>;
};

1. Gardez la logique des composants séparée de l'interface utilisateur Pour garder le code propre et testable, séparez la logique de la présentation. Par exemple, utilisez des hooks personnalisés pour gérer la logique et l'état, puis transmettez les données en tant qu'accessoires aux composants qui gèrent l'interface utilisateur.

Exemple de hook personnalisé :

import { useState, useEffect } from 'react';

function useFetchData(url) {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch(url)
      .then(response => response.json())
      .then(data => setData(data));
  }, [url]);

  return data;
}

// UI Component:
function DataDisplay({ url }) {
  const data = useFetchData(url);
  return <div>{data ? data.title : 'Loading...'}</div>;
}

1. Utilisez une dénomination significative et cohérente Des conventions de dénomination cohérentes rendent votre code plus lisible. Utilisez camelCase pour les fonctions et les variables, PascalCase pour les noms de composants et les noms descriptifs pour tous les accessoires et variables d'état.

Exemple :

// Good:
const isLoggedIn = true;
const userProfile = { name: "John", age: 30 };

// Poor:
const x = true;
const obj = { name: "John", age: 30 };

1. Utilisez l'API contextuelle avec précaution L'API Context de React est un outil puissant pour gérer l'état à l'échelle mondiale, mais une utilisation excessive peut rendre votre code complexe et difficile à déboguer. Utilisez-le avec parcimonie et envisagez d'utiliser des bibliothèques de gestion d'état comme Redux ou Zustand pour des applications plus volumineuses.

Exemple :

import React, { createContext, useContext, useState } from 'react';

const AuthContext = createContext();

export function AuthProvider({ children }) {
  const [isAuthenticated, setIsAuthenticated] = useState(false);

  return (
    <AuthContext.Provider value={{ isAuthenticated, setIsAuthenticated }}>
      {children}
    </AuthContext.Provider>
  );
}

export function useAuth() {
  return useContext(AuthContext);
}

1. Mémoriser les fonctions et composants coûteux React restitue les composants à chaque fois que le composant parent est restitué. Pour éviter les nouveaux rendus inutiles, utilisez React.memo pour les composants et useMemo/useCallback pour les fonctions.

Exemple :

src/
├── components/
│   └── Button/
│       ├── Button.js
│       ├── Button.css
│       └── index.js
├── pages/
│   └── Home.js
└── App.js

1. Utilisez des modules CSS ou des composants stylisés Évitez les styles globaux en utilisant des modules CSS, des composants stylisés ou des outils similaires. Ils aident à étendre les styles à des composants individuels, réduisant ainsi les conflits de style et améliorant la lisibilité.

Exemple avec les modules CSS :

// Instead of class component:
class MyComponent extends React.Component {
  state = { count: 0 };

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return <button onClick={this.increment}>{this.state.count}</button>;
  }
}

// Use functional component with hooks:
import React, { useState } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

Exemple avec des composants stylisés :

import PropTypes from 'prop-types';

function Greeting({ name }) {
  return <h1>Hello, {name}</h1>;
}

Greeting.propTypes = {
  name: PropTypes.string.isRequired,
};

1. Testez vos composants Les tests garantissent que vos composants fonctionnent comme prévu et aident à détecter les bogues plus tôt. Utilisez la bibliothèque de tests Jest et React pour écrire des tests unitaires pour les composants et intégrer les tests dans votre flux de travail.

Exemple de base avec la bibliothèque de tests React :

type GreetingProps = {
  name: string;
};

const Greeting: React.FC<GreetingProps> = ({ name }) => {
  return <h1>Hello, {name}</h1>;
};

Conclusion

En suivant ces bonnes pratiques, vous pouvez écrire du code React propre, évolutif et facile à maintenir. Organiser les fichiers, utiliser des composants fonctionnels, séparer la logique de l'interface utilisateur et tester les composants ne sont que quelques façons de rendre vos applications React plus efficaces et plus agréables à travailler. Commencez à appliquer ces techniques dans vos projets pour améliorer la qualité de votre code et rendre le développement futur plus rapide et plus agréable.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!