Apl Senarai Tugasan Mudah dengan CSS React dan Tailwind

Dalam catatan blog ini, saya akan membimbing anda melalui proses membina aplikasi Todo List yang mudah menggunakan React dan TailwindCSS. Projek ini sesuai untuk pemula yang ingin mendalami React untuk mengurus keadaan dan mempelajari cara menggayakan komponen menggunakan rangka kerja CSS yang mengutamakan utiliti, TailwindCSS.

Gambaran Keseluruhan Projek

Matlamat projek ini adalah untuk mencipta Senarai Tugasan asas di mana pengguna boleh:

• Tambah tugasan baharu.

• Togol tugas antara selesai dan belum selesai.

• Padamkan tugasan yang tidak diperlukan lagi.

Kami akan memanfaatkan keupayaan pengurusan keadaan React dan menggayakan segala-galanya menggunakan TailwindCSS.

Langkah 1: Menyediakan projek

Untuk bermula, kami akan menyediakan projek React menggunakan create-react-app dan memasang TailwindCSS.

• Buat Apl React:

npx create-react-app todo-list
cd todo-list

• Pasang TailwindCSS: TailwindCSS perlu dipasang bersama PostCSS dan autoprefixer untuk keserasian penyemak imbas automatik.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

• Konfigurasikan Tailwind: Dalam tailwind.config.js, kemas kini bahagian kandungan untuk menghala ke fail apl React anda:

module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

• Sertakan Tailwind dalam CSS anda: Dalam src/index.css, import arahan TailwindCSS:

@tailwind base;
@tailwind components;
@tailwind utilities;

Kini, TailwindCSS disepadukan sepenuhnya ke dalam apl React kami!

Langkah 2: Mencipta Komponen Senarai Todo

Seterusnya, mari buat komponen Senarai Tugasan yang membolehkan pengguna menambah, memadam dan menogol tugasan.

Berikut ialah struktur teras komponen TodoList.js:

import { useState } from 'react';

function TodoList() {
  const [tasks, setTasks] = useState([]);
  const [newTask, setNewTask] = useState('');

  const addTask = () => {
    if (newTask.trim()) {
      setTasks([...tasks, { text: newTask, completed: false }]);
      setNewTask('');
    }
  };

  const toggleTaskCompletion = (index) => {
    const updatedTasks = tasks.map((task, i) =>
      i === index ? { ...task, completed: !task.completed } : task
    );
    setTasks(updatedTasks);
  };

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

  return (
    <div classname="max-w-md mx-auto mt-10 p-4 bg-white rounded-lg shadow-lg">
      <h1 id="Todo-List">Todo List</h1>
      <div classname="flex mb-4">
        <input type="text" classname="flex-1 p-2 border rounded" value="{newTask}" onchange="{(e)"> setNewTask(e.target.value)}
          placeholder="Add a new task..."
        />
        <button onclick="{addTask}" classname="ml-2 p-2 bg-blue-500 text-white rounded hover:bg-blue-600">
          Add
        </button>
      </div>
      <ul>
        {tasks.map((task, index) => (
          <li key="{index}" classname="flex justify-between items-center mb-2">
            <span classname="{`flex-1" text-gray-500 : onclick="{()"> toggleTaskCompletion(index)}
            >
              {task.text}
            </span>
            <button onclick="{()"> deleteTask(index)}
              className="ml-4 p-1 bg-red-500 text-white rounded hover:bg-red-600"
            >
              Delete
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default TodoList;

Langkah 3: Mengintegrasikan Komponen ke dalam Apl

Setelah komponen TodoList sedia, sepadukannya ke dalam fail App.js utama. Begini caranya:

import './App.css';
import TodoList from './components/TodoList';

function App() {
  return (
    <div classname="App">
      <todolist></todolist>
    </div>
  );
}

export default App;

Langkah 4: Menguji kerja anda!

Dengan berlari:

npm start

Kami boleh melihat susun atur asas Halaman Senarai Todo kami seperti ini:

Menaip tugasan anda:

Mengklik butang Tambah untuk menambah tugasan:

Togol tugas yang telah diselesaikan:

Padam tugasan yang anda tidak mahu lagi dengan mengklik butang Padam:

Kesimpulan

Membina Senarai Tugasan ini dengan React dan TailwindCSS membantu menunjukkan kuasa menggabungkan perpustakaan berasaskan komponen seperti React dengan rangka kerja CSS yang mengutamakan utiliti. Pengurusan keadaan React, digabungkan dengan penggayaan Tailwind yang ringkas dan intuitif, membolehkan kami membuat aplikasi interaktif yang responsif dengan cepat.

Anda boleh terus mempertingkatkan apl ini dengan:

• Mengekalkan tugasan dalam localStorage supaya tugasan itu disimpan antara muat semula halaman.

• Menambah tarikh akhir atau tahap keutamaan pada tugasan.

• Meluaskan reka bentuk dengan gaya dan animasi yang lebih kompleks.

Terima kasih kerana membaca! Saya harap projek ini memberi inspirasi kepada anda untuk meneroka lebih banyak lagi dengan React dan TailwindCSS.

Atas ialah kandungan terperinci Apl Senarai Tugasan Mudah dengan CSS React dan Tailwind. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!