Penser en React

React peut changer votre façon de penser aux designs que vous regardez et aux applications que vous construisez. Lorsque vous construisez une interface utilisateur avec React, vous allez d'abord la décomposer en morceaux appeléscomposants. Ensuite, vous décrirez les différents états visuels pour chacun de vos composants. Enfin, vous connecterez vos composants ensemble pour que les données circulent entre eux. Dans ce tutoriel, nous vous guiderons à travers le processus de réflexion pour construire un tableau de données de produits filtrable avec React.

Commencer avec la maquette

Imaginez que vous avez déjà une API JSON et une maquette d'un designer.

L'API JSON renvoie des données qui ressemblent à ceci :

La maquette ressemble à ceci :

Pour implémenter une interface utilisateur en React, vous suivrez généralement les cinq mêmes étapes.

Étape 1 : Décomposer l'interface utilisateur en une hiérarchie de composants

Commencez par dessiner des boîtes autour de chaque composant et sous-composant dans la maquette et nommez-les. Si vous travaillez avec un designer, il a peut-être déjà nommé ces composants dans son outil de design. Demandez-lui !

Selon votre parcours, vous pouvez envisager de diviser un design en composants de différentes manières :

• Programmation—utilisez les mêmes techniques pour décider si vous devez créer une nouvelle fonction ou un nouvel objet. Une telle technique est laséparation des préoccupations, c'est-à-dire qu'un composant devrait idéalement ne s'occuper que d'une seule chose. S'il finit par grossir, il devrait être décomposé en sous-composants plus petits.
• CSS—pensez à ce pour quoi vous créeriez des sélecteurs de classe. (Cependant, les composants sont un peu moins granulaires.)
• Design—pensez à la façon dont vous organiseriez les couches du design.

Si votre JSON est bien structuré, vous constaterez souvent qu'il correspond naturellement à la structure de composants de votre interface utilisateur. C'est parce que les modèles d'interface utilisateur et de données ont souvent la même architecture d'information—c'est-à-dire la même forme. Séparez votre interface utilisateur en composants, où chaque composant correspond à une partie de votre modèle de données.

Il y a cinq composants sur cet écran :

1. FilterableProductTable(gris) contient toute l'application.
2. SearchBar(bleu) reçoit la saisie de l'utilisateur.
3. ProductTable(lavande) affiche et filtre la liste selon la saisie de l'utilisateur.
4. ProductCategoryRow(vert) affiche un en-tête pour chaque catégorie.
5. ProductRow(jaune) affiche une ligne pour chaque produit.

Si vous regardezProductTable(lavande), vous verrez que l'en-tête du tableau (contenant les étiquettes "Nom" et "Prix") n'est pas son propre composant. C'est une question de préférence, et vous pourriez choisir l'une ou l'autre approche. Pour cet exemple, il fait partie deProductTablecar il apparaît à l'intérieur de la liste deProductTable. Cependant, si cet en-tête devient complexe (par exemple, si vous ajoutez un tri), vous pouvez le déplacer dans son propre composantProductTableHeader.

Maintenant que vous avez identifié les composants dans la maquette, organisez-les en une hiérarchie. Les composants qui apparaissent à l'intérieur d'un autre composant dans la maquette doivent apparaître comme un enfant dans la hiérarchie :

• FilterableProductTable
  • SearchBar
  • ProductTable
    • ProductCategoryRow
    • ProductRow

Étape 2 : Construire une version statique en React

Maintenant que vous avez votre hiérarchie de composants, il est temps d'implémenter votre application. L'approche la plus simple est de construire une version qui affiche l'interface utilisateur à partir de votre modèle de données sans ajouter d'interactivité… pour l'instant ! Il est souvent plus facile de construire d'abord la version statique et d'ajouter l'interactivité plus tard. Construire une version statique nécessite beaucoup de saisie et peu de réflexion, mais ajouter de l'interactivité nécessite beaucoup de réflexion et peu de saisie.

Pour construire une version statique de votre application qui affiche votre modèle de données, vous voudrez construire descomposantsqui réutilisent d'autres composants et transmettent des données en utilisant desprops.Les props sont un moyen de transmettre des données du parent à l'enfant. (Si vous connaissez le concept d'état, n'utilisez pas du tout l'état pour construire cette version statique. L'état est réservé uniquement à l'interactivité, c'est-à-dire aux données qui changent avec le temps. Comme il s'agit d'une version statique de l'application, vous n'en avez pas besoin.)

