Comment créer une application de compteur simple dans React

React est l'une des bibliothèques JavaScript frontales les plus populaires. De nombreuses entreprises utilisent React pour développer leurs interfaces utilisateur et il est devenu très populaire parmi les développeurs.

Il est facile de créer un programme simple avec React, comme cette application de compteur de base. Commencer par un didacticiel simple vous aidera à comprendre certains des concepts de base mais importants de React.

Fonctionnalités de l'application Counter

Dans ce projet, vous allez développer une application de compteur avec les fonctionnalités suivantes :

1. Bouton d'augmentation du nombre: Cela augmentera le nombre de un.
2. Bouton de diminution du nombre: Cela diminuera le nombre de un.
3. Bouton de réinitialisation: Cela remettra le compteur à zéro.

Concepts de base de React

Avant d'aller de l'avant, vous devez comprendre certains de ces concepts de base dans React que vous utiliserez dans ce projet :

1. Composants: Les composants sont les éléments de base des applications React. Ils contiennent du code indépendant et réutilisable. À l'aide de composants, vous pouvez diviser l'interface utilisateur en parties distinctes. Vous pouvez ensuite réutiliser ces pièces et travailler avec elles indépendamment.
2. État: Dans React, vous pouvez utiliser un objet pour stocker des données représentant l'état d'un composant. Cela permet aux composants de gérer et de mettre à jour leurs propres données. L'état d'un composant détermine son rendu et son comportement.
3. Composants fonctionnels: Le composant fonctionnel de React est simplement une fonction JavaScript qui accepte les props comme argument et renvoie un élément React (JSX).
4. Accessoires: vous pouvez utiliser des props (abréviation de « propriétés ») pour transmettre des données d'un composant parent à un composant enfant. Les accessoires font partie intégrante de React et vous pouvez utiliser des accessoires pour effectuer plusieurs opérations dans React.
5. Crochets: Les React Hooks sont des fonctions intégrées qui vous permettent de gérer l'état et d'autres fonctionnalités de React comme les méthodes de cycle de vie à l'intérieur des composants fonctionnels. Ils peuvent également vous aider à écrire un code concis et clair. Vous verrez bientôt comment vous pouvez gérer l'état avec le useState() accrocher.

Le code utilisé dans ce projet est disponible dans un Référentiel GitHub et est libre d'utilisation sous la licence MIT.

Étape 1: Configuration du projet

Ouvrez votre terminal et exécutez la commande suivante pour commencer :

npx créer-réagir-app réagir-compteur-app

Cette volonté créer une nouvelle application de réaction, prêt à démarrer la construction de votre projet. Il générera une structure de système de fichiers avec plusieurs fichiers et dossiers.

Exécutez la commande suivante dans le terminal pour démarrer le serveur de développement :

npm commencer

Cette commande devrait ouvrir un nouvel onglet dans votre navigateur, pointant vers http://localhost: 3000. Toutes les modifications que vous apporterez au projet seront automatiquement mises à jour ici.

Étape 2: Création du squelette de l'application Counter

Ouvrez le src/App.js fichier et supprimez tout le code par défaut qui y est présent. Maintenant, créez un squelette de l'application en utilisant le code suivant :

importer Réagissez, { useState } depuis"réagir";
fonctionApplication() {
constante [count, setCount] = useState(0);
laisser nombreincrément = () => {
// A ajouter plus tard
 };
laisser decrementCount = () => {
// A ajouter plus tard
 };
laisser resetCount = () => {
// A ajouter plus tard
 }
retour (
<divnom du cours="application">
<p>Compte: {compte}p>
<divnom du cours="boutons">
div>
div>
);
}
exporterdéfaut application ;

La première instruction importe le useState crochet de la réagir module. Utilisez-le pour créer le compter état et l'initialiser à 0. Vous pouvez modifier la valeur du compter en utilisant le setCount fonction.

Vous utiliserez le nombre d'incréments, decrementCount, et resetCount fonctions ultérieures pour augmenter, diminuer et réinitialiser la valeur du compteur.

Vous remarquerez peut-être les accolades {} utilisées autour de la variable count dans le balisage. Cela permet essentiellement à l'analyseur JSX de savoir qu'il doit traiter le contenu à l'intérieur de ces accolades comme du JavaScript.

Étape 3: Ajout de la fonctionnalité à l'application Counter

Vous devez créer trois boutons pour implémenter la fonctionnalité de l'application de compteur: le bouton de décrémentation du compteur, le bouton d'incrémentation du décompte et le bouton de réinitialisation. Ajoutez le code suivant dans le boutons div :

<Boutontitre={"Décrémenter"} action={decrementCount} />
<Boutontitre={"Incrément"} action={incrementCount} />
<Boutontitre={"Réinitialiser"} action={resetCount} />

Lorsque vous cliquez sur ces boutons, le decrementCount, nombre d'incréments, et resetCount les fonctions seront exécutées. Notez que vous passez le titre et action accessoires du parent Application composante à l'enfant Bouton composant.

Mettez à jour ces fonctions dans le App.js fichier avec le code suivant :

laisser nombreincrément = () => {
 setCount (compte + 1);
};
laisser decrementCount = () => {
 setCount (compte - 1);
};
laisser resetCount = () => {
 setCount (0);
}

Le setCount la fonction mettra à jour l'état du compter.

Notez que vous n'avez pas encore créé le composant Button. Créer un nouveau Composants dossier dans le src répertoire, puis créez un nouveau fichier nommé Bouton.js. Il est recommandé de conserver tous les composants dans le même dossier.

Ajoutez le code suivant dans le composants/Button.js déposer:

importer Réagir depuis"réagir";
fonctionBouton(accessoires) {
laisser { action, titre } = accessoires ;
retour<boutonsur clic={action}>{titre}bouton>;
}
exporterdéfaut Bouton;

Le Bouton le composant reçoit des données via des accessoires. La fonction déstructure ensuite ces accessoires en variables distinctes, en les utilisant pour remplir le balisage qu'elle renvoie.

Le code réutilise ce composant trois fois pour créer les boutons d'incrémentation, de décrémentation et de réinitialisation.

Enfin, importez le composant Button en haut du App.js page en utilisant le code suivant :

importer Bouton depuis"./composants/Bouton";

Voici à quoi ressemblera le code final dans le App.js déposer:

importer Réagissez, { useState } depuis"réagir";
importer Bouton depuis"./composants/Bouton";
fonctionApplication() {
constante [count, setCount] = useState(0);
laisser nombreincrément = () => {
 setCount (compte + 1);
 };
laisser decrementCount = () => {
 setCount (compte - 1);
 };
laisser resetCount = () => {
 setCount (0);
 }
retour (
<divnom du cours="application">
<p>Compte: {compte}p>
<divnom du cours="boutons">
<Boutontitre={"Décrémenter"} action={decrementCount} />
<Boutontitre={"Incrément"} action={incrementCount} />
<Boutontitre={"Réinitialiser"} action={resetCount} />
div>
div>
 );
}
exporterdéfaut application ;

Suivez les meilleures pratiques de réaction

Vous pouvez écrire du code React de différentes manières, mais il est important de le structurer aussi proprement que possible. Cela vous permettra de le maintenir facilement et peut aider à améliorer les performances globales de votre application.

Vous pouvez suivre plusieurs pratiques React recommandées par la communauté React comme éviter le code répétitif, écrire des tests pour chaque composant React, en utilisant la déstructuration d'objets pour les accessoires et en suivant la dénomination conventions.