Reactjs Todo リストアプリ (Vite と Condition を使用)-jsチュートリアル-php.cn

Reactjs Todo リストアプリ (Vite と Condition を使用)

DDD

リリース： 2024-09-18 14:36:33

オリジナル

322 人が閲覧しました

ReactJS アプリケーションを構築する場合、アプリがスケールするにつれて状態を効率的に管理することが重要になります。 React の組み込み状態管理は小規模なアプリには最適ですが、大規模またはより複雑なアプリケーションの場合は、外部の状態管理ライブラリが必要になることがよくあります。
Zustand は、軽量、高速、最小限の状態管理ライブラリの 1 つで、複雑さを増すことなく React アプリケーションでグローバル状態を管理できるようにします。

このブログでは、Vite を使用して構築されたシンプルな Todo リストアプリで Zustand を使用する方法を学びます。

プロジェクトの作業は次のとおりです:

Reactjs Todo List App (Using Vite & Zustand)

ズスタンドとは何ですか?

Zustand は、React 用の小型で高速な状態管理ライブラリです。 Redux などの他の状態管理ライブラリと比較してシンプルな API を提供し、小規模から中規模のアプリケーションにとってより使いやすいものになっています。

なぜズスタンドなのか?

シンプルさ: Zustand は、状態を操作するためのシンプルかつ最小限の API を提供します。
パフォーマンス: Zustand は、変更された特定の状態を使用するコンポーネントでのみ再レンダリングをトリガーします。
定型文なし: Redux とは異なり、Zustand は状態を管理するためにリデューサー、アクション、ミドルウェアを必要としません。

Zustand と Vite を始める

ステップ 1: Vite で新しいプロジェクトを作成する
まず、高速で最新のビルドツールである Vite を使用して React プロジェクトをセットアップしましょう。

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

ログイン後にコピー

その後、ターミナルで以下の手順に従います:

Reactjs Todo List App (Using Vite & Zustand)

次に、以下のコマンドに従います:

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

# Install dependencies
npm install

ログイン後にコピー

Vite は定型的な React アプリを作成しました。以下を使用してアプリを実行できます:

npm run dev

ログイン後にコピー

ブラウザで http://localhost:5173 を開いて、新しい Vite アプリが実行されていることを確認します。

ステップ 2: Zustand をインストールする
次に、Todo リストアプリの状態を管理するために 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: 新しい Todo をリストに追加します。
RemoveTodo: 一意の ID によって Todo を削除します。
toggleTodo: Todo の完了ステータスを切り替えます。

ステップ 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 フックを次の目的で使用しています。

todo のリストを取得します。
新しい ToDo を追加します。
ToDo の完了ステータスを切り替えます。
ToDo を削除

ステップ 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: アプリを実行する
以下を使用してアプリを実行します: