15 meilleures pratiques React à suivre en 2020

15 meilleures pratiques React à suivre en 2020

15 meilleures pratiques React à suivre en 2020
СОДЕРЖАНИЕ
02 июня 2020

Réagissez aux meilleures pratiques


Si vous êtes un développeur front-end engagé dans la création d’interfaces utilisateur hautement interactives, vous avez très probablement obtenu React dans votre boîte à outils. Tout en travaillant sur vos créations propulsées par React, vous devez faire attention à faire les choses en accord avec les meilleures pratiques de React. Cela vous aidera à mieux organiser votre code.

Comme vous le savez, React est une bibliothèque créée par Facebook et permet l’intégration avec de nombreux composants intéressants. En fait, tout développeur peut créer ses propres composants et les rendre accessibles à la communauté.

Aujourd’hui, nous abordons le sujet et vous montrons la plus fondamentale des meilleures pratiques React:

�� 1. Gardez les composants petits et spécifiques à la fonction

Comme nous le savons tous, avec React, il est possible d’avoir d’énormes composants qui exécutent un certain nombre de tâches. Mais une meilleure façon de concevoir des composants est de les garder petits, de sorte qu’un composant corresponde à une fonction. Idéalement, un seul composant doit restituer une partie spécifique de votre page ou modifier un comportement particulier. Cela présente de nombreux avantages:

  • Les composants spécifiques aux fonctions peuvent être autonomes, ce qui facilite les tests et la maintenance.
  • Chaque petit composant peut être réutilisé sur plusieurs projets.
  • Les composants exécutant des fonctions générales peuvent être mis à la disposition de la communauté.
  • Avec des composants plus petits, il est plus facile d’implémenter des optimisations de performances.
  • Il est plus facile de mettre à jour des composants plus petits.
  • Les composants plus gros doivent être plus performants et peuvent être difficiles à entretenir.

L’équilibre entre la création d’un composant concis et la création de plusieurs composants spécifiques à une fonction peut varier d’une organisation à l’autre. Après tout, vous pouvez avoir autant de composants que vous le souhaitez et les recombiner comme vous le souhaitez pour obtenir le même résultat final.

♻️ 2. La réutilisabilité est importante, donc gardez la création de nouveaux composants au minimum requis

En respectant la règle d’une fonction = un composant, vous pouvez améliorer la réutilisabilité des composants. Cela signifie que vous devez ignorer la création d’un nouveau composant pour une fonction s’il existe déjà un composant pour cette fonction.

En réutilisant des composants dans votre projet ou dans n’importe quel nombre de projets, non seulement vous obtiendrez une cohérence, mais vous contribuerez également à la communauté.

D’un autre côté, si un composant devient énorme, lourd et difficile à entretenir, il est préférable de le diviser en autant de composants plus petits que nécessaire.

Par exemple, vous pouvez même aller plus loin et créer un composant Button qui peut gérer des icônes. Ensuite, chaque fois que vous aurez besoin d’un bouton, vous aurez un composant à utiliser. Le rendre plus modulaire vous permettra de couvrir de nombreux cas avec le même morceau de code. Vous devez viser quelque part au milieu. Vos composants doivent être suffisamment abstraits, mais ne doivent pas être trop complexes.

La classe IconButton étend React.Component {
[…]
render () {
revenir (

);
}
}

�� 3. Consolider le code en double – SÉCHER votre code

Une règle courante pour tout le code est de le garder aussi bref et concis que possible.

Ce n’est pas différent ici non plus, car les meilleures pratiques de React vous demandent également de garder le code bref et précis. Pour ce faire, vous pouvez éviter la duplication – ne vous répétez pas (SEC).

Vous pouvez y parvenir en examinant le code pour les modèles et les similitudes. Si vous en trouvez, il est possible que vous répétiez du code et qu’il soit possible d’éliminer la duplication. Très probablement, un peu de réécriture peut le rendre plus concis.

Cela repose fortement sur le principe de réutilisabilité de React. Supposons que vous souhaitiez ajouter plusieurs boutons contenant des icônes, au lieu d’ajouter le balisage pour chaque bouton, vous pouvez simplement utiliser le composant IconButton que nous avons montré ci-dessus. Vous pouvez même aller plus loin en mappant tout dans un tableau.

boutons const = [‘facebook’, ‘twitter’, ‘youtube’];

revenir (

{
buttons.map ((bouton) => {
revenir (

);
})
}

);

�� 4. Mettez CSS en JavaScript

Lorsque vous commencez à travailler sur un projet, il est courant de conserver tous les styles CSS dans un seul fichier SCSS. L’utilisation d’un préfixe global empêche toute collision de noms potentielle. Cependant, lorsque votre projet s’intensifie, cette solution peut ne pas être réalisable.

