Créer votre première Application React

Le guide essentiel pour démarrer avec React. Cet article va pas à pas vous permettre de créer une application dans React à partir de zéro, tout en vous familiarisant avec l’état, les accessoires et les composants et les hook (useState et useEffect).

Conditions préalables

Il y a quelques choses que vous devez savoir à l’avance avant de commencer à jouer avec React. Si vous n’avez jamais utilisé du JavaScript ou du DOM auparavant, par exemple, je me familiariserais avec ceux-ci avant d’essayer de m’attaquer à React.

Voici ce que je considère être les prérequis de React.

• Connaissance de base du HTML et du CSS
• Connaissance de base de Javscript
• Compréhension de base du DOM
• Connaissance de la syntaxe et des fonctionnalités ES6

Buts

• Découvrez les concepts React essentiels et les termes associés
• Créez une application React très simple qui illustre les concepts ci-dessus.
• Savoir utilisé les composant fonctionnel ainsi que les Hooks.

React c’est quoi ?

• React est une bibliothèque JavaScript — l’une des plus populaires,
• React est un projet open-source créé par Facebook.
• React est utilisé pour créer des interfaces utilisateur (UI) sur le frontend.
• React est la couche de vue d’une application MVC (Model View Controller)

L’un des aspects les plus importants de React est le fait que vous pouvez créer des composants , qui ressemblent à des éléments HTML personnalisés et réutilisables, pour créer rapidement et efficacement des interfaces utilisateur. React rationalise également la façon dont les données sont stockées et gérées, en utilisant l’ état et les accessoires .

Nous reviendrons sur tout cela et plus encore tout au long de l’article, alors commençons.

Vous allez commencez par créer un nouveau projet a l’aide de la commande suivante:

La commande ci-dessus vous permettra de créer un nouveau projet avec tous les éléments de base configurer, si vous voulez comprendre a quoi sert chaque fichier vous pouvez lire cet article.

Une fois l’installation terminée, accédez au répertoire nouvellement créé et démarrez le projet.

Les commandes ci-dessus installerons les différentes dépendances et une nouvelle fenêtre apparaîtra localhost:3000avec votre nouvelle application React.

JSX: JavaScript + XML

Avec React, nous allons utilisé ce qui ressemble à du HTML dans notre code React, mais ce n’est pas tout à fait du HTML. Il s’agit de JSX , qui signifie JavaScript XML.

Avec JSX, nous pouvons écrire ce qui ressemble à du HTML, et nous pouvons également créer et utiliser nos propres balises de type XML. Voici à quoi ressemble JSX assigné à une variable.

L’utilisation de JSX n’est pas obligatoire pour écrire React. Sous le capot, c’est en cours d’exécution createElement, qui prend la balise, l'objet contenant les propriétés et les enfants du composant et restitue les mêmes informations. Le code ci-dessous aura la même sortie que le JSX ci-dessus.

JSX est en fait plus proche de JavaScript, pas de HTML, il y a donc quelques différences clés à noter lors de son écriture.

• classNameest utilisé à la place de classpour ajouter des classes CSS, tout comme classun mot-clé réservé en JavaScript.
• Les propriétés et méthodes dans JSX sont camelCase — onclickdeviendront onClick.
• Les balises à fermeture automatique doivent se terminer par une barre oblique — par ex.<img />

Les expressions JavaScript peuvent également être incorporées dans JSX à l’aide d’accolades, y compris des variables, des fonctions et des propriétés.

JSX est plus facile à écrire et à comprendre que la création et l’ajout de nombreux éléments en JavaScript vanilla, et c’est l’une des raisons pour lesquelles les gens aiment tellement React.

React Developer Tools

Il existe une extension appelée React Developer Tools qui vous facilitera la vie lorsque vous travaillez avec React. Téléchargez React DevTools pour Chrome ou le navigateur sur lequel vous préférez travailler.

Après l’avoir installé, lorsque vous ouvrez DevTools, vous verrez un onglet pour React. Cliquez dessus et vous pourrez inspecter les composants au fur et à mesure qu’ils sont écrits. Vous pouvez toujours accéder à l’onglet Éléments pour voir la sortie réelle du DOM. Cela peut ne pas sembler être un gros problème maintenant, mais à mesure que l’application se complique, son utilisation deviendra de plus en plus nécessaire.

Composants

Lors de la création du projet plusieurs fichiers ont été générer parmi eux le composant App.js. Presque tout dans React est constitué de composants, qui peuvent être des composants de classe ou des composants fonctionnel.

Les différences évidentes sont dans la syntaxe et les indices sont dérivés de leurs noms dans la manière dont ils seront écrits. Ils rendent tous les deux JSX ( qui est la manière d’écrire HTML et JavaScript de React ), mais pour le composant de classe, vous définissez une classe qui étend la bibliothèque React.Component. De plus, le composant de classe utilise une méthode render ().

Composants de classe

Composant fonctionnel

L’autre type de composant dans React est le composant simple , qui est une fonction. Ce composant n’utilise pas le classmot - clé.

Il existe bien sûr plusieurs autre différence entre les deux types de composants tel que : la manière dont les accessoires sont transmis, la manière dont chaque composant gère l’état,…

Commençons alors la création de notre première application React

Dans la suite, nous allons créer une application CRUD simple. Il aura des utilisateurs et vous pourrez ajouter, mettre à jour ou supprimer des utilisateurs. Nous n’utiliserons aucune classe React, mais nous utiliserons à la place des Hooks d’état et des Hooks d’effet sur les composants fonctionnels.

Hooks

Les Hooks sont arrivés avec React 16.8. Ils vous permettent de bénéficier d’un état local et d’autres fonctionnalités de React sans avoir à écrire une classe. Il en existe plusieurs mais dans cet article nous allons en utiliser que deux comme énuméré ci-dessus. Si vous voulez savoir quels sont les autres et pourquoi ils ont été crée vous pouvez avoir plus d’info ici.

Nous allons commencer par supprimer les fichiers dont nous avons pas besoin tel que App.css, pour le fichier index.css, je viens de copier et coller le CSS de Primitive , un simple passe-partout CSS que j'ai créé, car le but de cette application est de travailler sur React et de ne pas se soucier du design. Ce passe-partout CSS ajoute simplement quelques valeurs par défaut et une grille simple pour que nous puissions commencer le prototypage.

Et dans App.js, nous allons remplacer son contenu par

Nous avons maintenant la configuration initiale et le squelette de l’application.

Configuration de la vue

La première chose que nous ferons est de créer des exemples de données et un tableau pour les afficher, pour la vue. Créer un nouveau répertoire appelé tablesdans src, et un fichier à l' intérieur appelé UserTable.js. Nous allons créer le squelette d'une table.

Maintenant, importez simplement le fichier et ajoutez le nouveau composant.

Apportons des données factices aléatoires et l’importation du hook useState depuis React.

Maintenant, nous allons transmettre les données au composant enfant ( Table) avec des propriétés, un peu de la façon dont vous pourriez transmettre des données à l'aide d' data-attributs. Nous pouvons appeler la propriété comme nous voulons, tant que ce n'est pas un mot-clé réservé, alors je vais y aller users. Les données que je traverse sont la userDatavariable, et je vais mettre des accolades autour d'elle car c'est une expression JavaScript.

Maintenant que les données sont transmises à Table, nous devons travailler pour y accéder de l'autre côté.

Nous avons parcouru le tableau de users reçu en paramètre grâce a la fonction map.

Nous aborderons les boutons d’édition et de suppression dans un instant. Maintenant que la vue de base est configurée, faisons fonctionner la fonctionnalité d’ajout.

Ajouter un nouvel utilisateur

Nous allons configurer le formulaire pour ajouter un nouvel utilisateur.

La toute première chose que nous pouvons faire est de créer la fonction réelle qui ajoutera le nouvel utilisateur à l’état. Nous avons la setUsersfonction automatiquement à partir de useState, c'est donc ce que nous allons utiliser pour mettre à jour l'état de l'utilisateur.

Puisque nous n’utilisons pas une véritable API et une base de données, qui aurait probablement un ID auto-incrémenté, je vais incrémenter manuellement l’ID du nouvel utilisateur. Cette fonction prendra un userobjet comme paramètre et les ajoutera au userstableau d'objets. Le ...userscode garantit que tous les utilisateurs précédents restent dans le tableau.

