Réagissez aux meilleures pratiques pour améliorer votre jeu en 2022

React est resté l'une des bibliothèques les plus populaires pour créer des interfaces utilisateur lors de la création d'applications Web. Il est largement utilisé par de nombreuses entreprises et possède 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 créer des projets conviviaux, facilement évolutifs et maintenables.

Il est également nécessaire de comprendre certaines conventions qui vous permettront d'écrire du code React propre. Cela vous aidera non seulement à mieux servir vos utilisateurs, mais cela facilitera la maintenance de la base de code pour vous et les autres développeurs travaillant sur le projet. Vous travaillez sur votre prochain projet React ? Apprendre à écrire du code React propre est un muscle qui change la donne Commencez ici ️ Cliquez pour tweeter

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

Commençons!

Les défis auxquels sont confrontés les développeurs de React

Dans cette section, nous aborderons certains des principaux défis auxquels les développeurs de React sont confrontés pendant et après la création d'applications Web.

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

Nous allons commencer par le problème le plus fondamental qui affecte les débutants.

Prérequis pour réagir

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

Avant d'apprendre React, vous devez connaître certaines choses. Puisque React utilise JSX, connaître HTML et JavaScript est indispensable. Bien sûr, 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 connaître avant de plonger dans React. Certains d'entre eux, qui relèvent principalement de ES6, incluent :

• Fonctions fléchées
• Opérateur de repos
• Opérateur de propagation
• Modules
• Déstructuration
• Méthodes de tableau
• Littéraux de modèle
• Promesses
• variables let et const

Les rubriques JavaScript répertoriées ci-dessus vous aideront à comprendre, en tant que débutant, comment fonctionne React.

Vous découvrirez également de nouveaux concepts dans React, tels que :

• Composants
• JSX
• Gestion de l'état
• Accessoires
• Éléments de rendu
• Gestion des événements
• Rendu conditionnel
• Listes et clés
• Formulaires et validation de formulaire
• Crochets
• Coiffant

Avoir une solide compréhension des concepts de React et des conditions préalables à l'utilisation de la bibliothèque vous aidera à utiliser ses fonctionnalités de manière efficace.

Mais ne laissez pas cela vous submerger. Avec une pratique et un apprentissage constants, vous pouvez rapidement comprendre comment utiliser React pour créer des projets impressionnants. C'est similaire à l'apprentissage d'un nouveau langage de programmation - cela prend juste un peu de temps et de pratique pour 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 avec du JavaScript vanille.

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 dans une fonction updateX .

Dans React, la mise à jour de l'état/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;

Lors de la mise à jour de l'état d'une variable dans React, vous utilisez le crochet useState . Il y a trois choses à noter lors de l'utilisation de ce crochet :

• Le nom de la variable
• Une fonction de mise à jour de la variable
• La valeur/l'é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 définit ensuite la valeur de x sur 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 beaucoup de crochets d'état rend le code très difficile à maintenir et à comprendre, en particulier à mesure que votre projet évolue.

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

Heureusement pour nous, il existe des bibliothèques conçues pour gérer efficacement la gestion des états dans React. Ils vous permettent même de créer une variable une fois et de l'utiliser où vous voulez dans votre application React. Certaines de ces bibliothèques incluent Redux, Recoil et Zustand.