Il existe de nombreuses bibliothèques qui vous permettent d’écrire du CSS dans JS. EmotionJS et Glamour sont les deux CSS les plus populaires dans les bibliothèques JS.

Voici un exemple d’utilisation d’EmotionJS dans votre projet. EmotionJS peut générer des fichiers CSS complets pour votre production. Tout d’abord, installez EmotionJS à l’aide de npm.

npm install –save @ emotion / core

Ensuite, vous devez importer EmotionJS dans votre application.

importer {jsx} depuis ‘@ emotion / core’

Vous pouvez définir les propriétés d’un élément comme indiqué dans l’extrait ci-dessous:

laissez Component = props => {
revenir (

)
}

Voici le lien vers l’intégralité documentation d’EmotionJS.

�� 5. Ne commentez que si nécessaire

Attachez des commentaires au code uniquement lorsque cela est nécessaire. Ceci est non seulement conforme aux meilleures pratiques de React, mais sert également deux objectifs à la fois:

  • Il gardera le code visuellement sans encombrement.
  • Vous éviterez un conflit potentiel entre le commentaire et le code, si vous modifiez le code ultérieurement..

�� 6. Nommez le composant après la fonction

C’est une bonne idée de nommer un composant d’après la fonction qu’il exécute afin qu’il soit facilement reconnaissable.

Par exemple, ProductTable – il transmet instantanément ce que fait le composant. D’autre part, si vous nommez le composant en fonction de la nécessité du code, il peut vous confondre à un moment ultérieur.

Autre exemple, il est préférable de nommer un composant Avatar afin qu’il puisse être utilisé n’importe où – pour les auteurs, les utilisateurs ou dans les commentaires. Au lieu de cela, si nous nommons le composant AuthorAvatar dans le contexte de son utilisation, nous limiterions l’utilité de ce composant.

De plus, nommer un composant après la fonction le rend plus utile à la communauté car il est plus susceptible d’être découvert.

�� 7. Utilisez des majuscules pour les noms des composants

Si, comme la plupart des gens, vous utilisez JSX (une extension JavaScript), les noms des composants que vous créez doivent commencer par des lettres majuscules. Par exemple, vous nommerez les composants comme SelectButton au lieu de selectbutton ou Menu au lieu de menu. Nous le faisons pour que JSX puisse les identifier différemment des balises HTML par défaut.

Les versions antérieures de React conservaient une liste de tous les noms intégrés pour les différencier des noms personnalisés. Mais comme la liste nécessitait une mise à jour constante, elle a été supprimée et les capitales sont devenues la norme.

Si JSX n’est pas la langue de votre choix, vous pouvez utiliser des lettres minuscules. Cependant, cela peut réduire la réutilisabilité des composants au-delà de votre projet.

�� 8. Attention aux autres conventions de dénomination

Lorsque vous travaillez avec React, vous utilisez généralement des fichiers JSX (extension JavaScript). Tout composant que vous créez pour React doit donc être nommé en cas Pascal ou en cas de chameau supérieur. Cela se traduit par des noms sans espaces et la mise en majuscule de la première lettre de chaque mot.

Si vous souhaitez créer une fonction qui soumet un formulaire, vous devez la nommer SubmitForm en majuscule, plutôt que submitForm, submit_form ou submit_form. Le cas de chameau supérieur est plus communément appelé cas Pascal. Voici un autre liste d’exemples des noms de variables et de fonctions dans le cas Pascal.

�� 9. Séparer les aspects avec état du rendu

Les composants de React peuvent être avec état ou sans état. Les composants avec état stockent des informations sur l’état du composant et fournissent le contexte nécessaire. En revanche, les composants sans état n’ont pas de mémoire et ne peuvent pas donner de contexte à d’autres parties de l’interface utilisateur. Ils reçoivent uniquement les accessoires (entrées) du composant parent et vous renvoient des éléments JSX. Ils sont évolutifs et réutilisables, et similaires à la fonction pure en JavaScript.

L’une des meilleures pratiques de React consiste à séparer votre logique de chargement de données avec état de votre logique sans état de rendu. Il est préférable d’avoir un composant avec état pour charger les données et un autre composant sans état pour afficher ces données. Cela réduit la complexité des composants.

Les dernières versions de React v16.8 ont une nouvelle fonctionnalité – React Hooks, qui écrit des composants liés aux fonctions avec état. Cela peut éventuellement éliminer le besoin de composants basés sur la classe.

Par exemple, votre application récupère certaines données lors du montage. Ce que vous voulez faire, c’est gérer les données dans le composant principal et passer la tâche de rendu complexe à un sous-composant comme accessoires.

