Pratiquez vos compétences React avec cet exemple d'application classique et facile à comprendre.

Apprendre une nouvelle technologie comme React peut être déroutant sans expérience pratique. En tant que développeur, la création de projets réels est l'un des moyens les plus efficaces de comprendre les concepts et les fonctionnalités.

Suivez le processus de création d'une simple liste de tâches avec React et améliorez votre compréhension des principes fondamentaux de React.

Conditions préalables à la création d'une liste de tâches

Avant de commencer ce projet, il y a plusieurs exigences. Vous devez avoir une compréhension de base des éléments suivants, HTML, CSS, JavaScript, ES6, et Réagissez. Vous devez avoir Node.js et npm, le gestionnaire de packages JavaScript. Vous avez également besoin d'un éditeur de code, comme Visual Studio Code.

Voici le CSS que ce projet utilisera :

/* styles.css */
.App {
famille de polices: sans empattement;
afficher: fléchir;
justifier-contenu: centre;
aligner les éléments





instagram viewer

: centre;
hauteur: 100vh;
}
.Faire {
Couleur de l'arrière plan: blé;
aligner le texte: centre;
largeur: 50%;
rembourrage: 20pixels;
boîte ombre: RVB(0, 0, 0, 0.24) 0pixels 3pixels 8pixels;
marge: auto;
}


ul {
type de style de liste: aucun;
rembourrage: 10pixels;
marge: 0;
}


bouton {
largeur: 70pixels;
hauteur: 35pixels;
Couleur de l'arrière plan: brun sable;
frontière: aucun;
taille de police: 15pixels;
poids de la police: 800;
rayon de bordure: 4pixels;
boîte ombre: RVB(0, 0, 0, 0.24) 0pixels 3pixels 8pixels;
}


.saisir {
frontière: aucun;
largeur: 340pixels;
hauteur: 35pixels;
rayon de bordure: 9pixels;
aligner le texte: centre;
boîte ombre: RVB(0, 0, 0, 0.24) 0pixels 3pixels 8pixels;
}


.Haut {
afficher: fléchir;
justifier-contenu: centre;
écart: 12pixels;
}


li {
afficher: fléchir;
justifier-contenu: espacer uniformément;
aligner les éléments: centre;
rembourrage: 10pixels;
}
li:avant {
contenu: "*";
marge droite: 5pixels;
}

1. Configurer l'environnement du projet

Cette étape comprend toutes les commandes et tous les fichiers nécessaires à la configuration du projet. Pour commencer, créez un nouveau projet React. Ouvrez un terminal et exécutez cette commande :

npx créer-réagir-app todo-list

Cela prend quelques minutes pour installer tous les fichiers nécessaires ainsi que les packages. Il crée une nouvelle application React nommée todo-list. Une fois que vous voyez quelque chose comme ça, vous êtes sur la bonne voie :

Accédez au répertoire de votre projet nouvellement créé à l'aide de cette commande :

cd liste de tâches

Exécutez votre projet localement avec cette commande :

début npm

Et puis visualisez le projet dans votre navigateur à http://localhost: 3000/.

Dans le dossier src de votre projet, il y a quelques fichiers dont vous n'avez pas besoin. Supprimez ces fichiers : App.css, App.test.js, logo.svg, reportWebVitals.js, setupTests.js.

Assurez-vous de rechercher les instructions d'importation dans les fichiers disponibles et supprimez toutes les références aux fichiers supprimés.

2. Créer un composant TodoList

C'est le composant dans lequel nous allons implémenter tous les codes nécessaires à la liste de tâches. Créez un fichier nommé "TodoList.js" dans votre dossier src. Ensuite, pour tester que tout fonctionne comme il se doit, ajoutez le code suivant :

importer Réagir depuis'réagir';
constante TodoList = () => {
retour (




Bonjour le monde </h2>
 </div>
 );
};


exporterdéfaut Liste de choses à faire;

Ouvrez votre fichier App.js, importez le composant TodoList et affichez-le dans le composant App. Cela ressemblera à ceci :

importer Réagir depuis'réagir';
importer'./styles.css'
importer Liste de choses à faire depuis'./Liste de choses à faire';
constante Application = () => {
retour (





 </div>
 );
};
exporterdéfaut application ;

