Reactjs 待辦事項清單應用程式（使用 Vite 和 Condition）

建立 ReactJS 應用程式時，隨著應用程式的擴展，有效地管理狀態變得至關重要。 React 的內建狀態管理非常適合小型應用程序，但對於更大或更複雜的應用程序，通常需要外部狀態管理庫。
Zustand 就是這樣一個輕量級、快速且簡約的狀態管理函式庫，它可以幫助您管理 React 應用程式中的全域狀態，而不會增加太多複雜性。

在本部落格中，我們將學習如何在使用 Vite 建立的簡單待辦事項清單應用程式中使用 Zusstand。

這是專案的工作：

Zustand 是什麼？

Zustand 是一個小型、快速的 React 狀態管理函式庫。與 Redux 等其他狀態管理庫相比，它提供了更簡單的 API，使其對於中小型應用程式更加用戶友好。

為什麼要Zustand？

• 簡單性： Zustand 提供了一個簡單且最小的 API 來處理狀態。
• 效能： Zustand 僅在使用已變更的特定狀態的元件中觸發重新渲染。
• 無樣板： 與 Redux 不同，Zustand 不需要減速器、操作或中介軟體來管理狀態。

Zustand 與 Vite 入門

第1步：使用Vite建立一個新專案
首先，讓我們使用 Vite 建立一個 React 項目，Vite 是一個快速且現代化的建置工具。

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

然後在終端機中執行以下步驟：

然後依照以下指令操作：

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

# Install dependencies
npm install

Vite 現在已經建立了一個樣板 React 應用程式。您可以使用以下方式執行應用程式：

npm run dev

在瀏覽器中開啟 http://localhost:5173 以查看新的 Vite 應用程式正在運作。

---

第 2 步：安裝 Zustand
現在，讓我們安裝 Zustand 來管理待辦事項清單應用程式的狀態。

npm install zustand

---

第 3 步：設定 Zustand 進行狀態管理

在 src 目錄中建立一個名為 store 的新資料夾，並在其中新增一個檔案 todoStore.js 。該文件將保存我們的 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：將新的待辦事項加入清單。
• removeTodo：透過其唯一的 id 刪除待辦事項。
• toggleTodo：切換待辦事項的完成狀態。

---

第 4 步：建立 Todo 清單元件
現在，我們將建立一個與 Zustand 狀態互動的 TodoList 元件。

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

在這裡，我們使用 useTodoStore 鉤子來：

• 取得待辦事項清單。
• 新增待辦事項。
• 切換待辦事項的完成狀態。
• 刪除待辦事項

---

第 5 步：將 TodoList 元件加入應用程式
現在，我們需要將 TodoList 元件新增到主 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;

---

第 6 步：造型（選購）
您可以選擇使用您喜歡的 CSS 框架設計您的應用程序，甚至安裝和使用 Tailwind CSS 或 Bootstrap。

為了簡單起見，我們直接在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;
}

---

第 7 步：執行您的應用程式
使用以下命令運行應用程式：

npm run dev

您現在應該看到一個功能性的待辦事項列表，您可以在其中：

• 新增待辦事項。
• 透過點擊待辦事項將其標記為已完成或未完成。
• 刪除待辦事項。

結論：
在本教程中，我們使用 React 和 Zusstand 建立了一個 簡單的待辦事項清單應用程式進行狀態管理。

• Zustand 的簡單性和效能使其成為管理中小型應用程式狀態的絕佳選擇。
• 與 Redux 等其他狀態管理解決方案相比，它需要的樣板要少得多。
• 透過使用 Zustand，您可以專注於建立應用程式邏輯，而不必擔心管理不必要的複雜性。

這就是本部落格的全部內容了！請繼續關注更多更新並繼續建立令人驚嘆的應用程式！ ?✨
快樂編碼！ ？

以上是Reactjs 待辦事項清單應用程式（使用 Vite 和 Condition）的詳細內容。更多資訊請關注PHP中文網其他相關文章！