Meilleures pratiques React pour vous améliorer en 2023

React est resté l’une des bibliothèques les plus populaires pour créer des interfaces utilisateur lors de la construction d’applications web. Elle est largement utilisée par de nombreuses entreprises et dispose d’une communauté active.

En tant que développeur React, comprendre le fonctionnement de la bibliothèque n’est pas la seule chose dont vous avez besoin pour construire des projets adaptés, facilement évolutifs et maintenables.

Il est également nécessaire de comprendre certaines conventions qui vous permettront d’écrire un code React propre. Cela vous aidera non seulement à mieux servir vos utilisateurs, mais aussi à faciliter la maintenance de la base de code pour vous et les autres développeurs travaillant sur le projet.

Dans ce tutoriel, nous commencerons par parler de certains des défis courants auxquels les développeurs React sont confrontés, puis nous nous plongerons dans certaines des meilleures pratiques que vous pouvez suivre pour vous aider à écrire du code React de manière plus efficace.

C’est parti !

Découvrez notre guide vidéo sur les meilleures pratiques React

Défis auxquels les développeurs React sont confrontés

Dans cette section, nous allons aborder certains des principaux défis auxquels les développeurs React sont confrontés pendant et après la construction d’applications web.

Tous les défis que vous verrez dans cette section peuvent être évités en suivant les meilleures pratiques, dont nous parlerons en détail plus tard.

Nous allons commencer par le problème le plus basique qui touche les débutants.

Conditions préalables à React

L’un des principaux défis auxquels sont confrontés les développeurs React est de comprendre le fonctionnement de la bibliothèque, ainsi que les conditions préalables à son utilisation.

Avant d’apprendre React, vous devez savoir deux ou trois choses. Étant donné que React utilise JSX, il est indispensable de connaître HTML et JavaScript. Bien entendu, vous devez également connaître CSS ou un framework CSS moderne pour concevoir vos applications web.

En particulier, il existe des concepts et des fonctionnalités JavaScript de base que vous devez connaitre avant de plonger dans React. Certains d’entre eux, qui relèvent principalement de l’ES6, incluent :

• Fonctions Arrow
• Opérateur Rest
• Opérateur Spread
• Modules
• Destructuration
• Méthodes de tableau
• Littéraux de modèle
• Promesses
• Variables let et const

Les sujets JavaScript énumérés ci-dessus vous aideront à comprendre, en tant que débutant, le fonctionnement de React.

Vous apprendrez également de nouveaux concepts dans React, comme :

• Composants
• JSX
• Gestion des états
• Promesses
• Éléments de rendu
• Traitement des évènements
• Rendu conditionnel
• Listes et clés
• Formulaires et validation des formulaires
• Crochets
• Stylisation

Une solide compréhension des concepts de React et des conditions préalables à l’utilisation de la bibliothèque vous aidera à utiliser efficacement ses fonctionnalités.

Mais ne vous laissez pas submerger. Avec une pratique et un apprentissage constants, vous pouvez rapidement acquérir une bonne maitrise de la façon d’utiliser React pour créer des projets impressionnants. C’est similaire à l’apprentissage d’un nouveau langage de programmation – il faut juste un peu de temps et de pratique pour le comprendre.

Gestion de l’état

La mise à jour de l’état/de la valeur de vos variables dans React fonctionne différemment de la façon dont vous le feriez en utilisant le JavaScript classique.

En JavaScript, la mise à jour d’une variable est aussi simple que de lui attribuer une nouvelle valeur à l’aide de l’opérateur égal à (=). Voici un exemple :

var x = 300;
function updateX(){
  x = 100;
}
updateX();
console.log(x);
// 100

Dans le code ci-dessus, nous avons créé une variable appelée x avec une valeur initiale de 300.

En utilisant l’opérateur égal à, nous lui avons attribué une nouvelle valeur de 100. Ceci a été écrit à l’intérieur d’une fonction updateX.

Dans React, la mise à jour de l’état/de la valeur de vos variables fonctionne différemment. Voici comment :

import { useState } from 'react';
function App() {
  const [x, setX] = useState(300)
  let updateX =()=>{
    setX(100);
  }
  return (
    <div className="App">
    <h1>{x}</h1>
    <button onClick={updateX}>Update X</button>
    </div>
  );
}
export default App;

Lorsque vous mettez à jour l’état d’une variable dans React, vous utilisez le crochet useState. Il y a trois choses à noter lors de l’utilisation de ce hook :

