In diesem Tutorial erstellen wir eine Todo-Listen-Webanwendung mit React. Dieses Projekt hilft beim Verständnis der Zustandsverwaltung, der Ereignisbehandlung und der Arbeit mit Listen in React. Es ist perfekt für Anfänger, die ihre Fähigkeiten in der React-Entwicklung stärken möchten.
Mit der Todo-Listen-Anwendung können Benutzer Aufgaben hinzufügen, als erledigt markieren und entfernen. Es bietet eine übersichtliche Oberfläche für die Verwaltung täglicher Aufgaben. Dieses Projekt zeigt, wie React verwendet werden kann, um den Status einer einfachen, aber dynamischen Anwendung zu verwalten.
Die Projektstruktur folgt einem typischen React-Projektlayout:
├── public ├── src │ ├── components │ │ ├── TodoList.jsx │ │ ├── TodoItem.jsx │ ├── App.jsx │ ├── App.css │ ├── index.js │ └── index.css ├── package.json └── README.md
Diese Komponente verwaltet den Status der gesamten Aufgabenliste, einschließlich des Hinzufügens neuer Aufgaben und des Renderns der 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;
Die TodoItem-Komponente verwaltet die Anzeige jeder Aufgabe sowie Optionen, um sie als erledigt zu markieren oder zu löschen.
const TodoItem = ({ task, index, toggleCompletion, deleteTask }) => {
return (
In dieser Komponente erhalten wir Requisiten von der übergeordneten TodoList und verarbeiten Aktionen wie das Umschalten der Aufgabenerledigung oder das Löschen der Aufgabe.
App.jsx dient als Stammverzeichnis der Anwendung und rendert die TodoList-Komponente.
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="Erstellen einer Todo-App mit Theme Toggle mithilfe von React">
</div>
</div>
<todo></todo>
<div classname="footer">
<p>Made with ❤️ by Abhishek Gurjar</p>
</div>
</div>
</div>
);
};
export default App;
Das CSS stellt sicher, dass die Todo List-Anwendung benutzerfreundlich und reaktionsschnell ist.
* {
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;
}
Die Stile sorgen dafür, dass die Todo-Liste einfach und übersichtlich ist und ermöglichen gleichzeitig die Aufgabenverwaltung.
Um zu beginnen, klonen Sie das Repository und installieren Sie die Abhängigkeiten:
git clone https://github.com/abhishekgurjar-in/todo_list.git cd todo-list npm install npm start
Die Anwendung wird unter http://localhost:3000 ausgeführt.
Sehen Sie sich hier die Live-Demo der Todo-Liste an.
Das Todo-List-Projekt ist eine großartige Möglichkeit, die Arbeit mit Status, Listen und Ereignisbehandlung in React zu üben. Es zeigt, wie man eine nützliche Anwendung erstellt, die Daten mithilfe von localStorage sitzungsübergreifend beibehalten kann.
Abhishek Gurjar ist ein leidenschaftlicher Webentwickler. Weitere seiner Projekte finden Sie auf GitHub.
Das obige ist der detaillierte Inhalt vonErstellen einer Todo-App mit Theme Toggle mithilfe von React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