Nous allons créer un composant pour cela, donc je vais juste aller de l’avant et ajouter la référence au composant en haut, et insérer le composant sous l’en-tête “Nouvel utilisateur”. Nous pouvons passer le addUser()travers comme un accessoire. Assurez-vous de ne pas inclure les parenthèses lorsque nous le transmettons comme référence - <AddUserForm addUser={addUser} />, non <AddUserForm addUser={addUser()} />.

Nous devons maintenant créer un formulaire que vous pouvez utiliser pour ajouter le nouvel utilisateur. Créons un formssous - répertoire avec un fichier appelé à l'intérieur AddUserForm.js.

À l’heure actuelle, le formulaire est vide et vous ne pouvez pas y ajouter de valeurs en raison de nos chaînes de valeurs vides, et le bouton d’envoi ne fait rien.

Tout comme avant, nous voudrons créer un état, sauf que cet état sera juste temporaire, pour garder une trace de ce qui est actuellement dans le formulaire d’ajout d’utilisateur.

Je vais créer un état initial avec ces valeurs vides et définir l’état utilisateur sur les valeurs vides. Avoir l’état initial dans une variable est utile, car après avoir soumis le formulaire, nous pouvons le renvoyer à la valeur initiale vide.

Nous allons maintenant créer une fonction pour mettre à jour l’état dans le formulaire. eventest toujours transmis à n'importe quel onévénement dans le DOM, vous verrez donc cela comme le paramètre de la fonction. La déstructuration d'objets nous permettra d'obtenir facilement la name(clé) et valuele formulaire. Enfin, nous définirons l'utilisateur comme nous l'avons fait sur le Appcomposant, sauf que cette fois, nous utilisons des noms de propriétés calculés pour définir dynamiquement le nom (en utilisant [name]) et la valeur.

Maintenant, nous extrayons les valeurs de l’objet state et référençons notre fonction dans l’ onChangeévénement.

La dernière chose à faire est de renvoyer le formulaire au Appcomposant. Au fur et à mesure que nous avons transmis la fonction props, nous allons utiliser des accessoires pour accéder à la fonction. Je vais écrire une onSubmitfonction et nous empêcherons la soumission de formulaire par défaut de se déclencher. J'ai ajouté un petit peu de validation pour m'assurer que les valeurs vides ne peuvent pas être soumises, et j'ai envoyé l'utilisateur à la fonction d'ajout. Enfin, j'utilise le setter pour réinitialiser le formulaire à sa valeur initiale après une soumission réussie.

Heureusement, ce code est assez simple, car nous n’avons pas à nous soucier des appels d’API asynchrones.

Voici notre AddUserFormcomposant complet .

Cool.

Supprimer un utilisateur

La prochaine que nous aborderons est la suppression d’un utilisateur, qui est la fonctionnalité la plus simple à gérer.

Ci — dessous addUserà App.js, nous allons créer deleteUser, qui prendra l'ID de l'utilisateur et les filtrer du tableau utilisateur.

Nous transmettons cette fonction via des accessoires à UserTable.

Il ne nous UserTable.jsreste plus qu'à nous assurer que le bouton de suppression appelle cette fonction.

Vous pouvez maintenant supprimer certains ou tous les utilisateurs.

Mettre à jour un utilisateur

La dernière pièce du puzzle introduit la possibilité de mettre à jour les utilisateurs existants. Ce sera similaire à l’ajout d’un utilisateur, sauf que nous devrons être en mesure d’identifier l’utilisateur en cours de modification. Dans les composants de classe, nous utiliserions la componentDidUpdateméthode du cycle de vie pour y parvenir, mais nous allons maintenant utiliser un hook useEffect. Le hook useEffect est similaire componentDidMountet componentDidUpdatecombiné.

La façon dont nous allons structurer cela est lorsque l’action Modifier est sélectionnée pour un utilisateur, le formulaire “Nouvel utilisateur” deviendra un formulaire “Modifier l’utilisateur”, et il sera pré-rempli avec les données de l’utilisateur sélectionné. Vous pouvez soit annuler le mode d’édition, soit soumettre la modification, ce qui mettra à jour l’utilisateur sélectionné et quittera le mode d’édition.

