React で To Do リストを作成する

今日、私は React プロジェクトに取り組み、シンプルかつ強(qiáng)力な To-Do リスト アプリを作成しました。このプロジェクトにより、React フック、狀態(tài)管理、イベント処理についての理解が深まり、タスクを上下に移動(dòng)するなどの追加機(jī)能で機(jī)能を強(qiáng)化することができました。

ここでは、私が學(xué)んだことと実踐したことの內(nèi)訳を示します。

1.コンポーネントのセットアップ
タスクを管理するために useState フックを使用するように ToDoList.jsx を構(gòu)造化しました。これにより、タスク リストを動(dòng)的に更新して表示できるようになりました。以下はタスクを管理するための基本的な設(shè)定です:

import React, { useState } from 'react';

export default function ToDoList() {
  const [tasks, setTasks] = useState([]);
  const [newTask, setNewTask] = useState("");

  function handleInputChange(event) {
    setNewTask(event.target.value); // Enables us to see what we type
  }

  function addTask() {
    if (newTask.trim() !== "") {
      setTasks(t => [...t, newTask]); // Adds the new task to the task list
      setNewTask(""); // Resets the input field
    }
  }
}

2.タスクの追加と削除
狀態(tài)を操作してタスクを追加および削除する方法を?qū)Wびました。 addTask 関數(shù)は入力を追加する前に入力が有効かどうかをチェックしますが、deleteTask はインデックスに基づいて特定のタスクを削除します:

function deleteTask(index) {
  const updatedTasks = tasks.filter((_, i) => i !== index); // Removes the task at the given index
  setTasks(updatedTasks);
}

3.タスクを上下に移動(dòng)する
プロジェクトの主な機(jī)能強(qiáng)化は、タスクの並べ替えを?qū)g裝することでした。 moveTaskUp 関數(shù)と moveTaskDown 関數(shù)は、インデックスに基づいてタスクを並べ替えます。

function moveTaskUp(index) {
  if (index > 0) {
    const updatedTasks = [...tasks];
    [updatedTasks[index], updatedTasks[index - 1]] = [updatedTasks[index - 1], updatedTasks[index]];
    setTasks(updatedTasks);
  }
}

function moveTaskDown(index) {
  if (index < tasks.length - 1) {
    const updatedTasks = [...tasks];
    [updatedTasks[index], updatedTasks[index + 1]] = [updatedTasks[index + 1], updatedTasks[index]];
    setTasks(updatedTasks);
  }
}

4. CSS でスタイルを追加する
アプリを視覚的に魅力的なものにするために、index.css でカスタム スタイルを適用しました。以下にハイライトをいくつか示します:

ボタンのスタイル:

button {
  font-size: 1.7rem;
  font-weight: bold;
  padding: 10px 20px;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.5s ease;
}
.add-button {
  background-color: hsl(125, 47%, 54%);
}
.add-button:hover {
  background-color: hsl(125, 47%, 44%);
}

タスク項(xiàng)目のスタイル:

li {
  font-size: 2rem;
  font-weight: bold;
  padding: 15px;
  background-color: hsl(0, 0%, 97%);
  margin-bottom: 10px;
  border: 3px solid hsla(0, 0%, 85%, 0.75);
  border-radius: 5px;
  display: flex;
  align-items: center;
}

5. To Do リストを?qū)g行中
ToDoList.jsx コンポーネントですべてがどのようにまとめられるかを次に示します:

return (
  <div className='to-do-list'>
    <h1>To-Do List</h1>
    <div>
      <input 
        type='text'
        placeholder='Enter a task...'
        value={newTask}
        onChange={handleInputChange}
      />
      <button className='add-button' onClick={addTask}>
        Add
      </button>
    </div>

    <ol>
      {tasks.map((task, index) => (
        <li key={index}>
          <span className='text'>{task}</span>
          <button className='delete-button' onClick={() => deleteTask(index)}>Delete</button>
          <button className='move-button' onClick={() => moveTaskUp(index)}>??</button>
          <button className='move-button' onClick={() => moveTaskDown(index)}>?</button>
        </li>
      ))}
    </ol>
  </div>
);

重要なポイント

1. React フック: useState フックは、ローカル コンポーネントの狀態(tài)を管理する効率的な方法です。
2. イベント処理: handleInputChange、addTask、deleteTask などの関數(shù)は、ユーザー インタラクションによって UI がどのように更新されるかを示します。
3. 動(dòng)的リスト レンダリング: マップを使用してタスクを反復(fù)処理すると、アプリが動(dòng)的になり、変更に対応できるようになります。
4. スタイリングのベスト プラクティス: CSS ホバー効果とトランジションを組み合わせると、ユーザー エクスペリエンスが向上します。

一歩ずつ

ソースコード
このプロジェクトの完全なソース コードには GitHub でアクセスできます:
? To-Do リスト React アプリ リポジトリ

自由に探索、フォーク、プロジェクトに貢獻(xiàn)してください!

以上が私の React の旅: 28 日目の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。