• Le nom de la variable
• Une fonction pour mettre à jour la variable
• La valeur/état initial de la variable

Dans notre exemple, x est le nom de la variable, et setX est la fonction de mise à jour de la valeur de x, tandis que la valeur initiale (300) de x est passée en paramètre à la fonction useState:

 const [x, setX] = useState(300)

Afin de mettre à jour l’état de x, nous avons utilisé la fonction setX:

import { useState } from 'react';
let updateX =()=>{
  setX(100);
}

Ainsi, la fonction updateX invoque la fonction setX, qui fixe ensuite la valeur de x à 100.

Bien que cela semble fonctionner parfaitement pour mettre à jour l’état de vos variables, cela augmente la complexité de votre code dans les très grands projets. Avoir des tas de State Hooks rend le code très difficile à maintenir et à comprendre, surtout lorsque votre projet évolue.

Un autre problème lié à l’utilisation du State Hook est que les variables créées ne sont pas partagées entre les différents composants qui composent votre application. Vous devrez toujours utiliser des Props pour faire passer les données d’une variable à une autre.

Heureusement pour nous, il existe des bibliothèques construites pour gérer efficacement la gestion des états dans React. Elles vous permettent même de créer une variable une fois et de l’utiliser où vous le souhaitez dans votre application React. Certaines de ces bibliothèques comprennent Redux, Recoil et Zustand.

Le problème de choisir une bibliothèque tierce pour la gestion de l’état est que vous serez obligé d’apprendre de nouveaux concepts étrangers à ce que vous avez déjà appris dans React. Redux, par exemple, était connu pour avoir beaucoup de code passe-partout, ce qui le rendait difficile à appréhender pour les débutants (bien que cela soit en train d’être corrigé avec Redux Toolkit, qui vous permet d’écrire moins de code que vous le feriez avec Redux).

Maintenabilité et évolutivité

Comme les exigences des utilisateurs d’un produit continuent de changer, il est toujours nécessaire d’introduire des modifications dans le code qui compose le produit.

Il est souvent difficile de faire évoluer votre code lorsque ce code n’est pas facile à maintenir pour l’équipe. Les difficultés de ce genre proviennent du fait que vous suivez de mauvaises pratiques lors de l’écriture de votre code. Elles peuvent sembler fonctionner parfaitement au début, vous donnant le résultat souhaité, mais tout ce qui fonctionne « pour le moment » est inefficace pour l’avenir et la croissance de votre projet.

Dans la prochaine section, nous allons passer en revue certaines conventions qui peuvent vous aider à améliorer la façon dont vous écrivez votre code React. Cela vous aidera également à mieux collaborer lorsque vous travaillez avec une équipe professionnelle.

Meilleures pratiques React

Dans cette section, nous allons parler de certaines des meilleures pratiques à suivre lors de l’écriture de votre code React. Plongeons dans le vif du sujet.

1. Maintenez une structure de dossiers claire

Les structures de dossiers vous aident, vous et les autres développeurs, à comprendre la disposition des fichiers et des actifs utilisés dans un projet.

Avec une bonne structure de dossiers, il est facile de s’y retrouver, ce qui permet de gagner du temps et d’éviter toute confusion. Les structures de dossiers diffèrent selon les préférences de chaque équipe, mais voici quelques-unes des structures de dossiers couramment utilisées dans React.

Regroupement des dossiers par fonctionnalités ou par routes

Le regroupement des fichiers dans votre dossier en fonction de leurs routes et de leurs fonctionnalités permet de garder tout ce qui concerne une fonctionnalité particulière dans un seul espace. Par exemple, si vous avez un tableau de bord utilisateur, vous pouvez avoir les fichiers JavaScript, CSS et de test relatifs au tableau de bord dans un seul dossier.

Voici un exemple pour le démontrer :

dashboard/
index.js
dashboard.css
dashboard.test.js
home/
index.js
Home.css
HomeAPI.js
Home.test.js
blog/
index.js
Blog.css
Blog.test.js

Comme on peut le voir ci-dessus, chaque fonctionnalité principale de l’application a tous ses fichiers et ressources stockés dans le même dossier.

Regroupement de fichiers similaires

Vous pouvez également regrouper des fichiers similaires dans le même dossier. Vous pouvez également avoir des dossiers individuels pour les Hooks, les composants, et ainsi de suite. Regardez cet exemple :

