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 Diminuer le 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. Props : 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. Hooks : 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 hook useState() .

Étape 1 : Configuration du projet

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

npx create-react-app react-counter-app

Cela créera une nouvelle application de réaction, prête pour que vous commenciez à construire 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 start

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 fichier src/App.js 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 :

import React, { useState } from "react";


function App() {
  const [count, setCount] = useState(0);
  let incrementCount = () => {
 // To add later
  };
  let decrementCount = () => {
 // To add later
  };
  let resetCount = () => {
  // To add later
  }

export default App;

La première instruction importe le crochet useState à partir du module de réaction . Utilisez-le pour créer l’ état de comptage et l’initialiser à 0. Vous pouvez modifier la valeur du comptage à l’aide de la fonction setCount .

Vous utiliserez les fonctions incrementCount , decrementCount et resetCount plus tard 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, le bouton d’incrémentation et le bouton de réinitialisation. Ajoutez le code suivant dans la div des boutons :

<Button title={"Decrement"} action={decrementCount} />
<Button title={"Increment"} action={incrementCount} />
<Button title={"Reset"} action={resetCount} />

Lorsque vous cliquez sur ces boutons, les fonctions decrementCount , incrementCount et resetCount s’exécutent. Notez que vous transmettez les accessoires de titre et d’action du composant App parent au composant Button enfant .

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

let incrementCount = () => {
  setCount(count + 1);
};


let decrementCount = () => {
  setCount(count - 1);
};

let resetCount = () => {
  setCount(0);
}

La fonction setCount mettra à jour l’état du compteur .

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

Ajoutez le code suivant dans le fichier components/Button.js :

import React from "react";


function Button(props) {
    let { action, title } = props;
    return <button onClick={action}>{title}</button>;
}

export default Button;

Le composant Button reçoit des données via des props. 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 de la page App.js à l’aide du code suivant :

import Button from "./components/Botton";

Voici à quoi ressemblera le code final dans le fichier App.js :

import React, { useState } from "react";
import Button from "./components/Button";


function App() {
  const [count, setCount] = useState(0);

export default App;

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, utiliser la déstructuration d’objet pour les accessoires et suivre les conventions de dénomination.