Un guide pratique pour créer des composants réagissables

Bien que React soit l'un des cadres frontaux les plus populaires et les plus utilisés au monde, de nombreux développeurs ont encore du mal lorsqu'il s'agit de refactoriser le code pour une réutilisation améliorée. Si vous vous êtes déjà retrouvé à répéter le même extrait de code tout au long de votre application React, vous êtes arrivé au bon article.

Dans ce tutoriel, vous serez présenté aux trois indicateurs les plus courants qu'il est temps de construire un composant réutilisable. Ensuite, nous allons regarder quelques démos pratiques en construisant une disposition réutilisable et deux crochets réactifs passionnants.

Au moment où vous avez fini de lire, vous pourrez comprendre par vous-même quand il est approprié de créer des composants de réaction réutilisables, et comment pour le faire.

Cet article suppose une connaissance de base des crochets React et React. Si vous souhaitez brosser ces sujets, je vous recommande de consulter le guide «Getting Starting with React» et «Interduction to React Hooks».

Les plats clés

1. Identifier les opportunités de réutilisabilité: L'article présente trois signes communs qui indiquent la nécessité de créer des composants de réaction réutilisables: les styles CSS répétitifs pour les emballages, l'utilisation fréquente des auditeurs d'événements identiques et l'implémentation répétée des mêmes requêtes graphiques ou mutations. Ces directives aident les développeurs à reconnaître lorsqu'ils peuvent abstraction du code répétitif en composants réutilisables, améliorant la maintenabilité et l'évolutivité de leurs applications.

2. Démonstrations et implémentations pratiques: à travers des exemples détaillés, l'article propose des démonstrations pratiques sur la construction de composants réutilisables, y compris un composant de mise en page, des crochets React personnalisés pour la gestion des écouteurs d'événements et des crochets pour les requêtes GraphQL. Ces exemples servent de plan pour les développeurs à suivre, leur permettant d'appliquer des modèles similaires dans leurs propres projets pour rationaliser le développement et assurer la cohérence dans leurs applications.

3. Améliorer l'efficacité du code et l'évolutivité du projet: le tutoriel met l'accent sur les avantages de la refactorisation de la réutilisabilité, tels que la réduction de la duplication du code, la simplification de la maintenance du projet et l'amélioration de l'évolutivité. En adoptant les pratiques décrites, les développeurs peuvent créer des applications de réaction plus efficaces, propres et modulaires, conduisant finalement à des cycles de développement plus rapides et à des solutions logicielles plus robustes.

Les trois principaux indicateurs d'un composant réagi réutilisable

Regardons d'abord quelques indications de quand vous voudrez peut-être le faire.

Création répétitive des emballages avec le même style CSS

Mon signe préféré de savoir quand créer un composant réutilisable est l'utilisation répétitive du même style CSS. Maintenant, vous pouvez penser: "Attendez une minute: pourquoi n'attribue-je pas simplement le même nom de classe aux éléments qui partagent le même style CSS?" Vous avez absolument raison. Ce n'est pas une bonne idée de créer des composants réutilisables chaque fois que certains éléments de différents composants partagent le même style. En fait, il peut introduire une complexité inutile. Vous devez donc vous demander une chose de plus: ces éléments couramment stylés emballages ?

sont-ils

Par exemple, considérez les pages de connexion et d'inscription suivantes:

<span>// Login.js
</span><span>import './common.css';
</span>
<span>function <span>Login</span>() {
</span>  <span>return (
</span>    <span><span><span><div</span> className<span>='wrapper'</span>></span>
</span><span>      <span><span><main</span>></span>
</span><span>        {...}
</span><span>      <span><span></main</span>></span>
</span><span>      <span><span><footer</span> className<span>='footer'</span>></span>
</span><span>        {...}
</span><span>      <span><span></footer</span>></span>
</span><span>    <span><span></div</span>></span>
</span>  <span>);
</span><span>}
</span>

<span>// SignUp.js
</span><span>import './common.css';
</span>
<span>function <span>Signup</span>() {
</span>  <span>return (
</span>    <span><span><span><div</span> className<span>='wrapper'</span>></span>
</span><span>      <span><span><main</span>></span>
</span><span>        {...}
</span><span>      <span><span></main</span>></span>
</span><span>      <span><span><footer</span> className<span>='footer'</span>></span>
</span><span>        {...}
</span><span>      <span><span></footer</span>></span>
</span><span>    <span><span></div</span>></span>
</span>  <span>);
</span><span>}
</span>

