12.2 Préparer son Projet TO-DO List Améliorée avec React

Préparer TO-DO List Améliorée React peut transformer votre gestion personnelle et professionnelle en ajoutant une nouvelle dimension d’organisation et d’efficacité. Ce tutoriel vise à guider les lecteurs à travers la création d’une application TO-DO list en utilisant React. Vous découvrirez comment faire bon usage des hooks et des composants pour développer une application réactive et facile à utiliser. Si vous désirez renforcer vos compétences, explorez d’autres sujets tels que “Qu’est-ce que React ? Introduction et Avantages” afin d’élargir votre compréhension.

Préparer une TO-DO List Améliorée avec React

En React, une TO-DO List est essentiellement une application pour suivre des tâches en attente. Étant donné la modularité de React, chaque tâche, ou “item”, peut être modélisée comme un composant dédié, ce qui permet une capacité de gestion précise et efficace.

Initialiser le Projet React

Pour commencer le développement de notre TO-DO List, nous allons créer un nouveau projet React. Le moyen le plus simple de le faire est d’utiliser create-react-app, qui génère une structure prête à l’emploi avec toutes les configurations nécessaires. Apprenez-en plus sur le démarrage d’un projet React en lisant ce guide d’initiation.

npx create-react-app todo-list-app

Créer le Composant TO-DO Item

Développons d’abord un composant pour représenter chaque élément présent sur notre TO-DO List. Ce composant recevra des propriétés telles que le nom de la tâche et un statut indiquant si elle est complétée ou non. Pour mieux comprendre la différence entre des composants par classe et des fonctions en React, consultez l’article sur les différences entre composants par classe et fonction.

import React, { useState } from 'react';

function TodoItem({ task, isCompleted, toggleTaskCompletion }) {
    return (
        

            
            
                {task}
            
        
    );
}

export default TodoItem;

Gérer les États avec des Hooks

Utiliser des hooks dans React permet d’améliorer et de manipuler facilement l’état des composants. Nous utiliserons useState pour gérer notre liste de tâches et useEffect pour toute mise à jour liée à des effets de bord. Pour découvrir leurs applications efficaces, explorez comment utiliser React Hooks.

import React, { useState, useEffect } from 'react';
import TodoItem from './TodoItem';

function TodoList() {
    const [tasks, setTasks] = useState([
        { task: 'Apprendre React', completed: false },
        { task: 'Construire un projet', completed: false },
    ]);

    const toggleTaskCompletion = index => {
        const newTasks = [...tasks];
        newTasks[index].completed = !newTasks[index].completed;
        setTasks(newTasks);
    };

    return (
        

            {tasks.map((taskObj, index) => (
                 toggleTaskCompletion(index)}
                />
            ))}
        
    );
}

export default TodoList;

Ajouter des Fonctions Avancées à la TO-DO List

Prenons notre projet plus loin en ajoutant la possibilité d’ajouter de nouvelles tâches et de supprimer les tâches existantes. Ces fonctionnalités rendent la liste plus dynamique et utile. Découvrez plus sur la manipulation dynamique des composants en explorant comment modifier dynamiquement des composants React.

import React, { useState } from 'react';
import TodoItem from './TodoItem';

function TodoList() {
    const [tasks, setTasks] = useState([
        { task: 'Apprendre React', completed: false },
        { task: 'Construire un projet', completed: false },
    ]);
    const [newTask, setNewTask] = useState('');

    const addTask = () => {
        if (newTask.trim() !== '') {
            setTasks([...tasks, { task: newTask, completed: false }]);
            setNewTask('');
        }
    };

    const removeTask = index => {
        const newTasks = tasks.filter((_, i) => i !== index);
        setTasks(newTasks);
    };

    return (
        

             setNewTask(e.target.value)} 
                placeholder="Nouvelle tâche" 
            />
            Ajouter
            {tasks.map((taskObj, index) => (
                 toggleTaskCompletion(index)}
                    removeTask={() => removeTask(index)}
                />
            ))}
        
    );
}

export default TodoList;

Conclusion

En suivant ce tutoriel, vous avez appris comment bâtir une TO-DO List simple mais fonctionnelle avec React. L’utilisation de React permet de gérer efficacement les états d’application et les rendus de composants dynamiques, rendant ainsi vos applications plus réactives et attrayantes pour les utilisateurs. Pour de plus amples informations ou pour explorer des cas plus avancés, envisagez de suivre un cours complet comme celui proposé sur wikiform.fr.