React を使用してテーマ切り替えを使用して Todo アプリを構築する

導入

このチュートリアルでは、React を使用して Todo リスト Web アプリケーション を構築します。このプロジェクトは、React での状態管理、イベント処理、リストの操作を理解するのに役立ちます。 React 開発のスキルを強化したい初心者に最適です。

プロジェクト概要

Todo リスト アプリケーションを使用すると、ユーザーはタスクを追加したり、完了済みとしてマークしたり、削除したりできます。日常のタスクを管理するためのクリーンなインターフェイスを提供します。このプロジェクトでは、React を使用してシンプルでありながら動的なアプリケーションの状態を管理する方法を紹介します。

特徴

• 新しいタスクの追加: ユーザーはリストにタスクを追加できます。
• 完了としてマーク: ユーザーはタスクを完了としてマークできます。
• タスクの削除: ユーザーはリストからタスクを削除できます。
• ローカル ストレージ: localStorage を使用して、ページがリロードされてもタスクを保持します。

使用されている技術

• React: ユーザー インターフェイスの構築とコンポーネントの状態の管理用。
• CSS: アプリケーションのスタイルを設定します。
• JavaScript: コアロジックと機能用。

プロジェクトの構造

プロジェクトの構造は、典型的な React プロジェクトのレイアウトに従います。

├── public
├── src
│   ├── components
│   │   ├── TodoList.jsx
│   │   ├── TodoItem.jsx
│   ├── App.jsx
│   ├── App.css
│   ├── index.js
│   └── index.css
├── package.json
└── README.md

主要コンポーネント

• TodoList.jsx: Todo リストの表示と管理を処理します。
• TodoItem.jsx: 個々の Todo アイテムを管理します (完了済みとしてマークするか削除するなど)。

コードの説明

TodoList コンポーネント

このコンポーネントは、新しいタスクの追加やリストのレンダリングなど、todo リスト全体の状態を処理します。

import { useState, useEffect } from "react";
import TodoItem from "./TodoItem";

const TodoList = () => {
  const [task, setTask] = useState("");
  const [tasks, setTasks] = useState([]);

  useEffect(() => {
    const savedTasks = JSON.parse(localStorage.getItem("tasks")) || [];
    setTasks(savedTasks);
  }, []);

  useEffect(() => {
    localStorage.setItem("tasks", JSON.stringify(tasks));
  }, [tasks]);

  const addTask = () => {
    if (task.trim()) {
      setTasks([...tasks, { text: task, completed: false }]);
      setTask("");
    }
  };

  const toggleCompletion = (index) => {
    const newTasks = tasks.map((t, i) =>
      i === index ? { ...t, completed: !t.completed } : t
    );
    setTasks(newTasks);
  };

  const deleteTask = (index) => {
    const newTasks = tasks.filter((_, i) => i !== index);
    setTasks(newTasks);
  };

  return (
    <div classname="todo-list">
      <h1 id="Todo-List">Todo List</h1>
      <input type="text" value="{task}" onchange="{(e)"> setTask(e.target.value)}
        placeholder="Add a new task"
      />
      <button onclick="{addTask}">Add Task</button>
      <ul>
        {tasks.map((t, index) => (
          <todoitem key="{index}" task="{t}" index="{index}" togglecompletion="{toggleCompletion}" deletetask="{deleteTask}"></todoitem>
        ))}
      </ul>
    </div>
  );
};

export default TodoList;

TodoItem コンポーネント

TodoItem コンポーネントは、各タスクの表示と、タスクを完了としてマークするか削除するオプションを管理します。

const TodoItem = ({ task, index, toggleCompletion, deleteTask }) => {
  return (
    

toggleCompletion(index)}>{task.text} deleteTask(index)}>Delete

); }; export default TodoItem;

このコンポーネントでは、親 TodoList から props を受け取り、タスクの完了の切り替えやタスクの削除などのアクションを処理します。

アプリコンポーネント

App.jsx はアプリケーションのルートとして機能し、TodoList コンポーネントをレンダリングします。

import  { useState } from "react";
import "./App.css";
import TodoList from './components/TodoList';
import sun from "./assets/images/icon-sun.svg";
import moon from "./assets/images/icon-moon.svg";