hooks/
useFetchData.js
usePostData.js
components/
Dashboard.js
Dashboard.css
Home.js
Home.css
Blog.js
Blog.css

Vous n’êtes pas obligé de suivre strictement ces structures de dossiers lors du codage. Si vous avez une façon spécifique d’ordonner vos fichiers, allez-y. Tant que vous et les autres développeurs avez une compréhension claire de la structure des fichiers, vous êtes prêts à partir !

2. Instituez un ordre d’importation structuré

Au fur et à mesure que votre application React se développe, vous êtes amené à faire des importations supplémentaires. La structure de vos importations vous aide grandement à comprendre ce qui compose vos composants.

Par convention, le regroupement d’utilitaires similaires semble bien fonctionner. Par exemple, vous pouvez regrouper les importations externes ou tierces séparément des importations locales.

Jetez un coup d’œil à l’exemple suivant :

import { Routes, Route } from "react-router-dom";
import { createSlice } from "@reduxjs/toolkit";
import { Menu } from "@headlessui/react";
import Home from "./Home";
import logo from "./logo.svg";
import "./App.css";

Dans le code ci-dessus, nous avons d’abord regroupé les bibliothèques tierces (ce sont des bibliothèques que nous avons dû installer au préalable).

Nous avons ensuite importé les fichiers que nous avons créés localement, comme les feuilles de style, les images et les composants.

Pour des raisons de simplicité et de compréhension, notre exemple ne représente pas une très grande base de code, mais gardez à l’esprit qu’être cohérent avec ce format d’importation vous aidera, vous et les autres développeurs, à mieux comprendre votre application React.

Vous pouvez aller plus loin en regroupant vos fichiers locaux selon les types de fichiers si cela vous convient – c’est-à-dire en regroupant les composants, les images, les feuilles de style, les hooks, etc. séparément sous vos importations locales.

Voici un exemple :

import Home from "./Home";
import About from "./About"
import Contact from "./Contact"
import logo from "./logo.svg";
import closeBtn from "./close-btn.svg"
import "./App.css";
import "Home.css"

3. Respectez les conventions de nommage

Les conventions de nommage contribuent à améliorer la lisibilité du code. Cela ne s’applique pas seulement aux noms des composants mais aussi à vos noms de variables, jusqu’à vos hooks.

La documentation React ne propose aucun modèle officiel pour nommer vos composants. Les conventions de nommage les plus utilisées sont camelCase et PascalCase.

PascalCase est surtout utilisé pour les noms de composants :

import React from 'react'
function StudentList() {
  return (
    <div>StudentList</div>
  )
}
export default StudentList

Le composant ci-dessus est nommé StudentList, ce qui est beaucoup plus lisible que Studentlist ou studentlist.

D’autre part, la convention de dénomination camelCase est surtout utilisée pour nommer les variables, les hooks, les fonctions, les tableaux, etc :

&const [firstName, setFirstName] = useState("Ihechikara");
const studentList = [];
const studentObject = {};
const getStudent = () => {}

4. Utiliser un Linter

Un outil linter permet d’améliorer la qualité du code. L’un des outils linter les plus populaires pour JavaScript et React est ESlint. Mais comment cela aide-t-il exactement à améliorer la qualité du code ?

Un outil linter contribue à la cohérence d’une base de code. Lorsque vous utilisez un outil comme ESLint, vous pouvez définir les règles que vous souhaitez que chaque développeur travaillant sur le projet suive. Ces règles peuvent inclure l’obligation d’utiliser des guillemets doubles au lieu de guillemets simples, des accolades autour de fonctions fléchées, une convention de dénomination particulière, et bien plus encore.

L’outil observe votre code et vous notifie ensuite lorsqu’une règle a été enfreinte. Le mot-clé ou la ligne qui enfreint la règle est généralement souligné en rouge.

Comme chaque développeur a son propre style de codage, les outils de linter peuvent contribuer à l’uniformité du code.

Les outils linter peuvent également nous aider à corriger les bugs facilement. Nous pouvons voir les fautes d’orthographe, les variables qui ont été déclarées mais non utilisées, et d’autres fonctionnalités de ce type. Certains de ces bogues peuvent être corrigés automatiquement pendant que vous codez.

Des outils tels qu’ESLint sont intégrés à la plupart des éditeurs de code, ce qui vous permet de bénéficier des fonctionnalités d’ESLint en déplacement. Vous pouvez également le configurer pour l’adapter à vos besoins de codage.

5. Employez des bibliothèques de snippets

L’avantage d’utiliser un framework avec une communauté active est la disponibilité d’outils créés pour faciliter le développement.

Les bibliothèques de snippets peuvent accélérer le développement en fournissant un code préétabli que les développeurs utilisent souvent.

Un bon exemple est l’extension snippets ES7+ React/Redux/React-Native, qui comporte de nombreuses commandes utiles pour générer du code pré-construit. Par exemple, si vous voulez créer un composant fonctionnel React sans avoir à taper tout le code, tout ce que vous devez faire en utilisant l’extension est de taper rfce et d’appuyer sur Entrée.

La commande ci-dessus va continuer à générer un composant fonctionnel avec un nom qui correspond au nom du fichier. Nous avons généré le code ci-dessous en utilisant l’extension ES7+ React/Redux/React-Native snippets :

import React from 'react'
function StudentList() {
  return (
    <div>StudentList</div>
  )
}
export default StudentList

Un autre outil de snippet utile est l’extension Tailwind CSS IntelliSense, qui simplifie le processus de stylisation des pages Web avec Tailwind CSS. L’extension peut vous aider avec l’autocomplétion en suggérant des classes utilitaires, la coloration syntaxique et les fonctionnalités de linting. Vous pouvez même voir à quoi ressemblent vos couleurs pendant le codage.

6. Combinez CSS et JavaScript

Lorsque vous travaillez sur de grands projets, l’utilisation de différents fichiers de feuille de style pour chaque composant peut rendre votre structure de fichiers encombrante et difficile à naviguer.

Une solution à ce problème consiste à combiner votre code CSS et JSX. Vous pouvez utiliser des frameworks/bibliothèques comme Tailwind CSS et Emotion pour cela.

Voici à quoi ressemble un style avec Tailwind CSS :

<p className="font-bold mr-8">resource edge</p>

Le code ci-dessus donne à l’élément paragraphe une police en gras et ajoute une marge sur la droite. Nous sommes en mesure de le faire en utilisant les classes utilitaires du framework.

Voici comment styliser un élément en utilisant Emotion :

<h1
css={css`
  color: black;
  font-size: 30px;
`}
>
Hello World!
</h1>

7. Limiter la création de composants

L’une des principales caractéristiques de React est la réutilisation du code. Vous pouvez créer un composant et réutiliser sa logique autant de fois que possible sans réécrire cette logique.

Dans cette optique, vous devez toujours limiter le nombre de composants que vous créez. Ne pas le faire gonfle la structure de fichiers avec des fichiers inutiles qui ne devraient pas exister en premier lieu.

Nous allons utiliser un exemple très simple pour le démontrer :

function UserInfo() {
  return (
    <div>
    <h1>My name is Ihechikara.</h1>
    </div>
  );
}
export default UserInfo

Le composant ci-dessus affiche le nom d’un utilisateur. Si nous devions créer un fichier différent pour chaque utilisateur, nous finirions par avoir un nombre déraisonnable de fichiers. (Bien sûr, nous utilisons les informations sur les utilisateurs pour garder les choses simples. Dans une situation réelle, vous pouvez avoir affaire à un autre type de logique.)

Pour rendre notre composant réutilisable, nous pouvons utiliser des Props. Voici comment :

function UserInfo({userName}) {
  return (
    <div>
    <h1>My name is {userName}.</h1>
    </div>
  );
}
export default UserInfo

Nous pouvons ensuite importer ce composant et l’utiliser autant de fois que nous le souhaitons :

import UserInfo from "./UserInfo";
function App() {
  return (
    <div className="App">
    <UserInfo userName={"Ihechikara"} />
    <UserInfo userName={"John"} />
    <UserInfo userName={"Jane"} />
    </div>
  );
}
export default App;

Nous avons maintenant trois instances différentes du composant UserInfo provenant de la logique créée dans un seul fichier au lieu d’avoir trois fichiers séparés pour chaque utilisateur.

8. Implémentez le chargement différé

Le chargement différé est très utile lorsque votre application React se développe. Lorsque vous avez une grosse base de code, le temps de chargement de vos pages web ralentit. Cela est dû au fait que l’application entière doit être chargée à chaque fois pour chaque utilisateur.