importer RenderTable depuis ‘./RenderTable’;

La table de classe étend le composant {
state = {loading: true};

render () {
const {loading, tableData} = this.state;
chargement de retour? :;
}

componentDidMount () {
fetchTableData (). then (tableData => {
this.setState ({chargement: faux, tableData});
});
}
}

�� 10. Le code doit s’exécuter comme prévu et être testable

Vraiment, cette règle n’a besoin d’aucune explication. Le code que vous écrivez doit se comporter comme prévu et être testable facilement et rapidement. Il est recommandé de nommer vos fichiers de test identiques aux fichiers source avec un suffixe .test. Il sera alors facile de trouver les fichiers de test.

Vous pouvez utiliser JEST pour tester votre code React.

�� 11. Tous les fichiers liés à un composant doivent être dans un seul dossier

Conservez tous les fichiers relatifs à un composant dans un seul dossier, y compris les fichiers de style.

S’il y a un petit composant utilisé par un composant particulier uniquement, il est logique de conserver ces petits composants tous ensemble dans ce dossier de composants. La hiérarchie sera alors facile à comprendre – les gros composants ont leur propre dossier et toutes leurs petites pièces sont divisées en sous-dossiers. De cette façon, vous pouvez facilement extraire du code vers n’importe quel autre projet ou même modifier le code quand vous le souhaitez.

Par exemple, pour le composant Form, tous les éléments tels que les fichiers CSS, les icônes, les images, les tests et tout autre sous-composant relatif au formulaire doivent tous résider dans le même dossier. Si vous nommez judicieusement les fichiers et que les fichiers associés sont regroupés de manière logique, vous n’aurez aucune difficulté à les retrouver plus tard..

�� 12. Utilisez des outils comme Bit

L’une des meilleures pratiques React qui aide à organiser tous vos composants React est l’utilisation d’outils tels que Bit.

Ces outils aident à maintenir et à réutiliser le code. Au-delà de cela, il aide le code à devenir détectable et favorise la collaboration d’équipe dans la création de composants. En outre, le code peut être synchronisé entre les projets.

�� 13. Utiliser des bibliothèques d’extraits

Les extraits de code vous aident à suivre la syntaxe la meilleure et la plus récente. Ils aident également à garder votre code relativement exempt de bogues, c’est donc l’une des meilleures pratiques React à ne pas manquer.

Il existe de nombreuses bibliothèques d’extraits de code que vous pouvez utiliser, comme ES7 React, Redux, JS Snippets, etc..

✍️ 14. Ecrire des tests pour tout le code

Dans n’importe quel langage de programmation, des tests adéquats garantissent que tout nouveau code ajouté à votre projet s’intègre bien avec le code existant et ne casse pas les fonctionnalités existantes. C’est une bonne idée d’écrire des tests pour tout nouveau composant que vous créez. Comme bonne pratique, vous devez créer un répertoire __Test__ dans le répertoire de votre composant pour héberger tous les tests pertinents.

Vous pouvez largement diviser les tests dans React en deux parties: tester la fonctionnalité des composants à l’aide d’une application React et tester sur votre application complète une fois qu’elle s’affiche dans le navigateur. Vous pouvez utiliser des outils de test multi-navigateurs pour les tests de cette dernière catégorie.

Pour les premiers, vous pouvez utiliser un lanceur de test JavaScript, Plaisanter pour émuler le DOM HTML en utilisant jsdom pour tester les composants React. Alors qu’un test complètement précis n’est possible que dans un navigateur sur un appareil réel, Jest fournit une bonne approximation de l’environnement de test réel pendant la phase de développement de votre projet.

�� 15. Suivez les règles de peluchage, coupez les lignes trop longues

Le peluchage est un processus dans lequel nous exécutons un programme qui analyse le code pour les erreurs potentielles.

Surtout, nous l’utilisons pour des problèmes liés à la langue. Mais il peut également résoudre automatiquement de nombreux autres problèmes, en particulier le style de code. L’utilisation d’un linter dans votre code React permet de garder votre code relativement exempt d’erreurs et de bogues.

Derniers mots sur les meilleures pratiques de React

J’espère que cette liste des meilleures pratiques React vous aidera à mettre vos projets sur la bonne voie et à éviter tout problème potentiel plus tard..

Si vous avez des questions liées à React, n’hésitez pas à les soumettre dans les commentaires ci-dessous.

N’oubliez pas de rejoindre notre cours accéléré sur l’accélération de votre site WordPress. Avec quelques correctifs simples, vous pouvez réduire votre temps de chargement de 50 à 80%:

Exemples de code par Andrei Băicuș. Mises à jour de contenu par Shaumik Daityari

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    Adblock
    detector