Membina Apl Todo dengan Togol Tema Menggunakan React-tutorial css-php.cn

Building a Todo App with Theme Toggle Using React

pengenalan

Dalam tutorial ini, kami akan membina Aplikasi Web Senarai Todo menggunakan React. Projek ini membantu dalam memahami pengurusan negeri, pengendalian acara dan bekerja dengan senarai dalam React. Ia sesuai untuk pemula yang ingin mengukuhkan kemahiran mereka dalam pembangunan React.

Gambaran Keseluruhan Projek

Aplikasi Todo List membenarkan pengguna menambah, menandakan sebagai selesai dan mengalih keluar tugas. Ia menawarkan antara muka yang bersih untuk mengurus tugas harian. Projek ini mempamerkan cara React boleh digunakan untuk mengurus keadaan aplikasi yang ringkas lagi dinamik.

Ciri-ciri

Tambah Tugasan Baharu: Pengguna boleh menambah tugasan pada senarai.
Tandai sebagai Selesai: Pengguna boleh menandakan tugas sebagai selesai.
Padam Tugas: Pengguna boleh memadamkan tugasan daripada senarai.
Storan Tempatan: Mengekalkan tugas merentasi muat semula halaman menggunakan localStorage.

Teknologi yang Digunakan

React: Untuk membina antara muka pengguna dan mengurus keadaan komponen.
CSS: Untuk menggayakan aplikasi.
JavaScript: Untuk logik teras dan kefungsian.

Struktur Projek

Struktur projek mengikut reka letak projek React biasa:

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

Salin selepas log masuk

Komponen Utama

TodoList.jsx: Mengendalikan paparan dan pengurusan senarai tugasan.
TodoItem.jsx: Menguruskan item tugasan individu, termasuk menandakannya sebagai selesai atau memadamkannya.

Penerangan Kod

Komponen TodoList

Komponen ini mengendalikan keadaan keseluruhan senarai tugasan, termasuk menambah tugasan baharu dan memaparkan senarai.

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;

Salin selepas log masuk

Komponen TodoItem

Komponen TodoItem menguruskan paparan setiap tugasan, bersama-sama dengan pilihan untuk menandakannya sebagai selesai atau memadamkannya.

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

Salin selepas log masuk

toggleCompletion(index)}>{task.text}

); }; export default TodoItem;

Dalam komponen ini, kami menerima prop daripada TodoList induk dan mengendalikan tindakan seperti menogol penyiapan tugas atau memadamkan tugas.

Komponen Apl

App.jsx berfungsi sebagai punca aplikasi, menjadikan komponen 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="Membina Apl Todo dengan Togol Tema Menggunakan React">
          </div>
        </div>
        <todo></todo>
        <div classname="footer">
        <p>Made with ❤️ by Abhishek Gurjar</p>
      </div>
      </div>

    </div>
  );
};

export default App;

Salin selepas log masuk

Penggayaan CSS

CSS memastikan aplikasi Todo List adalah mesra pengguna dan responsif.

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

Salin selepas log masuk

Gaya memastikan Senarai Tugasan adalah ringkas dan bersih sambil membenarkan pengurusan tugasan.

Pemasangan dan Penggunaan

Untuk bermula, klon repositori dan pasang kebergantungan:

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

Salin selepas log masuk

Aplikasi akan mula berjalan di http://localhost:3000.

Demo Langsung

Lihat demo langsung Senarai Todo di sini.

Kesimpulan

Projek Todo List ialah cara terbaik untuk berlatih bekerja dengan keadaan, senarai dan pengendalian acara dalam React. Ia menunjukkan cara membina aplikasi berguna yang boleh mengekalkan data merentas sesi menggunakan localStorage.

Kredit

Inspirasi: Diilhamkan oleh keperluan untuk alat pengurusan tugas yang mudah dan berkesan.

Pengarang

Abhishek Gurjar ialah pembangun web yang bersemangat. Anda boleh menyemak lebih banyak projek beliau di GitHub.

Atas ialah kandungan terperinci Membina Apl Todo dengan Togol Tema Menggunakan React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!