Le chargement différé (ou Lazy loading) est un terme utilisé pour diverses implémentations. Ici, nous l’associons à JavaScript et React, mais vous pouvez également implémenter le chargement différé sur des images et des vidéos.

Par défaut, React regroupe et déploie l’ensemble de l’application. Mais nous pouvons modifier ce comportement en utilisant le chargement différé, autrement connu sous le nom de fractionnement du code.

Fondamentalement, vous pouvez limiter la section de votre application qui est chargée à un moment donné. Pour ce faire, divisez vos bundles et ne chargez que ceux qui sont pertinents pour les besoins de l’utilisateur. Par exemple, vous pouvez d’abord charger uniquement la logique requise pour que l’utilisateur s’identifie, puis charger la logique du tableau de bord de l’utilisateur seulement après qu’il se soit identifié avec succès.

9. Utilisez des hooks réutilisables

Les crochets dans React vous permettent d’exploiter certaines des fonctionnalités supplémentaires de React, comme l’interaction avec l’état de votre composant et l’exécution d’effets secondaires en relation avec certains changements d’état dans votre composant. On peut faire tout cela sans écrire de composants de classe.

Nous pouvons également rendre les Hooks réutilisables afin de ne pas avoir à retaper la logique dans chaque fichier où ils sont utilisés. Pour ce faire, nous créons des Hooks personnalisés qui peuvent être importés partout dans l’application.

Dans l’exemple ci-dessous, nous allons créer un hook pour récupérer des données à partir d’API externes :

import { useState, useEffect } from "react";
function useFetchData(url) {
  const [data, setData] = useState(null);
  useEffect(() => {
    fetch(url)
    .then((res) => res.json())
    .then((data) => setData(data))
    .catch((err) => console.log(`Error: ${err}`));
  }, [url]);
  return { data };
}
export default useFetchData;

Nous avons créé un hook pour récupérer des données à partir d’APIs ci-dessus. Maintenant, il peut être importé dans n’importe quel composant. Cela nous évite le stress de taper toute cette logique dans chaque composant où nous devons récupérer des données externes.

Le type de hooks personnalisés que nous pouvons créer dans React est illimité, c’est donc à vous de décider comment les utiliser. Souvenez-vous simplement que s’il s’agit d’une fonctionnalité qui doit être répétée dans différents composants, vous devez absolument la rendre réutilisable.

10. Consigner et gérer les erreurs

Il existe différentes façons de gérer les erreurs dans React, comme l’utilisation de limites d’erreurs, de blocs try and catch ou l’utilisation de bibliothèques externes comme react-error-boundary.

Les limites d’erreurs intégrées qui ont été introduites dans React 16 étaient une fonctionnalité pour les composants de classe. Nous n’en parlerons donc pas car il est conseillé d’utiliser des composants fonctionnels plutôt que des composants de classe.

D’autre part, l’utilisation d’un bloc try et catch ne fonctionne que pour le code impératif, mais pas pour le code déclaratif. Cela signifie que ce n’est pas une bonne option lorsque vous travaillez avec JSX.

Notre meilleure recommandation serait d’utiliser une bibliothèque comme react-error-boundary. Cette bibliothèque fournit des fonctionnalités qui peuvent être enroulées autour de vos composants, ce qui vous aidera à détecter les erreurs pendant le rendu de votre application React.

11. Contrôlez et testez votre code

Tester votre code pendant le développement vous aide à écrire un code maintenable. Malheureusement, c’est une chose que beaucoup de développeurs négligent.

Bien que beaucoup puissent prétendre que les tests ne sont pas importants lors de la création de votre application Web, ils présentent d’innombrables avantages. En voici quelques-uns :

• Les tests vous aident à détecter les erreurs et les bogues.
• La détection des bogues permet d’améliorer la qualité du code.
• Les tests unitaires peuvent être documentés pour la collecte de données et les références futures.
• La détection précoce des bogues vous évite de payer des développeurs pour éteindre l’incendie que le bogue pourrait causer s’il n’est pas vérifié.
• Les applications et sites sans bogue gagnent la confiance et la fidélité de leur public, ce qui entraine une plus grande croissance.

Vous pouvez utiliser des outils comme Jest ou React Testing Library pour tester votre code. Il existe de nombreux outils de test parmi lesquels vous pouvez choisir – il s’agit de trouver celui qui vous convient le mieux.

