Apl Senarai Todo Reactjs (Menggunakan Vite & Condition)

Apabila membina aplikasi ReactJS, mengurus keadaan dengan cekap menjadi penting apabila aplikasi meningkat. Pengurusan keadaan terbina dalam React sangat bagus untuk apl kecil, tetapi untuk aplikasi yang lebih besar atau lebih kompleks, pustaka pengurusan negeri luaran selalunya diperlukan.
Zustand ialah satu pustaka pengurusan keadaan yang ringan, pantas dan minimalis yang boleh membantu anda mengurus keadaan global dalam aplikasi React anda tanpa menambahkan banyak kerumitan.

Dalam blog ini, kita akan belajar cara menggunakan Zustand dalam Apl Senarai Todo ringkas yang dibina menggunakan Vite.

Berikut ialah kerja projek:

Apa itu Zustand?

Zustand ialah perpustakaan pengurusan keadaan yang kecil dan pantas untuk React. Ia menyediakan API yang lebih mudah berbanding dengan perpustakaan pengurusan negeri lain seperti Redux, menjadikannya lebih mesra pengguna untuk aplikasi kecil hingga sederhana.

Kenapa Zustand?

• Kesederhanaan: Zustand menyediakan API yang ringkas dan minimum untuk berfungsi dengan keadaan.
• Prestasi: Zustand hanya mencetuskan pemaparan semula dalam komponen yang menggunakan keadaan khusus yang telah berubah.
• Tiada Boilerplate: Tidak seperti Redux, Zustand tidak memerlukan pengurang, tindakan atau perisian tengah untuk mengurus keadaan.

Bermula dengan Zustand dan Vite

Langkah 1: Buat Projek Baharu dengan Vite
Mula-mula, mari sediakan projek React menggunakan Vite, yang merupakan alat binaan yang pantas dan moden.

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

Kemudian ikuti langkah di bawah dalam terminal:

Kemudian ikut arahan di bawah :

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

# Install dependencies
npm install

Vite kini telah mencipta apl React plat dandang. Anda boleh menjalankan apl menggunakan:

npm run dev

Buka http://localhost:5173 dalam penyemak imbas anda untuk melihat apl Vite baharu anda berjalan.

---

Langkah 2: Pasang Zustand
Sekarang, mari pasang Zustand untuk mengurus keadaan apl senarai Todo kami.

npm install zustand

---

Langkah 3: Sediakan Zustand untuk Pengurusan Negeri

Buat folder baharu bernama store dalam direktori src anda dan tambahkan fail todoStore.js di dalamnya. Fail ini akan menyimpan stor Zustand kami.

// 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: Menambah todo baharu pada senarai.
• removeTodo: Mengalih keluar todo dengan id uniknya.
• toggleTodo: Menogol status todo yang lengkap.

---

Langkah 4: Buat Komponen Senarai Todo
Sekarang, kami akan mencipta komponen TodoList yang berinteraksi dengan keadaan 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;

Di sini, kami menggunakan cangkuk useTodoStore untuk:

• Ambil senarai tugasan.
• Tambah tugasan baharu.
• Togol status penyelesaian tugasan.
• Padam tugasan

---

Langkah 5: Tambahkan Komponen TodoList pada Apl
Sekarang, kami perlu menambah komponen TodoList kami pada fail App.jsx utama.

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

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

export default App;

---

Langkah 6: Penggayaan (Pilihan)
Anda boleh menggayakan apl anda secara pilihan menggunakan rangka kerja CSS pilihan anda, malah memasang dan menggunakan Tailwind CSS atau Bootstrap.

Untuk kesederhanaan, mari tambah beberapa gaya asas terus dalam 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;
}

---

Langkah 7: Jalankan Apl Anda
Jalankan apl menggunakan:

npm run dev

Anda kini seharusnya melihat senarai Todo berfungsi di mana anda boleh:

• Tambah tugasan baharu.
• Tandai tugasan sebagai selesai atau belum selesai dengan mengklik padanya.
• Padam tugasan.

Kesimpulan:
Dalam tutorial ini, kami membina apl Todo List yang ringkas menggunakan React dan Zustand untuk pengurusan negeri.

• Kesederhanaan dan prestasi Zustand menjadikannya pilihan yang bagus untuk mengurus keadaan dalam aplikasi bersaiz kecil hingga sederhana.
• Ia memerlukan lebih sedikit boilerplate berbanding penyelesaian pengurusan negeri lain seperti Redux.
• Dengan menggunakan Zustand, anda boleh menumpukan pada membina logik aplikasi anda tanpa perlu risau tentang mengurus kerumitan yang tidak perlu.

Itu sahaja untuk blog ini! Nantikan lebih banyak kemas kini dan teruskan membina apl yang menakjubkan! ?✨
Selamat mengekod! ?

Atas ialah kandungan terperinci Apl Senarai Todo Reactjs (Menggunakan Vite & Condition). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!