Vous pouvez soit construire "de haut en bas" en commençant par construire les composants plus haut dans la hiérarchie (commeFilterableProductTable) soit "de bas en haut" en travaillant à partir des composants plus bas (commeProductRow). Dans des exemples plus simples, il est généralement plus facile d'aller de haut en bas, et sur des projets plus importants, il est plus facile d'aller de bas en haut.

(Si ce code vous semble intimidant, suivez d'abord leDémarrage rapide !)

Après avoir construit vos composants, vous aurez une bibliothèque de composants réutilisables qui affichent votre modèle de données. Comme il s'agit d'une application statique, les composants ne renverront que du JSX. Le composant au sommet de la hiérarchie (FilterableProductTable) prendra votre modèle de données comme prop. C'est ce qu'on appelle unflux de données unidirectionnelcar les données circulent du composant de niveau supérieur vers ceux en bas de l'arborescence.

Étape 3 : Trouver la représentation minimale mais complète de l'état de l'interface utilisateur

Pour rendre l'interface utilisateur interactive, vous devez permettre aux utilisateurs de modifier votre modèle de données sous-jacent. Vous utiliserez l'étatpour cela.

Considérez l'état comme l'ensemble minimal de données changeantes que votre application doit mémoriser. Le principe le plus important pour structurer l'état est de le garderDRY (Ne Vous Répétez Pas).Déterminez la représentation absolument minimale de l'état dont votre application a besoin et calculez tout le reste à la demande. Par exemple, si vous construisez une liste de courses, vous pouvez stocker les éléments sous forme de tableau dans l'état. Si vous souhaitez également afficher le nombre d'éléments dans la liste, ne stockez pas le nombre d'éléments comme une autre valeur d'état—lisez plutôt la longueur de votre tableau.

Maintenant, pensez à toutes les données de cette application exemple :

1. La liste originale des produits
2. Le texte de recherche que l'utilisateur a saisi
3. La valeur de la case à cocher
4. La liste filtrée des produits

Lesquelles de celles-ci sont des états ? Identifiez celles qui n'en sont pas :

• Est-ce qu'ilreste inchangédans le temps ? Si oui, ce n'est pas un état.
• Est-ce qu'il esttransmis par un parentvia les props ? Si oui, ce n'est pas un état.
• Pouvez-vous le calculerà partir de l'état ou des props existants dans votre composant ? Si oui, ildéfinitivementn'est pas un état !

Ce qui reste est probablement un état.

Passons-les en revue un par un à nouveau :

1. La liste originale des produits esttransmise comme prop, donc ce n'est pas un état.
2. Le texte de recherche semble être un état car il change dans le temps et ne peut être calculé à partir de rien.
3. La valeur de la case à cocher semble être un état car elle change dans le temps et ne peut être calculée à partir de rien.
4. La liste filtrée des produitsn'est pas un état car elle peut être calculéeen prenant la liste originale des produits et en la filtrant selon le texte de recherche et la valeur de la case à cocher.

Cela signifie que seul le texte de recherche et la valeur de la case à cocher sont des états ! Bien joué !

Étape 4 : Identifier où votre état doit résider

Après avoir identifié les données d'état minimales de votre application, vous devez identifier quel composant est responsable de la modification de cet état, ou qui en est lepropriétaire. Rappelez-vous : React utilise un flux de données unidirectionnel, transmettant les données vers le bas de la hiérarchie des composants, du parent à l'enfant. Il n'est pas toujours immédiatement clair quel composant devrait posséder quel état. Cela peut être difficile si vous êtes nouveau à ce concept, mais vous pouvez le comprendre en suivant ces étapes !

Pour chaque élément d'état dans votre application :

1. Identifieztousles composants qui affichent quelque chose en fonction de cet état.
2. Trouvez leur composant parent commun le plus proche — un composant situé au-dessus d'eux tous dans la hiérarchie.
3. Décidez où l'état doit résider :
   1. Souvent, vous pouvez placer l'état directement dans leur parent commun.
   2. Vous pouvez également placer l'état dans un composant situé au-dessus de leur parent commun.
   3. Si vous ne trouvez pas de composant pour lequel il est logique de posséder l'état, créez un nouveau composant uniquement pour contenir l'état et ajoutez-le quelque part dans la hiérarchie au-dessus du composant parent commun.

Dans l'étape précédente, vous avez trouvé deux éléments d'état dans cette application : le texte de recherche saisi et la valeur de la case à cocher. Dans cet exemple, ils apparaissent toujours ensemble, il est donc logique de les placer au même endroit.

Appliquons maintenant notre stratégie pour eux :

1. Identifier les composants qui utilisent l'état :
   • ProductTabledoit filtrer la liste des produits en fonction de cet état (texte de recherche et valeur de la case à cocher).
   • SearchBardoit afficher cet état (texte de recherche et valeur de la case à cocher).
2. Trouver leur parent commun :Le premier composant parent que les deux composants partagent estFilterableProductTable.
3. Décider où l'état réside: Nous garderons les valeurs d'état du texte de filtre et de la case cochée dansFilterableProductTable.

Ainsi, les valeurs d'état résideront dansFilterableProductTable.

Ajoutez l'état au composant avec leHook useState().Les Hooks sont des fonctions spéciales qui vous permettent de vous « connecter » à React. Ajoutez deux variables d'état en haut deFilterableProductTableet spécifiez leur état initial :

Ensuite, passezfilterTextetinStockOnly à ProductTableetSearchBaren tant que props :

Vous pouvez commencer à voir comment votre application se comportera. Modifiez la valeur initiale defilterText de useState('') à useState('fruit')dans le code du bac à sable ci-dessous. Vous verrez à la fois le texte de recherche saisi et le tableau se mettre à jour :

Notez que la modification du formulaire ne fonctionne pas encore. Il y a une erreur dans la console du bac à sable ci-dessus qui explique pourquoi :

Dans le bac à sable ci-dessus,ProductTableetSearchBarlisent les propsfilterTextetinStockOnlypour afficher le tableau, le champ de saisie et la case à cocher. Par exemple, voici commentSearchBarremplit la valeur du champ de saisie :

Cependant, vous n'avez pas encore ajouté de code pour répondre aux actions de l'utilisateur, comme la saisie. Ce sera votre dernière étape.

Étape 5 : Ajouter le flux de données inverse

Actuellement, votre application s'affiche correctement avec les props et l'état qui descendent dans la hiérarchie. Mais pour modifier l'état en fonction des saisies de l'utilisateur, vous devrez prendre en charge le flux de données dans l'autre sens : les composants de formulaire situés profondément dans la hiérarchie doivent mettre à jour l'état dansFilterableProductTable.

React rend ce flux de données explicite, mais cela nécessite un peu plus de saisie que la liaison de données bidirectionnelle. Si vous essayez de saisir du texte ou de cocher la case dans l'exemple ci-dessus, vous verrez que React ignore votre saisie. C'est intentionnel. En écrivant<input value={filterText} />, vous avez défini la propvaluede l'inputpour qu'elle soit toujours égale à l'étatfilterTexttransmis depuisFilterableProductTable. Comme l'étatfilterTextn'est jamais défini, le champ de saisie ne change jamais.

Vous voulez faire en sorte que chaque fois que l'utilisateur modifie les champs du formulaire, l'état se mette à jour pour refléter ces changements. L'état est détenu parFilterableProductTable, donc seul ce composant peut appelersetFilterTextetsetInStockOnly. Pour permettre àSearchBarde mettre à jour l'état deFilterableProductTable, vous devez passer ces fonctions vers le bas àSearchBar:

À l'intérieur deSearchBar, vous allez ajouter les gestionnaires d'événementsonChangeet définir l'état parent à partir de ceux-ci :

Maintenant, l'application fonctionne pleinement !

Vous pouvez tout apprendre sur la gestion des événements et la mise à jour de l'état dans lasection Ajouter de l'interactivité.

Où aller maintenant

Ceci était une très brève introduction à la réflexion sur la construction de composants et d'applications avec React. Vous pouvezdémarrer un projet Reactdès maintenant ouapprofondir toute la syntaxeutilisée dans ce tutoriel.