Les mêmes styles sont appliqués au conteneur (l'élément ) et au pied de page de chaque composant. Donc, dans ce cas, vous pouvez créer deux composants réutilisables - et - et leur transmettre des enfants comme un accessoire. Par exemple, le composant de connexion pourrait être refactorisé comme suit:

<span>// Login.js
</span><span>import <span>Footer</span> from "./Footer.js";
</span>
<span>function <span>Login</span>() {
</span>  <span>return (
</span>    <span><span><span><Wrapper</span> main<span>={{...}}</span> footer<span>={<span><span><Footer</span> /></span>}</span> /></span>
</span>  <span>);
</span><span>} 
</span>

En conséquence, vous n'avez plus besoin d'importer Common.css en plusieurs pages ou de créer les mêmes éléments

pour tout envelopper.

Utilisation répétitive des auditeurs d'événements

Pour attacher un écouteur d'événements à un élément, vous pouvez soit le gérer à l'intérieur de l'utilisation d'effet () comme ceci:

<span>// App.js
</span><span>import <span>{ useEffect }</span> from 'react';
</span>
<span>function <span>App</span>() {
</span>  <span>const handleKeydown = () => {
</span>    <span>alert('key is pressed.');
</span>  <span>}
</span>
  <span>useEffect(() => {
</span>    <span>document.addEventListener('keydown', handleKeydown);
</span>    <span>return () => {
</span>      <span>document.removeEventListener('keydown', handleKeydown);
</span>    <span>}
</span>  <span>}, []);
</span>
  <span>return (...);
</span><span>}
</span>

ou vous pouvez le faire directement à l'intérieur de votre JSX comme celui-ci, comme il est démontré dans le composant du bouton suivant:

<span>// Button.js
</span><span>function <span>Button</span>() {
</span>  <span>return (
</span>    <span><span><span><button</span> type<span>="button"</span> onClick<span>={() => { alert('Hi!')}}</span>></span>
</span><span>      Click me!
</span><span>    <span><span></button</span>></span>
</span>  <span>);
</span><span>};
</span>

Lorsque vous souhaitez ajouter un écouteur d'événements au document ou à la fenêtre, vous devez suivre la première méthode. Cependant, comme vous l'avez peut-être déjà réalisé, la première méthode nécessite plus de code avec l'utilisation d'UseEffct (), addEventListener () et devoveEventListener (). Ainsi, dans un tel cas, la création d'un crochet personnalisé permettra à vos composants d'être plus concis.

Il existe quatre scénarios possibles pour utiliser des auditeurs d'événements:

• Même écouteur d'événements, même gestionnaire d'événements
• Même écouteur d'événements, gestionnaire d'événements différents
• Écouteur d'événements différents, même gestionnaire d'événements
• Écouteur d'événements différents, différents gestionnaires d'événements

Dans le premier scénario, vous pouvez créer un crochet où l'écouteur d'événements et le gestionnaire d'événements sont définis. Considérez le crochet suivant:

<span>// useEventListener.js
</span><span>import <span>{ useEffect }</span> from 'react';
</span>
<span>export default function useKeydown() {
</span>  <span>const handleKeydown = () => {
</span>    <span>alert('key is pressed.');
</span>  <span>}
</span>
  <span>useEffect(() => {
</span>    <span>document.addEventListener('keydown', handleKeydown);
</span>    <span>return () => {
</span>      <span>document.removeEventListener('keydown', handleKeydown);
</span>    <span>}
</span>  <span>}, []);
</span><span>};
</span>

Vous pouvez ensuite utiliser ce crochet dans n'importe quel composant comme suit:

<span>// App.js
</span><span>import useKeydown from './useKeydown.js';
</span>
<span>function <span>App</span>() {
</span>  <span>useKeydown();
</span>  <span>return (...);
</span><span>};
</span>

Pour les trois autres scénarios, je recommande de créer un crochet qui reçoit un événement et une fonction de gestion d'événements comme accessoires. Par exemple, je passerai Keydown et HandleKeyDown en tant qu'accessoires à mon crochet personnalisé. Considérez le crochet suivant:

<span>// useEventListener.js
</span><span>import <span>{ useEffect }</span> from 'react';
</span>
<span>export default function useEventListener(<span>{ event, handler}</span> ) {
</span>  <span>useEffect(() => {
</span>    <span>document.addEventListener(event, props.handler);
</span>    <span>return () => {
</span>      <span>document.removeEventListener(event, props.handler);
</span>    <span>}
</span>  <span>}, []);
</span><span>};
</span>

Vous pouvez ensuite utiliser ce crochet dans n'importe quel composant comme suit:

<span>// Login.js
</span><span>import './common.css';
</span>
<span>function <span>Login</span>() {
</span>  <span>return (
</span>    <span><span><span><div</span> className<span>='wrapper'</span>></span>
</span><span>      <span><span><main</span>></span>
</span><span>        {...}
</span><span>      <span><span></main</span>></span>
</span><span>      <span><span><footer</span> className<span>='footer'</span>></span>
</span><span>        {...}
</span><span>      <span><span></footer</span>></span>
</span><span>    <span><span></div</span>></span>
</span>  <span>);
</span><span>}
</span>

Utilisation répétitive du même script graphique

Vous n'avez pas vraiment besoin de rechercher des signes lorsqu'il s'agit de rendre le code GraphQL réutilisable. Pour les applications complexes, les scripts GraphQL pour une requête ou une mutation occupent facilement 30 à 50 lignes de code car il existe de nombreux attributs à demander. Si vous utilisez le même script GraphQL plus d'une ou deux fois, je pense qu'il mérite son propre crochet personnalisé.

Considérez l'exemple suivant:

<span>// SignUp.js
</span><span>import './common.css';
</span>
<span>function <span>Signup</span>() {
</span>  <span>return (
</span>    <span><span><span><div</span> className<span>='wrapper'</span>></span>
</span><span>      <span><span><main</span>></span>
</span><span>        {...}
</span><span>      <span><span></main</span>></span>
</span><span>      <span><span><footer</span> className<span>='footer'</span>></span>
</span><span>        {...}
</span><span>      <span><span></footer</span>></span>
</span><span>    <span><span></div</span>></span>
</span>  <span>);
</span><span>}
</span>

Au lieu de répéter ce code dans chaque page qui demande des publications à l'arrière, vous devez créer un crochet React pour cette API particulière:

<span>// Login.js
</span><span>import <span>Footer</span> from "./Footer.js";
</span>
<span>function <span>Login</span>() {
</span>  <span>return (
</span>    <span><span><span><Wrapper</span> main<span>={{...}}</span> footer<span>={<span><span><Footer</span> /></span>}</span> /></span>
</span>  <span>);
</span><span>} 
</span>

Construire trois composants de réaction réutilisables

Maintenant que nous avons vu certains signes communs de quand pour créer un nouveau composant que vous pouvez partager tout au long de votre application React, mettons cette connaissance en pratique et construisons trois démos pratiques.

1. Composant de disposition

React est normalement utilisé pour créer des applications Web complexes. Cela signifie qu'un grand nombre de pages doivent être développées en réaction, et je doute que chaque page d'une application aura une disposition différente. Par exemple, une application Web composée de 30 pages utilise généralement moins de cinq dispositions différentes. Par conséquent, la construction d'une disposition flexible et réutilisable qui peut être utilisée dans de nombreuses pages différentes est essentielle. Cela vous fera économiser de très nombreuses lignes de code et par conséquent un temps énorme.

Considérons le composant fonctionnel de réact suivant:

<span>// App.js
</span><span>import <span>{ useEffect }</span> from 'react';
</span>
<span>function <span>App</span>() {
</span>  <span>const handleKeydown = () => {
</span>    <span>alert('key is pressed.');
</span>  <span>}
</span>
  <span>useEffect(() => {
</span>    <span>document.addEventListener('keydown', handleKeydown);
</span>    <span>return () => {
</span>      <span>document.removeEventListener('keydown', handleKeydown);
</span>    <span>}
</span>  <span>}, []);
</span>
  <span>return (...);
</span><span>}
</span>

Il s'agit d'une page Web typique qui a un , un et un . S'il y a 30 pages Web supplémentaires comme celle-ci, vous seriez facilement fatigué d'écrire à plusieurs reprises des balises HTML et d'appliquer le même style encore et encore.

Au lieu de cela, vous pouvez créer un composant de mise en page qui reçoit ,

et comme accessoires, comme dans le code suivant:

<span>// Button.js
</span><span>function <span>Button</span>() {
</span>  <span>return (
</span>    <span><span><span><button</span> type<span>="button"</span> onClick<span>={() => { alert('Hi!')}}</span>></span>
</span><span>      Click me!
</span><span>    <span><span></button</span>></span>
</span>  <span>);
</span><span>};
</span>

Ce composant ne nécessite pas et . Ainsi, vous pouvez utiliser cette même disposition pour les pages, qu'elles contiennent un en-tête ou un pied de page.

En utilisant ce composant de mise en page, vous pouvez transformer votre page de flux en un bloc de code beaucoup plus sophistiqué:

<span>// useEventListener.js
</span><span>import <span>{ useEffect }</span> from 'react';
</span>
<span>export default function useKeydown() {
</span>  <span>const handleKeydown = () => {
</span>    <span>alert('key is pressed.');
</span>  <span>}
</span>
  <span>useEffect(() => {
</span>    <span>document.addEventListener('keydown', handleKeydown);
</span>    <span>return () => {
</span>      <span>document.removeEventListener('keydown', handleKeydown);
</span>    <span>}
</span>  <span>}, []);
</span><span>};
</span>

Pro Astuce pour créer des dispositions avec des éléments collants

De nombreux développeurs ont tendance à utiliser la position: fixe ou position: absolue lorsqu'ils veulent coller un en-tête en haut de la fenêtre ou un pied de page en bas. Cependant, dans le cas des dispositions, vous devriez essayer d'éviter cela.

Étant donné que les éléments d'une mise en page seront les éléments parents des accessoires passés, vous voulez garder le style de vos éléments de mise en page aussi simple que possible - de sorte que ,

ou

sont stylisés comme prévu. Donc, je recommande d'appliquer la position: fixe et afficher: flexion sur l'élément le plus extérieur de votre disposition et régler le débordement-y: faites défiler vers l'élément .

Voici un exemple:

<span>// Login.js
</span><span>import './common.css';
</span>
<span>function <span>Login</span>() {
</span>  <span>return (
</span>    <span><span><span><div</span> className<span>='wrapper'</span>></span>
</span><span>      <span><span><main</span>></span>
</span><span>        {...}
</span><span>      <span><span></main</span>></span>
</span><span>      <span><span><footer</span> className<span>='footer'</span>></span>
</span><span>        {...}
</span><span>      <span><span></footer</span>></span>
</span><span>    <span><span></div</span>></span>
</span>  <span>);
</span><span>}
</span>

Maintenant, appliquons quelques styles à votre page de flux et voyons ce que vous avez construit:

<span>// SignUp.js
</span><span>import './common.css';
</span>
<span>function <span>Signup</span>() {
</span>  <span>return (
</span>    <span><span><span><div</span> className<span>='wrapper'</span>></span>
</span><span>      <span><span><main</span>></span>
</span><span>        {...}
</span><span>      <span><span></main</span>></span>
</span><span>      <span><span><footer</span> className<span>='footer'</span>></span>
</span><span>        {...}
</span><span>      <span><span></footer</span>></span>
</span><span>    <span><span></div</span>></span>
</span>  <span>);
</span><span>}
</span>

En-tête collant et démonstration de pied de page

et voici le code en action.

C'est à quoi il ressemble sur les écrans de bureau.

C'est à quoi il ressemble sur les écrans mobiles.

Cette disposition fonctionne également comme prévu sur les appareils iOS! Si vous ne le savez pas, iOS est connu pour avoir apporté des problèmes inattendus liés à la position au développement d'applications Web.

2. Écouteur d'événements

Souvent, le même écouteur d'événements est utilisé plus d'une fois dans une application Web. Dans un tel cas, c'est une excellente idée de créer un crochet React personnalisé. Apprenons à procéder en développant un crochet UsingCrollSaver, qui enregistre la position de défilement de l'appareil d'un utilisateur sur une page - afin que l'utilisateur n'ait pas besoin de faire défiler à nouveau par le haut. Ce crochet sera utile pour une page Web dans laquelle un grand nombre d'éléments, tels que les publications et les commentaires, sont répertoriés; Imaginez les pages de flux de Facebook, Instagram et Twitter sans un économiseur de défilement.

Décomposons le code suivant:

<span>// Login.js
</span><span>import <span>Footer</span> from "./Footer.js";
</span>
<span>function <span>Login</span>() {
</span>  <span>return (
</span>    <span><span><span><Wrapper</span> main<span>={{...}}</span> footer<span>={<span><span><Footer</span> /></span>}</span> /></span>
</span>  <span>);
</span><span>} 
</span>

Vous pouvez voir que le crochet usecrollsaver doit recevoir deux éléments: ScrollabledIv, qui doit être un conteneur défileur tout comme le conteneur

dans votre mise en page ci-dessus, et Pageurl, qui sera utilisé comme identifiant d'une page ainsi que vous pouvez stocker des positions de défilement de plusieurs pages.

Étape 1: Enregistrez la position de défilement

Tout d'abord, vous devez lier un auditeur d'événements "Scroll" à votre conteneur de défilement:

<span>// App.js
</span><span>import <span>{ useEffect }</span> from 'react';
</span>
<span>function <span>App</span>() {
</span>  <span>const handleKeydown = () => {
</span>    <span>alert('key is pressed.');
</span>  <span>}
</span>
  <span>useEffect(() => {
</span>    <span>document.addEventListener('keydown', handleKeydown);
</span>    <span>return () => {
</span>      <span>document.removeEventListener('keydown', handleKeydown);
</span>    <span>}
</span>  <span>}, []);
</span>
  <span>return (...);
</span><span>}
</span>

Maintenant, chaque fois que Scrollablediv est défilé par un utilisateur, une fonction appelée manchecroll sera exécutée. Dans cette fonction, vous devez utiliser LocalStorage ou SessionStorage pour enregistrer la position de défilement. La différence est que les données de LocalStorage n'expirent pas, tandis que les données de SessionStorage sont effacées à la fin de la session de page. Vous pouvez utiliser setItem (id: string, valeur: string) pour enregistrer les données dans l'un ou l'autre stockage:

<span>// Login.js
</span><span>import './common.css';
</span>
<span>function <span>Login</span>() {
</span>  <span>return (
</span>    <span><span><span><div</span> className<span>='wrapper'</span>></span>
</span><span>      <span><span><main</span>></span>
</span><span>        {...}
</span><span>      <span><span></main</span>></span>
</span><span>      <span><span><footer</span> className<span>='footer'</span>></span>
</span><span>        {...}
</span><span>      <span><span></footer</span>></span>
</span><span>    <span><span></div</span>></span>
</span>  <span>);
</span><span>}
</span>

Étape 2: Restaurez la position de défilement

Lorsqu'un utilisateur revient sur une page Web, l'utilisateur doit être dirigé vers sa position de défilement précédente - s'il y en a. Ces données de position sont actuellement enregistrées dans SessionStorage, et vous devez les retirer et les utiliser. Vous pouvez utiliser GetItem (ID: String) pour obtenir des données à partir du stockage. Ensuite, il vous suffit de définir le toit de défilement du conteneur de défilement à cette valeur obtenue:

<span>// SignUp.js
</span><span>import './common.css';
</span>
<span>function <span>Signup</span>() {
</span>  <span>return (
</span>    <span><span><span><div</span> className<span>='wrapper'</span>></span>
</span><span>      <span><span><main</span>></span>
</span><span>        {...}
</span><span>      <span><span></main</span>></span>
</span><span>      <span><span><footer</span> className<span>='footer'</span>></span>
</span><span>        {...}
</span><span>      <span><span></footer</span>></span>
</span><span>    <span><span></div</span>></span>
</span>  <span>);
</span><span>}
</span>

Étape 3: Utiliser UseCrollsaver Hook dans n'importe quelle page Web

Maintenant que vous avez fini de créer votre crochet personnalisé, vous pouvez utiliser le crochet dans n'importe quelle page Web que vous souhaitez tant que vous passez les deux éléments requis au crochet: ScrollabledIv et Pageurl. Revenons à la mise en page.js et utilisons votre crochet là-dedans. Cela permettra à toute page Web qui utilise cette mise en page pour profiter de votre Scroll Saver:

<span>// Login.js
</span><span>import <span>Footer</span> from "./Footer.js";
</span>
<span>function <span>Login</span>() {
</span>  <span>return (
</span>    <span><span><span><Wrapper</span> main<span>={{...}}</span> footer<span>={<span><span><Footer</span> /></span>}</span> /></span>
</span>  <span>);
</span><span>} 
</span>

Demo Scrollsaver

Et voici le code exécuté dans un bac à sable. Essayez de faire défiler la page, puis en utilisant la flèche en bas à gauche et en coin pour recharger l'application.

vous vous retrouverez positionné à l'endroit où vous vous êtes arrêté!

3. Requête / mutation (spécifique à GraphQL)

Si vous aimez utiliser GraphQL avec React, comme moi, vous pouvez réduire encore plus votre base de code en créant un crochet React pour les requêtes ou mutations GraphQL.

Considérez l'exemple suivant pour exécuter une question GraphQL GetPosts ():

<span>// App.js
</span><span>import <span>{ useEffect }</span> from 'react';
</span>
<span>function <span>App</span>() {
</span>  <span>const handleKeydown = () => {
</span>    <span>alert('key is pressed.');
</span>  <span>}
</span>
  <span>useEffect(() => {
</span>    <span>document.addEventListener('keydown', handleKeydown);
</span>    <span>return () => {
</span>      <span>document.removeEventListener('keydown', handleKeydown);
</span>    <span>}
</span>  <span>}, []);
</span>
  <span>return (...);
</span><span>}
</span>

S'il y a de plus en plus d'attributs à demander à l'arrière, votre script GraphQL occupera de plus en plus d'espace. Ainsi, au lieu de répéter le script GraphQL et UseQuery chaque fois que vous avez besoin d'exécuter Query GetPosts (), vous pouvez créer le REACT HOCK suivant:

<span>// Button.js
</span><span>function <span>Button</span>() {
</span>  <span>return (
</span>    <span><span><span><button</span> type<span>="button"</span> onClick<span>={() => { alert('Hi!')}}</span>></span>
</span><span>      Click me!
</span><span>    <span><span></button</span>></span>
</span>  <span>);
</span><span>};
</span>

Ensuite, vous pouvez utiliser votre crochet usegetPosts () comme suit:

<span>// useEventListener.js
</span><span>import <span>{ useEffect }</span> from 'react';
</span>
<span>export default function useKeydown() {
</span>  <span>const handleKeydown = () => {
</span>    <span>alert('key is pressed.');
</span>  <span>}
</span>
  <span>useEffect(() => {
</span>    <span>document.addEventListener('keydown', handleKeydown);
</span>    <span>return () => {
</span>      <span>document.removeEventListener('keydown', handleKeydown);
</span>    <span>}
</span>  <span>}, []);
</span><span>};
</span>

Conclusion

Dans cet article, vous avez appris les trois indicateurs les plus courants d'un composant réutilisable et les trois cas d'utilisation les plus populaires. Maintenant, vous avez la connaissance de quand pour créer un composant de réaction réutilisable et comment faire si facilement et professionnellement. Vous vous retrouverez bientôt à apprécier les lignes de code de refactorisation dans un composant ou un crochet réutilisable sophistiqué. En utilisant ces techniques de refactorisation, notre équipe de développement de Clay a pu réduire notre base de code à une taille gérable. J'espère que vous pouvez aussi!

FAQ sur la création de composants de réaction réutilisables

Que sont les composants réutilisables dans react.js?

Les composants réutilisables de React.js sont des éléments de construction fondamentaux qui encapsulent des fonctionnalités spécifiques d'interface utilisateur (UI), ce qui permet de construire des applications de manière modulaire et efficace. Ces composants sont conçus pour être utilisés tout au long de votre application ou même dans différents projets, offrant un niveau de réutilisabilité du code qui simplifie considérablement le développement. Ils promeuvent une séparation claire des préoccupations en encapsulant leur logique et leur rendu, garantissant que leurs détails de mise en œuvre interne restent cachés au reste de la demande. Cela améliore non seulement l'organisation et la maintenabilité du code, mais permet également aux développeurs de travailler plus en collaboration en partageant et en réutilisant des composants entre les équipes et les projets.
L'un des principaux avantages des composants réutilisables est leur capacité à maintenir la cohérence dans l'interface utilisateur. En utilisant les mêmes composants dans différentes parties de l'application, vous pouvez assurer un aspect et une sensation uniformes, adhérant aux directives de conception et créant une expérience utilisateur plus poli. Ces composants sont paramétrés via des accessoires, permettant la personnalisation et l'adaptation à divers cas d'utilisation. Cette fonction de paramétrisation fournit un équilibre entre la cohérence et la flexibilité, donnant aux développeurs la puissance du comportement et de l'apparence des composants affiner en fonction des exigences spécifiques de chaque fonction ou page d'application. processus. Les composants isolés et encapsulés sont plus faciles à tester, et vous pouvez créer des tests unitaires pour vérifier leur exactitude et leur fonctionnalité. En incorporant des composants réutilisables dans vos applications React, vous pouvez établir une base de code maintenable, modulaire et cohérente, favorisant finalement l'efficacité de développement et améliorant la qualité globale de vos interfaces utilisateur.

Qu'est-ce qu'un exemple de composant réutilisable dans React?

Un exemple courant d'un composant réutilisable dans React est un composant «bouton». Les boutons sont une partie fondamentale des interfaces utilisateur et sont utilisés dans les applications pour diverses interactions. La création d'un composant de bouton réutilisable dans React vous permet de maintenir un aspect et un comportement cohérents tout en réduisant la duplication de code. Voici un exemple simple d'un composant de bouton réutilisable:

Importer réagir à partir de 'react';

const Button = ({label, onclick, style}) => {
return ( style = {style}
onClick = {onClick}
>
{label}
Button>
);
};

Le bouton d'exportation par défaut;

Dans cet exemple, le composant de bouton est construit comme un composant fonctionnel qui prend trois accessoires de clé: «Étiquette» pour le texte affiché sur le bouton, «onClick» pour Le gestionnaire d'événements de clic et un accessoire «style» en option pour personnaliser l'apparence du bouton. Ce composant résume la structure et le comportement HTML du bouton, ce qui le rend facilement réutilisable tout au long de l'application sans avoir besoin de dupliquer le code.
L'utilisation de ce composant bouton présente sa réutilisation et sa flexibilité. Dans le composant parent (dans ce cas, «App»), vous pouvez transmettre un texte d'étiquette spécifique, cliquer sur les fonctions de traitement des événements et les préférences de style pour créer différents boutons avec des fins et des apparences variables. En utilisant de tels composants réutilisables, vous maintenez un style d'interface utilisateur unifié et améliorez la maintenabilité du code. Ces composants peuvent être étendus au-delà des boutons pour englober des éléments d'interface utilisateur plus complexes, tels que les champs d'entrée, les cartes ou les barres de navigation, résultant en une application de réact modulaire et maintenable. Les composants réutilisables accélèrent non seulement le développement, mais conduisent également à une interface plus cohérente et conviviale qui adhère aux directives de conception et aux meilleures pratiques.

Comment créer des composants réutilisables dans React?

La création de composants réutilisables dans React.js est une pratique fondamentale pour construire des applications modulaires et maintenables. Le processus commence par un plan clair, où vous identifiez l'élément de fonctionnalité ou d'interface utilisateur spécifique (UI) que vous souhaitez encapsuler dans le composant. Une fois que vous avez défini l'objectif du composant, vous créez un nouveau fichier JavaScript / JSX dans votre projet React. C'est une bonne pratique de nommer le fichier en commençant par une lettre majuscule, adhérant aux conventions de dénomination de React.
Dans ce nouveau fichier de composant, vous définissez le comportement de votre composant et la logique de rendu de votre composant. Les composants peuvent être fonctionnels ou basés sur la classe, selon vos besoins. Lorsque vous parammerez votre composant, vous acceptez les accessoires comme entrées, ce qui vous permet de personnaliser son apparence et son comportement. La définition des types d'accessoires à l'aide de propypes ou de typeScript assure la sécurité et la clarté du type, ce qui facilite la compréhension de la façon dont le composant doit être utilisé. Une fois votre composant construit, il est prêt à l'emploi dans d'autres parties de votre application. Vous pouvez l'importer et l'intégrer, transmettant des accessoires spécifiques pour configurer son comportement pour chaque cas d'utilisation.
Le résultat est une base de code plus organisée qui encourage la réutilisation du code et maintient un style d'interface utilisateur cohérent. Les composants réutilisables peuvent être facilement intégrés dans différentes parties de votre application, améliorer l'efficacité du développement et contribuer à une interface utilisateur conviviale et visuellement cohérente.

Quels sont les avantages des composants réutilisables dans React?

Les composants réutilisables de React offrent de nombreux avantages qui améliorent considérablement le processus de développement et la qualité des applications. Ils favorisent la modularité en décomposant les interfaces utilisateur complexes en blocs de construction plus petits et autonomes, ce qui rend les bases de code plus organisées et maintenables. Ces composants se concentrent sur des fonctionnalités spécifiques ou des éléments d'interface utilisateur, permettant aux développeurs de les gérer et de les mettre à jour indépendamment, ce qui réduit le risque d'effets secondaires involontaires et rationalise le processus de développement.
Le principal avantage des composants réutilisables est leur réutilisabilité, ce qui fait gagner du temps et effort. Vous pouvez utiliser le même composant dans différentes parties de votre application ou sur différents projets, éliminant la nécessité de réécrire un code similaire. Cela accélère non seulement le développement, mais assure également une interface utilisateur cohérente. La cohérence est un autre avantage essentiel. En utilisant le même composant pour des éléments d'interface utilisateur spécifiques, vous maintenez un aspect et un comportement uniformes, en adhérant aux directives de conception et en améliorant l'expérience utilisateur.
De plus, les composants réutilisables sont hautement personnalisables. Ils acceptent les accessoires, qui permettent aux développeurs d'affiner leur comportement et leur apparence pour s'adapter à différents cas d'utilisation. Cette paramétrisation améliore la flexibilité et la polyvalence de vos composants. Lorsque des problèmes surviennent, ces composants isolés sont plus faciles à tester et à déboguer, permettant une résolution efficace de problèmes. En outre, en partageant et en réutilisant des composants dans les projets, les équipes peuvent collaborer plus efficacement, maintenir un style d'interface utilisateur unifié et assurer la cohérence du code, qui est essentielle pour les efforts de développement à grande échelle et à long terme. En résumé, les composants réutilisables du développement de la réaction rationalisent, encouragent la réutilisabilité du code, maintiennent la cohérence de l'interface utilisateur et offrent une personnalisation, conduisant finalement à des applications plus efficaces et de haute qualité.

Qu'est-ce qui fait un bon composant réutilisable dans React?

Une composante réutilisable bien conçue dans React présente plusieurs caractéristiques cruciales. D'abord et avant tout, la réutilisabilité est l'attribut de base. Ces composants doivent être créés avec l'intention d'être utilisés dans différentes parties de votre application ou même dans des projets distincts. Pour y parvenir, ils doivent être très paramétrés, permettant aux développeurs de personnaliser leur apparence et leur comportement à travers des accessoires. Cette polyvalence est un aspect fondamental de ce qui rend un composant vraiment réutilisable.
L'encapsulation est tout aussi importante. Les composants réutilisables doivent résumer leur logique interne et leur rendu, en protégeant les détails d'implémentation du reste de l'application. Cette séparation des préoccupations conduit à un code plus propre et plus modulaire et simplifie l'intégration.
La modularité est un autre attribut clé. Les bons composants réutilisables devraient avoir un objectif singulier, en se concentrant sur une fonctionnalité spécifique ou un élément d'interface utilisateur particulier. Cette conception modulaire améliore la maintenabilité du code et l'efficacité de débogage. De plus, la facilité de test est vitale. Les composants isolés sont plus faciles à tester, favorisant la création d'un code robuste et fiable.
Enfin, ces composants devraient maintenir une API claire, spécifiant les accessoires qu'ils acceptent et leurs objectifs prévus. Cette clarté aide d'autres développeurs à comprendre comment utiliser efficacement le composant. En contribuant à une interface utilisateur cohérente lorsque le même composant est utilisé pour des éléments d'interface utilisateur spécifiques, ils garantissent une application cohérente et conviviale. En substance, un bon composant réutilisable est reconfigurable, encapsulé, modulaire, facilement testable et contribue à la maintenabilité du code et à la cohérence de l'interface utilisateur.

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!