ホームページ > 記事 > ウェブフロントエンド > Reactjs Todo リスト アプリ (Vite と Condition を使用)
ReactJS アプリケーションを構築する場合、アプリがスケールするにつれて状態を効率的に管理することが重要になります。 React の組み込み状態管理は小規模なアプリには最適ですが、大規模またはより複雑なアプリケーションの場合は、外部の状態管理ライブラリが必要になることがよくあります。
Zustand は、軽量、高速、最小限の状態管理ライブラリの 1 つで、複雑さを増すことなく React アプリケーションでグローバル状態を管理できるようにします。
このブログでは、Vite を使用して構築されたシンプルな Todo リスト アプリで Zustand を使用する方法を学びます。
プロジェクトの作業は次のとおりです:
Zustand は、React 用の小型で高速な状態管理ライブラリです。 Redux などの他の状態管理ライブラリと比較してシンプルな API を提供し、小規模から中規模のアプリケーションにとってより使いやすいものになっています。
なぜズスタンドなのか?
ステップ 1: Vite で新しいプロジェクトを作成する
まず、高速で最新のビルド ツールである Vite を使用して React プロジェクトをセットアップしましょう。
# 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 をインストールする
次に、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;
ステップ 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
機能的な Todo リストが表示され、次のことが可能になります。
結論:
このチュートリアルでは、状態管理に React と Zustand を使用して シンプルな Todo リスト アプリ を構築しました。
このブログは以上です。さらなるアップデートに注目して、素晴らしいアプリを構築し続けてください! ?✨
コーディングを楽しんでください! ?
以上がReactjs Todo リスト アプリ (Vite と Condition を使用)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。