Accédez à votre navigateur local sur lequel le localhost: 3000 est en cours d'exécution et vérifiez que "Hello World" est écrit en gras. Tout bon? A l'étape suivante.

3. Gérer l'entrée et le changement d'entrée

Cette étape vous permet de déclencher un événement lorsque vous saisissez une tâche dans la zone de saisie. Importez le crochet useState à partir de votre package React. useState est un crochet React qui vous permet de gérer efficacement l'état.

importer Réagissez, { useState } depuis'réagir';

Utilisez le crochet useState pour créer une variable d'état nommée "inputTask" avec une valeur initiale d'une chaîne vide. De plus, affectez la fonction "setInputTask" pour mettre à jour la valeur de "inputTask" en fonction de l'entrée de l'utilisateur.

constante [inputTask, setInputTask] = useState("");

Créez une fonction appelée "handleInputChange", en prenant un paramètre d'événement. Il doit mettre à jour l'état inputTask à l'aide de la fonction setInputTask. Accédez à la valeur de la cible de l'événement avec event.target.value. Cela s'exécutera chaque fois que la valeur du champ de saisie changera.

constante handleInputChange = (événement) => {
 setInputTask (événement.cible.valeur);
};

Renvoie quelques éléments JSX. Le premier est l'en-tête qui se lit "My Todo-List", vous pouvez choisir n'importe quel en-tête que vous aimez. Incluez quelques attributs à vos éléments d'entrée. taper="texte": Cela spécifie votre type d'entrée en tant que texte, valeur={inputTask}: cela lie la valeur du champ d'entrée à la variable d'état inputTask, garantissant qu'elle reflète la valeur actuelle.onChange={handleInputChange}: cela appelle la fonction handleInputChange lorsque la valeur du champ d'entrée change, mettant à jour l'état inputTask.

"Faire">
Ma liste de tâches</h1>
"Haut">
"saisir" taper="texte" valeur={inputTask}
 onChange={handleInputChange} placeholder="Saisir une tâche" />

Ensuite, créez un bouton qui ajoutera la tâche saisie à la liste.

À ce stade, voici à quoi ressemblera la sortie de votre navigateur.

4. Ajouter une fonctionnalité au bouton "AJOUTER"

Utilisez le useState hook pour créer une variable d'état nommée 'list' avec une valeur initiale d'un tableau vide. La variable 'setList' stocke le tableau des tâches en fonction de l'entrée de l'utilisateur.

constante [liste, setList] = useState([]);

Créez une fonction handleAddTodo qui s'exécutera lorsque l'utilisateur cliquera sur le bouton "AJOUTER" pour ajouter une nouvelle tâche. Il prend le paramètre todo, qui représente la nouvelle tâche entrée par l'utilisateur. Ensuite, créez un objet newTask avec un identifiant unique généré à l'aide de Math.random() et la propriété todo qui contient le texte d'entrée.

Ensuite, mettez à jour l'état de la liste en utilisant l'opérateur de propagation [… liste] pour créer un nouveau tableau avec les tâches existantes dans la liste. Ajoutez la newTask à la fin du tableau. Cela garantit que nous ne modifions pas le tableau d'état d'origine. Enfin, réinitialisez l'état inputTask sur une chaîne vide, en effaçant le champ de saisie lorsque l'utilisateur clique sur le bouton.

constante handleAddTodo = (faire) => {
constante nouvelleTâche = {
 identifiant: Mathématiques.aléatoire(),
 à faire: à faire
 };
 setList([...list, newTask]);
 setInputTask('');
};

Inclure le sur clic attribut à l'élément bouton avec le texte "AJOUTER". Lorsqu'il est cliqué, il déclenche le handleAddTodo fonction, qui ajoute une nouvelle tâche à l'état de la liste

À ce stade, la sortie de votre navigateur aura la même apparence, mais si vous cliquez sur le bouton "AJOUTER" après avoir saisi une tâche, le champ de saisie se videra. Si tout fonctionne bien, passez à l'étape suivante.

5. Ajouter un bouton Supprimer