Commençons. Dans App.js, la première chose que nous voudrons faire est de définir si le mode d'édition est activé ou non. Cela commencera par faux.

Étant donné que nous ne savons pas qui est en cours de modification jusqu’à ce qu’il soit sélectionné, nous allons créer un état vide initial pour le formulaire, comme nous l’avons fait avec le formulaire d’ajout.

Nous voulons un moyen de voir et de mettre à jour l’utilisateur actuel en cours de modification, nous allons donc appliquer cet utilisateur vide à un currentUserétat.

Lorsque Modifier est sélectionné sur un utilisateur, il doit activer le mode d’édition et définir l’utilisateur actuel, ce que nous ferons dans cette editRowfonction.

Maintenant, passez simplement cette fonction UserTablecomme nous l'avons fait avec deleteUser.

Là-dedans UserTable.js, nous envoyons l' userobjet.

Maintenant, nous avons toute la configuration — il y a un commutateur pour le mode d’édition et un bouton qui passera l’utilisateur actuel dans l’état tout en basculant le commutateur de mode d’édition.

Créons la fonction réelle qui sera appelée lorsque le formulaire d’édition est soumis. Contrairement à delete (qui filtre un utilisateur par ID) ou add (qui ajoute un utilisateur au tableau), la fonction de mise à jour doit mapper via le tableau et mettre à jour l’utilisateur qui correspond à l’ID transmis.

Cela signifie que nous prendrons deux paramètres — l’objet utilisateur mis à jour et l’id — et nous utiliserons une opération ternaire pour mapper les utilisateurs et trouver celui que nous voulons mettre à jour.

Nous avons juste besoin de créer le formulaire d’édition lui-même.

Créez forms/EditUserForm.js. La plupart seront les mêmes que le formulaire d'ajout. La seule différence jusqu'à présent est que nous allons définir l'état directement à partir des currentUseraccessoires via. Il existe également un bouton d'annulation qui désactivera simplement le mode d'édition.

Nous devons maintenant introduire le formulaire d’édition App.js, ainsi que créer une bascule pour afficher le formulaire d'ajout ou d'édition.

Tout d’abord, apportez le composant.

Créez ensuite la bascule. Nous utiliserons une opération ternaire pour vérifier si l’ editingétat est vrai ou non. Si c'est vrai, affichez le formulaire d'édition. Si faux, affichez le formulaire d'ajout. Assurez-vous de transmettre toutes les fonctions que nous avons créées au composant d'édition.

D’accord, donc à ce stade, cliquer sur le bouton Modifier devrait basculer le mode d’édition et vous devriez pouvoir mettre à jour un utilisateur. Mais avons-nous fini?

Utilisation du hook useEffect

Si vous jouez un peu avec cela, vous remarquerez un problème. Deux, en fait. Si vous commencez à modifier un utilisateur, puis essayez de passer à un autre utilisateur, rien ne se passera. Pourquoi? Eh bien, le composant est déjà ouvert, et bien que l’état du parent ait changé, il n’est pas enregistré jusqu’aux accessoires.

C’est là que le crochet d’effet entre en place. Nous voulons informer le EditUserFormcomposant que les accessoires ont changé, ce que nous aurions fait auparavant componentDidUpdate.

La première étape consiste à faire entrer useEffect.

Dans le Hook d’effet, nous créons une fonction de rappel qui met à jour l’ userétat avec le nouvel accessoire envoyé. Avant, nous devions comparer if (prevProps.currentUser !== this.state.currentUser), mais avec le crochet d'effet, nous pouvons simplement passer [props]pour lui faire savoir que nous regardons les accessoires.

Maintenant, si vous essayez de changer l’utilisateur que vous éditez, cela fonctionnera correctement!

J’ai dit qu’il y avait deux problèmes ici, et l’autre problème est que vous pouvez supprimer un utilisateur pendant qu’il est en cours de modification. Nous pouvons résoudre ce problème en ajoutant setEditing(false)à la deleteUserfonction dans App.js.

Et c’est tout. Nous avons une application CRUD complète utilisant des hooks React State et Effect.

Conclusion

Si vous vous êtes perdu n’importe où en cours de route, n’oubliez pas de consulter la démo et la source.

• Voir l’application de démonstration
• Voir la source

The Nothing 🔺