ساخت فرم و لیست وظایف

مقدمه

به فصل سیزدهم و آخرین پروژه این دوره خوش آمدید! در این فصل، ما یک اپلیکیشن کامل «مدیریت کارها» یا Task Manager (که به آن Todo List هم می‌گویند) خواهیم ساخت. این پروژه تمام مفاهیمی را که از ابتدای دوره تاکنون یاد گرفته‌ایم، از کامپوننت‌ها و props گرفته تا state، effects و هوک‌های سفارشی، در یک اپلیکیشن CRUD (Create, Read, Update, Delete) واقعی به کار می‌گیرد.

این اپلیکیشن به کاربر اجازه می‌دهد تا وظایف جدیدی را اضافه کند، لیست وظایف را مشاهده کند، وضعیت آنها را تغییر دهد و آنها را حذف کند. در درس اول، ما بر روی ساخت رابط کاربری اولیه، یعنی فرم افزودن وظیفه و لیست نمایش وظایف، تمرکز خواهیم کرد.

ساختار اولیه کامپوننت TodoApp

ما با ایجاد یک کامپوننت اصلی به نام TodoApp شروع می‌کنیم که مسئولیت نگهداری state کلی برنامه (لیست وظایف) و رندر کردن کامپوننت‌های فرزند را بر عهده خواهد داشت.

مدیریت state وظایف

ما از هوک useState برای نگهداری آرایه‌ای از اشیاء وظیفه استفاده خواهیم کرد. هر شیء وظیفه، id، متن و وضعیت completed را در خود خواهد داشت.

JAVASCRIPT (React)

import { useState } from 'react';

function TodoApp() {
  const [todos, setTodos] = useState([
    { id: 1, text: 'Learn React', completed: true },
    { id: 2, text: 'Build a Todo App', completed: false },
  ]);

  return (
    <div className="todo-app">
      <h1>Todo List</h1>
      <!-- Form component will go here -->
      <!-- List component will go here -->
    </div>
  );
}

این کد ساختار اولیه کامپوننت ما را با چند داده نمونه برای state وظایف تعریف می‌کند.

کامپوننت فرم افزودن وظیفه

حالا یک کامپوننت جدید برای فرمی که به کاربر اجازه می‌دهد وظیفه جدیدی را وارد کند، می‌سازیم. این یک «کامپوننت کنترل‌شده» (Controlled Component) خواهد بود.

JAVASCRIPT (React)

function TodoForm({ addTodo }) {
  const [value, setValue] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault();
    if (!value) return;
    addTodo(value);
    setValue('');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        className="input"
        value={value}
        onChange={(e) => setValue(e.target.value)}
        placeholder="Add a new task..."
      />
    </form>
  );
}

این کامپوننت یک prop به نام addTodo (که یک تابع است) دریافت می‌کند. ما از useState برای مدیریت مقدار ورودی استفاده می‌کنیم.

در تابع handleSubmit پس از جلوگیری از رفتار پیش‌فرض فرم، بررسی می‌کنیم که آیا ورودی خالی است یا خیر. اگر خالی نباشد، تابع addTodo را که از کامپوننت والد آمده، با مقدار ورودی فراخوانی کرده و سپس با setValue('') فیلد ورودی را پاک می‌کنیم.

کامپوننت لیست وظایف

در نهایت، کامپوننتی برای نمایش لیست وظایف می‌سازیم. این کامپوننت آرایه todos را به عنوان prop دریافت کرده و با استفاده از map هر وظیفه را رندر می‌کند.

JAVASCRIPT (React)

function TodoList({ todos }) {
  return (
    <div>
      {todos.map((todo, index) => (
        <div className="todo" key={index}>
          {todo.text}
        </div>
      ))}
    </div>
  );
}

در این درس، ما با ایجاد کامپوننت‌های اصلی برای فرم ورودی و لیست نمایش، UI اولیه اپلیکیشن مدیریت کارهای خود را ساختیم. ما همچنین state اصلی برنامه را برای نگهداری لیست وظایف تعریف کردیم.

تا اینجا، اپلیکیشن ما تنها داده‌های اولیه را نمایش می‌دهد و فرم ورودی هنوز به منطق اصلی متصل نشده است. در درس بعدی، به «حذف، ویرایش و تیک‌زدن وظایف» خواهیم پرداخت و با پیاده‌سازی توابع handler و پاس دادن آنها به کامپوننت‌های فرزند، اپلیکیشن خود را کاملاً تعاملی خواهیم کرد.