const App = () => {
  const [isLightTheme, setIsLightTheme] = useState(false);

  const toggleTheme = () => {
    setIsLightTheme(!isLightTheme);
  };

  return (
    <div classname="{isLightTheme" :>
      <div classname="app">
        <div classname="header">
          <div classname="title">
            <h1 id="TODO">TODO</h1>
          </div>
          <div classname="mode" onclick="{toggleTheme}">
            <img src="%7BisLightTheme" moon : sun alt="React を使用してテーマ切り替えを使用して Todo アプリを構築する">
          </div>
        </div>
        <todo></todo>
        <div classname="footer">
        <p>Made with ❤️ by Abhishek Gurjar</p>
      </div>
      </div>

    </div>
  );
};

export default App;

CSS スタイル

CSS により、ToDo リスト アプリケーションがユーザーフレンドリーで応答性が高いことが保証されます。

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0;
  font-family: Josefin Sans, sans-serif;
}

.app {
  width: 100%;
  height: 100vh;
  background-color: #161722;
  color: white;
  background-image: url(./assets//images/bg-desktop-dark.jpg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position-x: center;
  background-position-y: top;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
}
.header {
  width: 350px;
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.title h1 {
  font-size: 30px;
  letter-spacing: 7px;
}
.mode {
  display: flex;
  align-items: center;
  justify-content: center;
}
.mode img {
  width: 22px;
}

.todo {
  width: 350px;
  flex-direction: column;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.input-box {
  border-bottom: 1px solid white;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #25273c;
  width: 100%;
  gap: 10px;
  padding: 8px;
  border-radius: 10px;
}
.check-circle {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid white;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: linear-gradient(to right,hsl(230, 50%, 20%) , hsl(280, 46%, 28%));
}

.input-task {
  width: 90%;
  border: none;
  color: white;
  background-color: #25273c;
}
.input-task:focus {
  outline: none;
}
.todo-list {

  margin-top: 20px;
  width: 350px;
  background-color: #25273c;
}
.todo-box {

  margin-inline: 15px;
  margin-block: 10px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 15px;
}
.todo-box .cross{
width: 14px;
}
.details {
  margin-bottom: 40px;
border-bottom: 1px solid white;
  width: 350px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  background-color: #25273c;
  font-size: 12px;
  padding: 12px;
  border-bottom-right-radius: 7px;
  border-bottom-left-radius: 7px;
}

.details .clickBtn{
  cursor: pointer;

}
.details .clickBtn:hover{
color: #3074fd;

}


/* //light Theme  */


.light-theme .app {
  background-color: #fff;
  color: #000;
  background-image: url(./assets//images/bg-desktop-light.jpg);
}

.light-theme .header {
color: white;
}

.light-theme .input-box{
  background-color: white;
  color: black;
  border-bottom: 1px solid black;
}
.light-theme input{
  background-color: white;
  color: black;
}
.light-theme .check-circle{
  border:1px solid black;

}
.light-theme  .todo-list{
  background-color: white;
  color: black;
}
.light-theme .details{
  border-bottom: 1px solid black;
  background-color: white;
  color: black;
}

.footer{
 margin: 40px;
}

このスタイルにより、タスク管理を可能にしながら、ToDo リストがシンプルかつクリーンになります。

インストールと使用方法

まず、リポジトリのクローンを作成し、依存関係をインストールします。

git clone https://github.com/abhishekgurjar-in/todo_list.git
cd todo-list
npm install
npm start

アプリケーションは http://localhost:3000 で実行を開始します。

ライブデモ

ここで Todo リストのライブデモをチェックしてください。

結論

Todo List プロジェクトは、React で状態、リスト、イベント処理を操作する練習をするのに最適な方法です。 localStorage を使用してセッション間でデータを保持できる便利なアプリケーションを構築する方法を示します。

クレジット

• インスピレーション: シンプルで効果的なタスク管理ツールの必要性からインスピレーションを得ました。

著者

Abhishek Gurjar は、情熱的な Web 開発者です。 GitHub で彼のプロジェクトをさらにチェックできます。

以上がReact を使用してテーマ切り替えを使用して Todo アプリを構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。