Application Reactjs Todo List (utilisant Vite et Condition)

Lors de la création d'une application ReactJS, la gestion efficace de l'état devient cruciale à mesure que l'application évolue. La gestion d'état intégrée de React est idéale pour les petites applications, mais pour les applications plus grandes ou plus complexes, une bibliothèque de gestion d'état externe devient souvent nécessaire.
Zusstand est l'une de ces bibliothèques de gestion d'état légère, rapide et minimaliste qui peut vous aider à gérer les états globaux dans votre application React sans ajouter beaucoup de complexité.

Dans ce blog, nous apprendrons comment utiliser Zustand dans une simple application Todo List créée à l'aide de Vite.

Voici le fonctionnement du projet :

Qu'est-ce que Zustand ?

Zustand est une petite bibliothèque de gestion d'état rapide pour React. Il fournit une API plus simple par rapport à d'autres bibliothèques de gestion d'état comme Redux, ce qui la rend plus conviviale pour les applications de petite et moyenne taille.

Pourquoi Zustand ?

• Simplicité : Zustand fournit une API simple et minimale pour travailler avec l'état.
• Performance : Zustand déclenche uniquement les rendus dans les composants qui utilisent l'état spécifique qui a changé.
• Pas de passe-partout : Contrairement à Redux, Zustand ne nécessite pas de réducteurs, d'actions ou de middleware pour gérer l'état.

Premiers pas avec Zustand et Vite

Étape 1 : Créer un nouveau projet avec Vite
Tout d’abord, configurons un projet React à l’aide de Vite, qui est un outil de construction rapide et moderne.

# Create a new Vite project
npm create vite@latest todo-app-zustand --template react

Suivez ensuite les étapes ci-dessous dans le terminal :

Suivez ensuite les commandes ci-dessous :

# Move into the project directory
cd todo-app-zustand

# Install dependencies
npm install

Vite a maintenant créé une application React passe-partout. Vous pouvez exécuter l'application en utilisant :

npm run dev

Ouvrez http://localhost:5173 dans votre navigateur pour voir votre nouvelle application Vite en cours d'exécution.

---

Étape 2 : Installer Zustand
Maintenant, installons Zustand pour gérer l'état de notre application Todo list.

npm install zustand

---

Étape 3 : Configurer Zustand pour la gestion de l'État

Créez un nouveau dossier appelé store dans votre répertoire src et ajoutez-y un fichier todoStore.js. Ce fichier contiendra notre magasin Zustand.

// src/store/todoStore.js
import { create } from 'zustand';

const useTodoStore = create((set) => ({
  todos: [],

  // Add a new todo
  addTodo: (todo) =>
    set((state) => ({
      todos: [...state.todos, { id: Date.now(), text: todo, completed: false }],
    })),

  // Remove a todo by ID
  removeTodo: (id) =>
    set((state) => ({
      todos: state.todos.filter((todo) => todo.id !== id),
    })),

  // Toggle a todo's completion status
  toggleTodo: (id) =>
    set((state) => ({
      todos: state.todos.map((todo) =>
        todo.id === id ? { ...todo, completed: !todo.completed } : todo
      ),
    })),
}));

export default useTodoStore;

• addTodo : ajoute une nouvelle tâche à la liste.
• removeTodo : supprime une tâche par son identifiant unique.
• toggleTodo : bascule le statut terminé d'une tâche.

---

Étape 4 : Créer le composant de liste de tâches
Maintenant, nous allons créer un composant TodoList qui interagit avec l'état de Zustand.

// src/components/TodoList.jsx
import React, { useState } from 'react';
import useTodoStore from '../store/todoStore';

const TodoList = () => {
  const { todos, addTodo, removeTodo, toggleTodo } = useTodoStore();
  const [newTodo, setNewTodo] = useState('');

  const handleAddTodo = () => {
    if (newTodo.trim()) {
      addTodo(newTodo);
      setNewTodo(''); // Clear the input after adding
    }
  };

  return (
    <div>
      <h1>Todo List</h1>
      <input
        type="text"
        value={newTodo}
        onChange={(e) => setNewTodo(e.target.value)}
        placeholder="Add a new todo"
      />
      <button onClick={handleAddTodo}>Add</button>

      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>
            <span
              style={{
                textDecoration: todo.completed ? 'line-through' : 'none',
                cursor: 'pointer',
              }}
              onClick={() => toggleTodo(todo.id)}
            >
              {todo.text}
            </span>
            <button onClick={() => removeTodo(todo.id)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default TodoList;

Ici, nous utilisons le hook useTodoStore pour :

• Récupérer la liste des tâches.
• Ajouter de nouvelles tâches.
• Basculer l'état d'achèvement d'une tâche.
• Supprimer une tâche

---

Étape 5 : Ajouter le composant TodoList à l'application
Maintenant, nous devons ajouter notre composant TodoList au fichier principal App.jsx.

// src/App.jsx
import React from 'react';
import TodoList from './components/TodoList';

function App() {
  return (
    <div className="App">
      <TodoList />
    </div>
  );
}

export default App;

---

Étape 6 : Coiffage (facultatif)
Vous pouvez éventuellement styliser votre application en utilisant votre framework CSS préféré, ou même installer et utiliser Tailwind CSS ou Bootstrap.

Pour plus de simplicité, ajoutons quelques styles de base directement dans index.css.

/* src/index.css */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 20px;
  background-color: #f4f4f4;
}

h1 {
  text-align: center;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: flex;
  justify-content: space-between;
  background: #fff;
  margin: 10px 0;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

button {
  background: #ff4757;
  border: none;
  color: white;
  padding: 5px 10px;
  cursor: pointer;
}

input {
  margin-right: 10px;
  padding: 5px;
  width: 300px;
}

---

Étape 7 : Exécutez votre application
Exécutez l'application en utilisant :

npm run dev

Vous devriez maintenant voir une liste de tâches fonctionnelle où vous pouvez :

• Ajouter de nouvelles tâches.
• Marquez les tâches comme terminées ou inachevées en cliquant dessus.
• Supprimer les tâches.

Conclusion :
Dans ce tutoriel, nous avons construit une application simple Todo List en utilisant React et Zustand pour la gestion de l'état.

• La simplicité et les performances de Zustand en font un excellent choix pour gérer l’état dans les applications de petite et moyenne taille.
• Cela nécessite beaucoup moins de passe-partout par rapport à d'autres solutions de gestion d'état comme Redux.
• En utilisant Zustand, vous pouvez vous concentrer sur la construction de la logique de votre application sans vous soucier de la gestion d'une complexité inutile.

C'est tout pour ce blog ! Restez à l'écoute pour plus de mises à jour et continuez à créer des applications incroyables ! ?✨
Bon codage ! ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!