Création d'une application Todo avec bascule de thème à l'aide de React

Introduction

Dans ce tutoriel, nous allons créer une Application Web de liste de tâches en utilisant React. Ce projet aide à comprendre la gestion des états, la gestion des événements et l'utilisation de listes dans React. C’est parfait pour les débutants cherchant à renforcer leurs compétences en développement React.

Aperçu du projet

L'application Todo List permet aux utilisateurs d'ajouter, de marquer comme terminées et de supprimer des tâches. Il offre une interface claire pour gérer les tâches quotidiennes. Ce projet montre comment React peut être utilisé pour gérer l'état d'une application simple mais dynamique.

Caractéristiques

• Ajouter une nouvelle tâche : les utilisateurs peuvent ajouter des tâches à la liste.
• Marquer comme terminé : les utilisateurs peuvent marquer les tâches comme terminées.
• Supprimer la tâche : les utilisateurs peuvent supprimer des tâches de la liste.
• Stockage local : conserve les tâches lors des rechargements de pages à l'aide de localStorage.

Technologies utilisées

• React : pour créer l'interface utilisateur et gérer l'état des composants.
• CSS : Pour styliser l'application.
• JavaScript : pour la logique et les fonctionnalités de base.

Structure du projet

La structure du projet suit une présentation typique d'un projet React :

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

Composants clés

• TodoList.jsx : Gère l'affichage et la gestion de la liste de tâches.
• TodoItem.jsx : gère les tâches individuelles, notamment en les marquant comme terminées ou en les supprimant.

Explication du code

Composant TodoList

Ce composant gère l'état de l'ensemble de la liste de tâches, y compris l'ajout de nouvelles tâches et le rendu de la liste.

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

Composant TodoItem

Le composant TodoItem gère l'affichage de chaque tâche, ainsi que les options pour la marquer comme terminée ou la supprimer.

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

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

); }; export default TodoItem;

Dans ce composant, nous recevons des accessoires de la TodoList parent et gérons des actions telles que basculer l'achèvement d'une tâche ou supprimer la tâche.

Composant d'application

App.jsx sert de racine à l'application, rendant le composant 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>TODO</h1>
          </div>
          <div classname="mode" onclick="{toggleTheme}">
            <img src="%7BisLightTheme" moon : sun alt="Création dune application Todo avec bascule de thème à laide de React">
          </div>
        </div>
        <todo></todo>
        <div classname="footer">
        <p>Made with ❤️ by Abhishek Gurjar</p>
      </div>
      </div>

    </div>
  );
};

export default App;

Style CSS

Le CSS garantit que l'application Todo List est conviviale et réactive.

* {
  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;
}

Les styles garantissent que la liste de tâches est simple et propre tout en permettant la gestion des tâches.

Installation et utilisation

Pour commencer, clonez le référentiel et installez les dépendances :

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

L'application commencera à s'exécuter sur http://localhost:3000.

Démo en direct

Découvrez la démo en direct de la liste Todo ici.

Conclusion

Le projet Todo List est un excellent moyen de s'entraîner à travailler avec la gestion des états, des listes et des événements dans React. Il montre comment créer une application utile capable de conserver les données d'une session à l'autre à l'aide de localStorage.

Crédits

• Inspiration : Inspiré par le besoin d'un outil de gestion des tâches simple et efficace.

Auteur

Abhishek Gurjar est un développeur web passionné. Vous pouvez découvrir plus de ses projets sur GitHub.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!