برنامه نویسی

برنامه Easy Todo List با React و Tailwind CSS

در این پست وبلاگ، من شما را از طریق فرآیند ساخت یک برنامه ساده Todo List با استفاده از React و TailwindCSS راهنمایی می کنم. این پروژه برای مبتدیانی که می‌خواهند برای مدیریت وضعیت عمیق‌تر در React غواصی کنند و نحوه استایل دادن به کامپوننت‌ها را با استفاده از فریم ورک اولین ابزار CSS، TailwindCSS، بیاموزند، عالی است.

بررسی اجمالی پروژه

هدف این پروژه ایجاد یک لیست Todo اساسی است که در آن کاربران می توانند:

ما از قابلیت‌های مدیریت حالت React استفاده می‌کنیم و با استفاده از TailwindCSS به همه چیز حالت می‌دهیم.

مرحله 1: راه اندازی پروژه

برای شروع، با استفاده از یک پروژه React راه اندازی می کنیم create-react-app و TailwindCSS را نصب کنید.



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


وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

  • TailwindCSS را نصب کنید: TailwindCSS باید به همراه PostCSS و پیشوند خودکار برای سازگاری خودکار مرورگر نصب شود.


npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init


وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

  • پیکربندی Tailwind: در tailwind.config.js، بخش محتوا را به‌روزرسانی کنید تا به فایل‌های برنامه React شما اشاره کند:


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


وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

  • Tailwind را در CSS خود قرار دهید: In src/index.css، دستورات TailwindCSS را وارد کنید:


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


وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

اکنون TailwindCSS به طور کامل در برنامه React ما یکپارچه شده است!

مرحله 2: ایجاد جزء Todo List

در مرحله بعد، بیایید یک جزء Todo List ایجاد کنیم که در آن کاربران می توانند وظایف را اضافه، حذف و تغییر دهند.

در اینجا ساختار اصلی این است 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 className="text-2xl font-bold mb-4">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 ${task.completed ? 'line-through 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;


وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

مرحله 3: ادغام کامپوننت در برنامه

هنگامی که مؤلفه TodoList آماده شد، آن را در فایل اصلی App.js ادغام کنید. در اینجا به این صورت است:



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

function App() {
  return (
    
  );
}

export default App;


وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

مرحله 4: کار خود را آزمایش کنید!

با دویدن:



npm start


وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

می‌توانیم طرح‌بندی اصلی صفحه فهرست کارها را به این صورت ببینیم:
توضیحات تصویر

تایپ کردن کارها:

توضیحات تصویر

با کلیک بر روی دکمه Add todos را اضافه کنید:

توضیحات تصویر

وظایف تکمیل شده را تغییر دهید:

توضیحات تصویر

با کلیک بر روی دکمه Delete، کاری را که دیگر نمی خواهید حذف کنید:

توضیحات تصویر

نتیجه گیری

ساختن این Todo List با React و TailwindCSS به نشان دادن قدرت ترکیب یک کتابخانه مبتنی بر کامپوننت مانند React با فریم ورک CSS اول کمک کرد. مدیریت حالت React، همراه با استایل ساده و شهودی Tailwind، به ما این امکان را می‌دهد تا به سرعت یک برنامه کاربردی تعاملی و پاسخگو ایجاد کنیم.

می‌توانید به بهبود این برنامه ادامه دهید:

  • تداوم وظایف در محل ذخیره‌سازی محلی تا بین بازخوانی‌های صفحه ذخیره شوند.

  • اضافه کردن تاریخ سررسید یا سطوح اولویت به کارها.

  • گسترش طراحی با سبک ها و انیمیشن های پیچیده تر.

با تشکر برای خواندن! امیدوارم این پروژه الهام بخش شما باشد تا با React و TailwindCSS بیشتر کاوش کنید.

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا