برنامه 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 بیشتر کاوش کنید.