Le problème avec le choix d'une bibliothèque tierce pour la gestion de l'état est que vous seriez 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 à comprendre pour les débutants (bien que cela soit corrigé avec Redux Toolkit, qui vous permet d'écrire moins de code que vous ne le feriez avec Redux).

Maintenabilité et évolutivité

Au fur et à mesure que les besoins des utilisateurs d'un produit changent, 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. Des difficultés comme celles-ci proviennent du fait de suivre de mauvaises pratiques lors de l'écriture de votre code. Ils peuvent sembler fonctionner parfaitement au début, vous donnant le résultat souhaité, mais tout ce qui fonctionne « pour l'instant » est inefficace pour l'avenir et la croissance de votre projet.

Dans la section suivante, nous passerons 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.

Bonnes pratiques de réaction

Dans cette section, nous parlerons de certaines des meilleures pratiques à suivre lors de l'écriture de votre code React. Plongeons dedans.

1. Maintenir une structure de dossiers claire

Les structures de dossiers vous aident, ainsi que les autres développeurs, à comprendre l'organisation des fichiers et des actifs utilisés dans un projet.

Avec une bonne structure de dossiers, il est facile de naviguer facilement, 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 de dossiers par fonctionnalités ou itinéraires

Le regroupement de fichiers dans votre dossier en fonction de leurs itinéraires et de leurs fonctionnalités permet de conserver 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 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 actifs stockés dans le même dossier.

Regroupement de fichiers similaires

Alternativement, vous pouvez regrouper des fichiers similaires dans le même dossier. Vous pouvez également avoir des dossiers individuels pour les crochets, les composants, etc. Découvrez 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 manière spécifique de commander 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êt à partir !

2. Instituer une commande d'importation structurée

Au fur et à mesure que votre application React continue de croître, vous êtes obligé d'effectuer des importations supplémentaires. La structure de vos importations vous aide grandement à comprendre ce qui compose vos composants.

En règle générale, 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 œ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é des fichiers que nous avons créés localement comme des feuilles de style, des images et des composants.

Par souci de simplicité et de facilité 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, ainsi que les autres développeurs, à mieux comprendre votre application React.

Vous pouvez aller plus loin en regroupant vos fichiers locaux en fonction des types de fichiers si cela vous convient, c'est-à-dire en regroupant les composants, les images, les feuilles de style, les crochets, 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. Adhérez aux conventions de dénomination

Les conventions de dénomination aident à améliorer la lisibilité du code. Cela ne s'applique pas seulement aux noms de composants, mais même à vos noms de variables, jusqu'à vos crochets.

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 principalement 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 nommage camelCase est principalement utilisée pour nommer les variables, les crochets, les fonctions, les tableaux, etc. :

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

4. Utilisez un Linter

Un outil de linter permet d'améliorer la qualité du code. L'un des outils de 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 aide à la cohérence dans 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 des exigences pour l'utilisation de guillemets doubles au lieu de guillemets simples, des accolades autour des fonctions fléchées, une convention de dénomination particulière, et bien plus encore.

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

Étant donné que chaque développeur a son propre style de codage, les outils de linter peuvent aider à uniformiser le code.

Les outils Linter peuvent également nous aider à corriger facilement les bugs. Nous pouvons voir des fautes d'orthographe, des variables déclarées mais non utilisées et d'autres fonctionnalités similaires. Certains de ces bogues peuvent être corrigés automatiquement au fur et à mesure que vous codez.

Des outils comme ESLint sont intégrés à la plupart des éditeurs de code afin que vous puissiez bénéficier des fonctionnalités de linter lors de vos déplacements. Vous pouvez également le configurer en fonction de vos besoins de codage.

5. Utiliser des bibliothèques d'extraits

L'avantage d'utiliser un framework avec une communauté active est la disponibilité d'outils en cours de création pour faciliter le développement.

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

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

La commande ci-dessus continuera à générer un composant fonctionnel avec un nom qui correspond au nom du fichier. Nous avons généré le code ci-dessous à l'aide de l'extension d'extraits de code ES7+ React/Redux/React-Native :

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

Un autre outil d'extrait de code utile est l'extension Tailwind CSS IntelliSense, qui simplifie le processus de style des pages Web avec Tailwind CSS. L'extension peut vous aider avec la saisie semi-automatique en suggérant des classes utilitaires, la coloration syntaxique et des 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 volumineuse et difficile à parcourir.

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 le style avec Tailwind CSS :

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

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

Voici comment styliser un élément à l'aide d'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éutilisabilité du code. Vous pouvez créer un composant et réutiliser sa logique autant de fois que possible sans réécrire cette logique.

Dans cet esprit, 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 de l'utilisateur pour simplifier les choses. Dans une situation réelle, vous pouvez avoir affaire à un type de logique différent.)

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

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

Après cela, 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 fichier au lieu d'avoir trois fichiers distincts pour chaque utilisateur.

8. Mettre en œuvre le chargement paresseux

Le chargement paresseux est très utile à mesure que votre application React grandit. Lorsque vous avez une grande base de code, le temps de chargement de vos pages Web ralentit. En effet, toute l'application doit être chargée à chaque fois pour chaque utilisateur.

"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 paresseux sur les images et les vidéos.

Par défaut, React regroupe et déploie l'intégralité de l'application. Mais nous pouvons changer ce comportement en utilisant le chargement paresseux, autrement connu sous le nom de fractionnement de code.

Fondamentalement, vous pouvez limiter la section de votre application chargée à un moment donné. Ceci est accompli en divisant vos bundles et en ne chargeant que ceux qui correspondent aux besoins de l'utilisateur. Par exemple, vous pouvez d'abord charger uniquement la logique requise pour que l'utilisateur se connecte, puis charger la logique du tableau de bord de l'utilisateur uniquement après qu'il s'est connecté avec succès.

9. Utilisez des crochets réutilisables

Les crochets dans React vous permettent d'exploiter certaines des fonctionnalités supplémentaires de React, telles que l'interaction avec l'état de votre composant et l'exécution d'effets secondaires liés à certains changements d'état de votre composant. Nous pouvons faire tout cela sans écrire de composants de classe.

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

Dans l'exemple ci-dessous, nous allons créer un crochet 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 crochet pour récupérer les données des API 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 crochets personnalisés que nous pouvons créer dans React est illimité, c'est donc à vous de décider comment les utiliser. N'oubliez pas que s'il s'agit d'une fonctionnalité qui doit être répétée sur différents composants, vous devez absolument la rendre réutilisable.

10. Journaliser et gérer les erreurs

Il existe différentes manières de gérer les erreurs dans React, comme l'utilisation des limites d'erreur, les blocs try and catch ou l'utilisation de bibliothèques externes telles que react-error-boundary .

Les limites d'erreur intégrées qui ont été introduites dans React 16 étaient une fonctionnalité pour les composants de classe, nous n'en discuterons donc pas car il est conseillé d'utiliser des composants fonctionnels au lieu de composants de classe.

D'autre part, l'utilisation d'un bloc try and 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 intégrées à vos composants, ce qui vous aidera à détecter les erreurs lors du rendu de votre application React.

11. Surveillez et testez votre code

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

Bien que beaucoup puissent affirmer que les tests ne sont pas un gros problème lors de la création de votre application Web, ils présentent d'innombrables avantages. En voici quelques-unes :

• Les tests vous aident à détecter les erreurs et les bugs.
• La détection des bogues conduit à une meilleure 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 permet d'économiser le coût de payer les développeurs pour éteindre le feu que le bogue pourrait provoquer s'il n'est pas contrôlé.
• Les applications et les sites sans bogue gagnent la confiance et la fidélité de leur public, ce qui conduit à une plus grande croissance.

Vous pouvez utiliser des outils comme Jest ou React Testing Library pour tester votre code. Vous pouvez choisir parmi de nombreux outils de test, tout dépend de celui qui vous convient le mieux.

Vous pouvez également tester vos applications React au fur et à mesure que vous les créez en exécutant les applications dans votre navigateur. Vous obtiendrez généralement toute erreur détectée affichée à l'écran. Ceci 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. Utiliser 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), vous devez donc absolument vous habituer à les utiliser. .

Avec les composants fonctionnels, vous n'avez pas à vous soucier de l'utilisation de this ou 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 modifiées. La meilleure façon de garder une trace de cela 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 modifications apportées par ces bibliothèques peut vous aider à apporter des modifications importantes et pertinentes à votre application et à faciliter les choses pour tous ceux qui travaillent sur le projet.

De plus, certaines fonctionnalités peuvent devenir obsolètes et certains mots-clés peuvent être modifiés lorsque de nouvelles versions sont publiées. Pour plus de sécurité, vous devez toujours lire la documentation et les guides lorsque de telles modifications sont apportées.

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

Si vous souhaitez rendre votre application Web accessible à tous après l'avoir créée, 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 sur lequel votre site Web est hébergé 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 peuvent voir les choses géniales que vous avez créées.

Il existe une variété de plates-formes 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 référentiel GitHub, de choisir parmi les 25 centres de données de Kinsta positionnés dans le monde, et c'est parti. Vous aurez accès à une configuration rapide, à une assistance 24h/24 et 7j/7, à une sécurité haut de gamme, à des domaines personnalisés, à des outils de reporting et de surveillance avancés, et bien plus encore.

Sommaire

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 que vous devez suivre pour vous aider à créer des produits efficaces.

Suivre ces conventions React aide non seulement votre application, mais présente également des avantages pour vous en tant que développeur frontend - vous apprenez à écrire du code efficace, évolutif et maintenable, et vous vous démarquez en tant que professionnel dans votre domaine. Vous voulez intensifier votre jeu de codage React ? Tout ce que vous devez savoir se trouve dans ce guide Cliquez pour tweeter

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

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