Reactjs Todo List App (Using Vite & Zustand)

Beim Erstellen einer ReactJS-Anwendung wird die effiziente Verwaltung des Status bei der Skalierung der App von entscheidender Bedeutung. Die integrierte Zustandsverwaltung von React eignet sich hervorragend für kleine Apps, für größere oder komplexere Anwendungen ist jedoch häufig eine externe Zustandsverwaltungsbibliothek erforderlich.
Zustand ist eine solche leichte, schnelle und minimalistische Zustandsverwaltungsbibliothek, die Ihnen helfen kann, globale Zustände in Ihrer React-Anwendung zu verwalten, ohne viel Komplexität hinzuzufügen.

In diesem Blog erfahren wir, wie man Zustand in einer einfachen Todo-Listen-App verwendet, die mit Vite erstellt wurde.

Hier ist die Funktionsweise des Projekts:

Was ist Zustand?

Zustand ist eine kleine, schnelle Zustandsverwaltungsbibliothek für React. Im Vergleich zu anderen Zustandsverwaltungsbibliotheken wie Redux bietet es eine einfachere API, wodurch es für kleine bis mittelgroße Anwendungen benutzerfreundlicher ist.

Warum Zustand?

• Einfachheit: Zustand bietet eine einfache und minimale API für die Arbeit mit dem Zustand.
• Leistung: Der Zustand löst nur erneute Renderings in Komponenten aus, die den spezifischen Status verwenden, der sich geändert hat.
• Kein Boilerplate: Im Gegensatz zu Redux erfordert Zustand keine Reduzierer, Aktionen oder Middleware, um den Zustand zu verwalten.

Erste Schritte mit Zustand und Vite

Schritt 1: Erstellen Sie ein neues Projekt mit Vite
Lassen Sie uns zunächst ein React-Projekt mit Vite einrichten, einem schnellen und modernen Build-Tool.

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

Folgen Sie dann den folgenden Schritten im Terminal:

Folgen Sie dann den folgenden Befehlen:

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

# Install dependencies
npm install

Vite hat jetzt eine Standard-React-App erstellt. Sie können die App ausführen mit:

npm run dev

Öffnen Sie http://localhost:5173 in Ihrem Browser, um zu sehen, wie Ihre neue Vite-App ausgeführt wird.

---

Schritt 2: Zustand installieren
Jetzt installieren wir Zustand, um den Status unserer Todo-Listen-App zu verwalten.

npm install zustand

---

Schritt 3: Bedingung für die Statusverwaltung einrichten

Erstellen Sie einen neuen Ordner namens „store“ in Ihrem src-Verzeichnis und fügen Sie darin eine Datei todoStore.js hinzu. Diese Datei enthält unseren Zustandsspeicher.

// 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: Fügt der Liste eine neue Aufgabe hinzu.
• RemoveTodo: Entfernt eine Aufgabe anhand ihrer eindeutigen ID.
• toggleTodo: Schaltet den abgeschlossenen Status einer Aufgabe um.

---

Schritt 4: Erstellen Sie die Todo-Listenkomponente
Jetzt erstellen wir eine TodoList-Komponente, die mit dem Status von Zustand interagiert.

// 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;

Hier verwenden wir den useTodoStore-Hook für Folgendes:

• Rufen Sie die Liste der Aufgaben ab.
• Neue Aufgaben hinzufügen.
• Schaltet den Abschlussstatus einer Aufgabe um.
• Eine Aufgabe löschen

---

Schritt 5: TodoList-Komponente zur App hinzufügen
Jetzt müssen wir unsere TodoList-Komponente zur Hauptdatei App.jsx hinzufügen.

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

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

export default App;

---

Schritt 6: Styling (optional)
Sie können Ihre App optional mit Ihrem bevorzugten CSS-Framework gestalten oder sogar Tailwind CSS oder Bootstrap installieren und verwenden.

Der Einfachheit halber fügen wir einige grundlegende Stile direkt in index.css hinzu.

/* 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;
}

---

Schritt 7: Führen Sie Ihre App aus
Führen Sie die App aus mit:

npm run dev

Sie sollten jetzt eine funktionierende Todo-Liste sehen, in der Sie Folgendes tun können:

• Neue Aufgaben hinzufügen.
• Markieren Sie Aufgaben als erledigt oder nicht erledigt, indem Sie darauf klicken.
• Aufgaben löschen.

Fazit:
In diesem Tutorial haben wir eine einfache Todo-Listen-App mit React und Zustand für die Statusverwaltung erstellt.

• Zustands Einfachheit und Leistung machen es zu einer großartigen Wahl für die Zustandsverwaltung in kleinen bis mittelgroßen Anwendungen.
• Im Vergleich zu anderen State-Management-Lösungen wie Redux ist weit weniger Standard erforderlich.
• Durch die Verwendung von Zustand können Sie sich auf den Aufbau Ihrer Anwendungslogik konzentrieren, ohne sich Gedanken über die Bewältigung unnötiger Komplexität machen zu müssen.

Das ist alles für diesen Blog! Seien Sie gespannt auf weitere Updates und erstellen Sie weiterhin tolle Apps! ?✨
Viel Spaß beim Codieren! ?

Das obige ist der detaillierte Inhalt vonReactjs Todo List App (Using Vite & Zustand). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!