10 meilleures pratiques de React que vous devez suivre en 2023
React est juste l'une des structures frontales les plus populaires pour JavaScript. Contrairement à d'autres structures comme Angular, elle est très peu autonome. Pour cette raison, c'est à vous de décider comment vous avez l'intention de créer ou de structurer votre code React.
Certaines des meilleures méthodes de React que vous devriez suivre pour améliorer les performances de votre application sont énumérées ici.
1. Faire usage de composants fonctionnels et aussi de crochets au lieu de classes.
Dans React, vous pouvez utiliser des classes ou des éléments utiles avec des crochets. Vous devriez néanmoins utiliser plus souvent les composants fonctionnels ainsi que les hooks car ils donnent lieu à un code plus concis ainsi que plus lisible par rapport aux cours.
Considérez la partie de cours suivante qui affiche des informations provenant de l'API de la NASA.
Vous pouvez créer le même composant en utilisant des hooks :
Même si le bloc de code ci-dessus fait exactement le même point que l'élément de cours, il est beaucoup moins complexe, très peu, ainsi que facile à comprendre.
2. Évitez d'utiliser l'État (lorsque cela est possible)
L'état React suit les informations qui, lorsqu'elles sont modifiées, entraînent un nouveau rendu de l'élément React. Lors de la construction d'applications React, restez à l'écart de l'utilisation de l'état autant que possible car plus vous utilisez l'état, plus vous devez suivre des informations supplémentaires tout au long de votre application.
Un moyen de diminuer l'utilisation de l'état est de le proclamer uniquement lorsque cela est nécessaire. Par exemple, si vous récupérez des données individuelles à partir d'une API, stockez l'ensemble des choses de l'utilisateur dans l'état au lieu de sauvegarder les maisons spécifiques.
Au lieu de faire cela :
Faites ceci :
3. Disposez les fichiers liés au même composant dans un seul dossier.
Lorsque vous choisissez une structure de dossiers pour votre application React, optez pour une structure centrée sur les composants. Cela implique d'enregistrer tous les fichiers préoccupant un composant dans un seul dossier.
Si vous produisiez un composant Navbar, par exemple, créez un dossier nommé Navbar composé des données de l'élément, de la feuille de style et d'autres fichiers JavaSript et également de propriété utilisés dans le composant.
Un dossier unique composé de tous les documents d'un composant facilite la réutilisation, le partage, ainsi que le débogage. Si vous avez besoin de voir comment un élément fonctionne, il vous suffit d'ouvrir un seul dossier.
D'autres techniques idéales de dossier React sont :
- Utilisez des données d'index pour abstraire les informations de mise en œuvre de vos documents de pièces. En pensant à l'exemple de la Navbar, créez un dossier Navbar ainsi que dans ce dossier, incluez une donnée de composant nommée donnée index.js (ou .ts).
- Gardez les pièces réutilisables dans un dossier séparé. Si vous avez des parties que plus d'un composant de votre application utilise, prenez en considération de les maintenir dans un dossier nommé parties. Cela vous aidera à les localiser plus facilement.
- Conservez les fonctions énergétiques dans un dossier distinct, tel qu'un dossier lib ou assistants. Cela rendra beaucoup plus facile de prendre soin et aussi de réutiliser ces fonctions à l'avenir.
4. Évitez d'utiliser les index comme accessoires clés.
React utilise des secrets pour identifier de manière unique les choses dans une variété. Avec les clés, React peut identifier quelle chose a effectivement été modifiée, ajoutée ou débarrassée de la sélection.
Lors du rendu des variétés, vous pourriez utiliser l'index comme clé.
Bien que cela fonctionne souvent, l'utilisation de l'index comme astuce peut présenter des préoccupations, surtout si le listing est censé changer. Considérez cette énumération.
Actuellement, le produit initial de la liste de contrôle, "Item1", est à l'indice zéro, cependant si vous ajoutez un élément supplémentaire au début du listing, l'index de la liste de contrôle est de 0. " Item1" index passerait certainement à 1 ce qui modifie les habitudes de votre variété.
Le service consiste à utiliser une valeur spéciale comme indice pour s'assurer que l'identification du produit de la liste est conservée.
5. Choisissez les fragments au lieu des Divs quand c'est possible.
Les composants React nécessitent de renvoyer du code couvert dans une seule balise typiquement un <>Div>< div> ou un fragment React. Vous devez opter pour des fragments lorsque cela est possible.
L'utilisation de la balise < div> augmente la taille du DOM, notamment dans les projets importants étant donné que plus vous avez de balises ou de nœuds DOM, plus votre site a besoin de mémoire et plus le navigateur utilise de puissance pour charger votre site internet. Cela entraîne une diminution du taux de page ainsi qu'une expérience utilisateur éventuellement inadéquate.
Un exemple d'élimination des balises < div> est de ne pas les utiliser lors du retour d'un aspect solitaire.
6. Adhérez aux conventions de nommage
Vous devez toujours utiliser la PascalCase lorsque vous appelez des éléments afin de les différencier des autres fichiers JSX non composants. Par exemple : TextField, NavMenu, ainsi que SuccessButton.
Utilisez la camelCase pour les fonctionnalités déclarées à l'intérieur des parties React comme handleInput() ou showElement().
7. Évitez le code répétitif
Si vous remarquez que vous composez du code dupliqué, convertissez-le directement en parties qui peuvent être recyclées.
Par exemple, il est encore plus logique de développer un composant pour votre menu de navigation au lieu de composer systématiquement le code dans chaque composant qui nécessite un menu.
C'est l'avantage d'un style basé sur les composants. Vous pouvez endommager votre tâche directement en petits composants que vous pouvez réutiliser dans toute votre application.
8. Utilisez la destruction d'objets pour les accessoires
Au lieu de passer l'objet props, utilisez la déstructuration d'objet pour passer le nom du prop. Cela dispose de la nécessité de se référer à l'objet props chaque fois que vous avez besoin de l'utiliser.
Par exemple, l'appartenance suivante qui utilise les props tels quels.
Avec la déstructuration des éléments, vous décrivez le message directement.
9. Rendre dynamiquement des tableaux en utilisant Map
Utilisez map() pour rendre dynamiquement des blocs HTML dupliqués. Par exemple, vous pouvez utiliser map() pour rendre une liste de contrôle d'éléments dans
À des fins de contraste, voici exactement comment vous pouvez rendre la liste de contrôle sans map(). Cette approche est extrêmement récurrente.
10. Écrire des tests pour chacun des composants React.
Écrivez des examens pour les pièces que vous créez car cela réduit la possibilité d'erreurs. L'examen garantit que les composants agissent comme vous vous y attendez certainement. Parmi les cadres de test les plus typiques pour React, il y a Jest, et il donne un cadre où vous pouvez exécuter vos tests.
React est un outil puissant, cependant vous devez suivre certaines pratiques.
Bien que React soit extrêmement adaptable dans la façon exacte dont vous pouvez l'utiliser, l'adhésion à des techniques de détails vous aidera à obtenir l'un des meilleurs résultats de votre expérience.
Lorsque vous suivez ces idées, gardez à l'esprit votre certaine tâche et aussi vos objectifs, car diverses meilleures méthodes React peuvent être plus pertinentes dans différents contextes. Par exemple, une tâche avec une petite équipe et une étendue limitée peut ne pas avoir besoin du même degré de compagnie de dossier qu'un grand travail avec de nombreux groupes travaillant ensemble.
Abonnez-vous à notre e-newsletter
Quelles sont les meilleures pratiques pour React ?
8 meilleures pratiques React à suivre. Gardez la création de composants au minimum. Utilisez un linter. Le code doit être testable. DRY votre code. Utilisez des gestionnaires plus robustes pour gérer l'état de l'application, comme Redux. Utilisez les defaultProps et propTypes. Structure de fichier. Utilisez des composants basés sur des fonctions à état en commençant à utiliser React Hooks.
- Gardez la création de composants au minimum.
- Utilisez un linter.
- Le code doit être testable.
- DRY votre code.
- Utilisez des gestionnaires plus robustes pour gérer l'état des applications, comme Redux.
- Utilisez les defaultProps et les propTypes.
- Structure des fichiers.
- Utiliser des composants basés sur des fonctions à état en commençant à utiliser les React Hooks.
Quel est l'avenir de ReactJS ?
En dehors des tendances ci-dessus, de nombreuses raisons impliquent que ReactJS est potentiellement l'avenir du développement web. Par exemple ; ReactJS a dépassé jQuery et est devenu le framework web le plus utilisé par les développeurs de logiciels dans le monde entier à partir de 2021. ReactJS est le framework/la bibliothèque frontale la plus populaire en 2021.
Comment obtenir une année complète en React ?
Vous pourriez simplement ajouter une variable const today = new Date() ; puis à l'endroit où vous voulez qu'elle soit placée ajouter.
{aujourd'hui. getFullYear()}
pour tirer l'année en cours.
Quelle est la meilleure structure pour un projet React ?
3. Meilleures pratiques de structure de code React.
- Conventions de nommage.
- Évitez autant que possible l'utilisation de l'état.
- Ecrivez du code DRY.
- Essayez d'éviter les Div inutiles.
- Supprimez les commentaires inutiles du code.
- Utilisez la déstructuration pour obtenir des accessoires.
- Appliquez la fonction de propagation ES6.
- La règle de 3.