Vous pouvez également tester vos applications React à mesure que vous les construisez en les exécutant dans votre navigateur. Vous obtiendrez généralement l’affichage à l’écran de toute erreur détectée. Cette méthode est similaire au développement de sites WordPress à l’aide de DevKinsta – un outil qui vous permet de concevoir, développer et déployer des sites WordPress sur votre machine locale.

12. Utilisez des composants fonctionnels

L’utilisation de composants fonctionnels dans React présente de nombreux avantages : Vous écrivez moins de code, il est plus facile à lire, et la version bêta de la documentation officielle de React est en cours de réécriture à l’aide de composants fonctionnels (Hooks), donc vous devriez certainement vous habituer à les utiliser.

Avec les composants fonctionnels, vous n’avez pas à vous soucier de l’utilisation du site this ou de l’utilisation des classes. Vous pouvez également gérer facilement l’état de votre composant en écrivant moins de code grâce aux hooks.

La plupart des ressources mises à jour que vous trouverez sur React utilisent des composants fonctionnels, ce qui facilite la compréhension et le suivi des guides et ressources utiles créés par la communauté lorsque vous rencontrez des problèmes.

13. Restez à jour avec les changements de version de React

Au fil du temps, de nouvelles fonctionnalités seront introduites, et certaines anciennes seront modifiées. La meilleure façon d’en garder la trace est de regarder la documentation officielle.

Vous pouvez également rejoindre les communautés React sur les réseaux sociaux pour obtenir des informations sur les changements lorsqu’ils se produisent.

Rester à jour avec la version actuelle de React vous aidera à déterminer quand optimiser ou apporter des modifications à votre base de code pour obtenir les meilleures performances.

Il existe également des bibliothèques externes construites autour de React avec lesquelles vous devriez également être à jour – comme React Router, qui est utilisé pour le routage dans React. Connaître les changements apportés par ces bibliothèques peut vous aider à apporter des modifications importantes et pertinentes à votre application et faciliter la tâche de toutes les personnes travaillant sur le projet.

En outre, certaines fonctionnalités peuvent devenir obsolètes et certains mots-clés peuvent être modifiés lorsque de nouvelles versions sont publiées. Pour être sûr, vous devriez toujours lire la documentation et les guides lorsque de tels changements sont effectués.

14. Utilisez un fournisseur d’hébergement rapide et sécurisé

Si vous voulez rendre votre application web accessible à tous après l’avoir construite, vous devez l’héberger. Il est important que vous utilisiez un fournisseur d’hébergement rapide et sécurisé.

L’hébergement de votre site Web vous donne accès à différents outils qui facilitent la mise à l’échelle et la gestion de votre site web. Le serveur où est hébergé votre site Web permet de stocker en toute sécurité les fichiers de votre machine locale sur le serveur. L’avantage global de l’hébergement de votre site Web est que d’autres personnes ont la possibilité de voir les trucs géniaux que vous avez créés.

Il existe une variété de plateformes qui fournissent des services d’hébergement gratuits aux développeurs comme Firebase, Vercel, Netlify, GitHub Pages, ou des services payants comme Azure, AWS, GoDaddy, Bluehost, etc.

Vous pouvez également utiliser la plateforme d’hébergement d’applications de Kinsta. Tout ce que vous avez à faire est de connecter un dépôt GitHub, de choisir parmi les 25 centres de données de Kinsta  positionnés dans le monde entier, et de partir. Vous aurez accès à une installation rapide, à un support 24/7, à une sécurité haut de gamme, à des domaines personnalisés, à des outils de reporting et de surveillance avancés, et plus encore.

Résumé

Apprendre à utiliser React n’est pas tout ce qui est nécessaire pour créer des applications web exceptionnelles. Comme pour tout autre framework comme Angular, Vue, etc., il existe des bonnes pratiques à suivre pour vous aider à construire des produits efficaces.

Suivre ces conventions React n’aide pas seulement votre application, mais présente également des avantages pour vous en tant que développeur frontend – vous apprenez à écrire un code efficace, évolutif et maintenable, et vous vous distinguez en tant que professionnel dans votre domaine

Ainsi, lors de la création de votre prochaine application web avec React, gardez ces meilleures pratiques à l’esprit afin de faciliter l’utilisation et la gestion du produit, tant pour vos utilisateurs que pour vos développeurs.

Quelles autres meilleures pratiques React connaissez-vous qui n’ont pas été mentionnées dans cet article ? Partagez-les dans les commentaires ci-dessous. Bon codage !