Il s'agit de la dernière étape pour permettre aux utilisateurs de supprimer leur tâche s'ils ont fait une erreur ou ont terminé la tâche. Créez une fonction handleDeleteTodo qui agit comme un gestionnaire d'événements lorsque l'utilisateur clique sur le bouton "Supprimer" pour une tâche spécifique. Il prend l'identifiant de la tâche comme paramètre.

Dans la fonction, utilisez la méthode filter sur le tableau list pour créer un nouveau tableau newList qui exclut la tâche avec l'identifiant correspondant. La méthode de filtrage parcourt chaque élément du tableau de liste et renvoie un nouveau tableau contenant uniquement les éléments qui satisfont la condition donnée. Dans ce cas, vérifiez si l'ID de chaque tâche est égal à l'ID passé en paramètre. Mettez à jour l'état de la liste en appelant setList (newList), qui définit l'état sur le nouveau tableau filtré, supprimant ainsi la tâche avec l'identifiant correspondant de la liste.

constante handleDeleteTodo = (identifiant) => {
constante nouvelleListe = liste.filtre((faire) =>
 todo.id !== id
 );
 setList (nouvelleListe); 
};

Utilisez la méthode map pour itérer sur chaque élément du tableau de liste et renvoyer un nouveau tableau. Ensuite, créez un

  • élément pour représenter une tâche pour chaque objet todo dans le tableau de liste. Assurez-vous d'ajouter l'attribut key lors du rendu d'une liste d'éléments dans React. Cela aide React à identifier de manière unique chaque élément de la liste et à mettre à jour efficacement l'interface utilisateur lorsqu'elle change. Dans ce cas, définissez la clé sur l'ID de chaque objet todo pour garantir l'unicité.

    • Accédez à la propriété todo de chaque objet todo. enfin, créez un bouton qui, lorsqu'il est cliqué, déclenche la fonction handleDeleteTodo avec l'id de la tâche correspondante en paramètre, nous permettant de supprimer la tâche de la liste.

    <ul>
    { liste.map((faire) => (
    <linom du cours="tâche"clé={todo.id}>
     {todo.todo}
    <boutonsur clic={() => handleDeleteTodo (todo.id)}>Supprimerbouton>
    li>
    ))}
    ul>

    Voici à quoi devrait ressembler votre code final :

    importer Réagissez, { useState } depuis'réagir';
    constante TodoList = () => {
    constante [inputTask, setInputTask] = useState('');
    constante [liste, setList] = useState([]);
    

    constante handleAddTodo = () => {
    constante nouvelleTâche = {
     identifiant: Mathématiques.aléatoire(),
     todo: inputTask
     };
    

     setListe([...liste, nouvelle tâche]);
     setInputTask('');
     };
    

    constante handleDeleteTodo = (identifiant) => {
    constante nouvelleListe = liste.filtre((faire) => todo.id !== id);
     setList (nouvelleListe);
     };
    

    constante handleInputChange = (événement) => {
    setInputTask(événement.cible.valeur);
     };
    

    retour (
    <divnom du cours="Faire">
    

    Mon To-FaireListe

    

    <divnom du cours="Haut">
    <saisirnom du cours="saisir"taper="texte"valeur={inputTask}
     onChange={handleInputChange} placeholder="Saisir une tâche" />
    

    <boutonnom du cours="btn"sur clic={handleAddTodo}>AJOUTERbouton>
    div>
    

    <ul>
     { liste.map((faire) => (
    <linom du cours="tâche"clé={todo.id}>
     {todo.todo}
    <boutonsur clic={() => handleDeleteTodo (todo.id)}>
    Supprimer
    bouton>
    li>
     ))}
    ul>
    div>
     );
    };
    exporterdéfaut Liste de choses à faire;

    Voici comment sera votre sortie finale, les boutons d'ajout et de suppression fonctionnant comme prévu.

    Félicitations, vous avez créé une liste de tâches qui ajoute et supprime des tâches. Vous pouvez aller plus loin en ajoutant du style et plus de fonctionnalités.

    Utiliser des projets du monde réel pour apprendre à réagir

    La pratique peut être un moyen efficace d'apprendre. Il vous permet d'appliquer les concepts et les meilleures pratiques de React de manière pratique, renforçant ainsi votre compréhension du framework. Il y a des tonnes de projets là-bas, vous devriez avoir besoin de trouver les bons.