با React یک برنامه لیست کارهای ساده بسازید

مهارت های React خود را با این برنامه نمونه کلاسیک و آسان برای درک تمرین کنید.

یادگیری فناوری جدیدی مانند React بدون تجربه عملی می تواند گیج کننده باشد. به عنوان یک توسعه دهنده، ساخت پروژه های دنیای واقعی یکی از موثرترین راه ها برای درک مفاهیم و ویژگی ها است.

روند ایجاد یک لیست ساده کارها را با React دنبال کنید و درک خود را از اصول React افزایش دهید.

پیش نیازهای ایجاد فهرست کارها

قبل از شروع این پروژه، چندین الزام وجود دارد. شما باید درک اولیه ای از HTML، CSS، JavaScript، ES6 و React داشته باشید. شما باید Node.js و npm، مدیر بسته جاوا اسکریپت را داشته باشید. شما همچنین به یک ویرایشگر کد مانند Visual Studio Code نیاز دارید.

در اینجا CSS است که این پروژه از آن استفاده خواهد کرد:

/* styles.css */
.App {
  font-family: sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.Todo {
  background-color: wheat;
  text-align: center;
  width: 50%;
  padding: 20px;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  margin: auto;
}

ul {
  list-style-type: none;
  padding: 10px;
  margin: 0;
}

button {
  width: 70px;
  height: 35px;
  background-color: sandybrown;
  border: none;
  font-size: 15px;
  font-weight: 800;
  border-radius: 4px;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.input {
  border: none;
  width: 340px;
  height: 35px;
  border-radius: 9px;
  text-align: center;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.Top {
  display: flex;
  justify-content: center;
  gap: 12px;
}

li {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  padding: 10px;
}

li:before {
  content: "*";
  margin-right: 5px;
}

1. تنظیم محیط پروژه

این مرحله شامل تمامی دستورات و فایل های مورد نیاز برای راه اندازی پروژه می باشد. برای شروع، یک پروژه React جدید ایجاد کنید. یک ترمینال را باز کنید و این دستور را اجرا کنید:

npx create-react-app todo-list

این چند دقیقه طول می کشد تا تمام فایل های مورد نیاز و بسته ها نیز نصب شوند. یک برنامه React جدید با نام todo-list ایجاد می کند. وقتی چیزی شبیه به این را می بینید در مسیر درستی هستید:

با استفاده از این دستور به دایرکتوری پروژه تازه ایجاد شده خود بروید:

cd todo-list

پروژه خود را به صورت محلی با این دستور اجرا کنید:

npm start

و سپس پروژه را در مرورگر خود در http://localhost:3000/ مشاهده کنید.

در پوشه src پروژه شما، چند فایل وجود دارد که به آنها نیاز ندارید. این فایل ها را حذف کنید: App.css، App.test.js، logo.svg، reportWebVitals.js، setupTests.js.

مطمئن شوید که در فایل‌های موجود به دنبال عبارات واردات می‌گردید و هرگونه ارجاع به فایل‌های حذف شده را حذف می‌کنید.

2. یک مؤلفه TodoList ایجاد کنید

این مؤلفه ای است که ما تمام کدهای مورد نیاز برای لیست کارها را پیاده سازی می کنیم. یک فایل با نام “TodoList.js” در پوشه src خود ایجاد کنید. سپس برای آزمایش اینکه همه چیز همانطور که باید کار می کند، کد زیر را اضافه کنید:

import React from 'react';

const TodoList = () => {
    return (
        <div>
            <h2>Hello World </h2>
        </div>
    );
};

export default TodoList; 
 

فایل App.js خود را باز کنید، مؤلفه TodoList را وارد کنید و آن را در داخل مؤلفه App رندر کنید. چیزی شبیه به این خواهد بود:

import React from 'react';
import './styles.css'
import TodoList from './TodoList';

const App = () => {
    return (
        <div>
            <TodoList />
        </div>
    );
};

export default App;

به مرورگر محلی خود که دارای localhost:3000 در حال اجرا است بروید و بررسی کنید که «Hello World» به طور جسورانه نوشته شده است. همه خوبن؟ به مرحله بعد.

3. کنترل ورودی و تغییر ورودی

این مرحله به شما امکان می‌دهد تا زمانی که وظیفه‌ای را در کادر ورودی تایپ می‌کنید، رویدادی را راه‌اندازی کنید. قلاب useState را از بسته React خود وارد کنید. useState یک قلاب React است که به شما امکان می دهد وضعیت را به طور موثر مدیریت کنید.

import React, { useState } from 'react';

از قلاب useState برای ایجاد یک متغیر حالت به نام “inputTask” با مقدار اولیه یک رشته خالی استفاده کنید. علاوه بر این، تابع “setInputTask” را برای به روز رسانی مقدار “inputTask” بر اساس ورودی کاربر اختصاص دهید.

const [inputTask, setInputTask] = useState("");

یک تابع به نام HandleInputChange ایجاد کنید، که پارامتر رویداد را در نظر می گیرد. باید وضعیت inputTask را با استفاده از تابع setInputTask به روز کند. با event.target.value به مقدار هدف رویداد دسترسی پیدا کنید. هر زمان که مقدار فیلد ورودی تغییر کند این کار اجرا می شود.

const handleInputChange = (event) => {
    setInputTask(event.target.value);
}; 

چند عنصر JSX را برگردانید. اولی عنوانی است که “فهرست کارهای من” را می خواند، می توانید در مورد هر عنوانی که دوست دارید تصمیم بگیرید. چند ویژگی را به عناصر ورودی خود اضافه کنید. type=“text”: این نوع ورودی شما را به عنوان متن مشخص می کند، value={inputTask}: این مقدار فیلد ورودی را به متغیر وضعیت inputTask متصل می کند و اطمینان می دهد که مقدار فعلی را منعکس می کند.onChange={handleInputChange}: تابع handleInputChange هنگامی که مقدار فیلد ورودی تغییر می کند، وضعیت inputTask را به روز می کند.

<div className="Todo">
    <h1>My To-Do List</h1>
    <div className="Top">
        <input className="input" type="text" value={inputTask}
           onChange={handleInputChange} placeholder="Enter a task" />

در ادامه، دکمه ای ایجاد کنید که وظیفه وارد شده را به لیست اضافه می کند.

        <button className="btn">ADD</button>
   </div>
</div>

در این مرحله خروجی مرورگر شما به این صورت خواهد بود.

4. عملکرد را به دکمه “ADD” اضافه کنید

از قلاب useState برای ایجاد یک متغیر حالت به نام “list” با مقدار اولیه یک آرایه خالی استفاده کنید. متغیر “setList” آرایه ای از وظایف را بر اساس ورودی کاربر ذخیره می کند.

const [list, setList] = useState([]);

یک تابع handleAddTodo ایجاد کنید که وقتی کاربر برای افزودن یک کار جدید روی دکمه “ADD” کلیک کند، اجرا می شود. پارامتر todo را می گیرد که نشان دهنده وظیفه جدید وارد شده توسط کاربر است. سپس، یک شی newTask با یک شناسه منحصر به فرد ایجاد شده با استفاده از Math.random()، و ویژگی todo که متن ورودی را نگه می دارد، ایجاد کنید.

در ادامه، وضعیت لیست را با استفاده از عملگر spread […list] برای ایجاد یک آرایه جدید با وظایف موجود در لیست، به روز کنید. newTask را به انتهای آرایه اضافه کنید. این تضمین می کند که آرایه حالت اصلی را تغییر نمی دهیم. در نهایت، وضعیت inputTask را به یک رشته خالی بازنشانی کنید و وقتی کاربر روی دکمه کلیک کرد، فیلد ورودی را پاک کنید.

const handleAddTodo = (todo) => {
    const newTask = {
        id: Math.random(),
        todo: todo
   };

   setList([...list, newTask]);
    setInputTask('');
}; 

ویژگی onClick را به عنصر دکمه با متن “ADD” اضافه کنید. وقتی روی آن کلیک می شود، تابع handleAddTodo را فعال می کند که وظیفه جدیدی را به وضعیت لیست اضافه می کند.

onClick

handleAddTodo

<button onClick={() => handleAddTodo(inputTask)}>ADD</button> 

در این مرحله خروجی مرورگر شما یکسان به نظر می رسد اما اگر پس از وارد کردن یک کار بر روی دکمه “ADD” کلیک کنید، قسمت ورودی خالی می شود. اگر درست کار کرد، به مرحله بعدی بروید.

5. یک دکمه حذف اضافه کنید

این آخرین مرحله است تا کاربران بتوانند در صورت اشتباه یا انجام کار، وظیفه خود را حذف کنند. یک تابع handleDeleteTodo ایجاد کنید که وقتی کاربر روی دکمه “حذف” برای یک کار خاص کلیک می کند، به عنوان یک کنترل کننده رویداد عمل می کند. شناسه کار را به عنوان پارامتر می گیرد.

در داخل تابع، از روش فیلتر در آرایه لیست برای ایجاد یک آرایه جدید newList استفاده کنید که وظیفه با شناسه منطبق را حذف می کند. متد فیلتر از طریق هر آیتم در آرایه لیست تکرار می شود و یک آرایه جدید را برمی گرداند که فقط شامل مواردی است که شرایط داده شده را برآورده می کند. در این صورت، بررسی کنید که آیا شناسه هر وظیفه با شناسه ارسال شده به عنوان پارامتر برابر است یا خیر. وضعیت لیست را با فراخوانی setList(newList) به روز کنید، که وضعیت را روی آرایه فیلتر شده جدید تنظیم می کند و عملاً وظیفه با شناسه منطبق را از لیست حذف می کند.

const handleDeleteTodo = (id) => {
    const newList = list.filter((todo) => 
        todo.id !== id
   );

    setList(newList); 
};

از روش نقشه برای تکرار روی هر آیتم در آرایه لیست استفاده کنید و یک آرایه جدید را برگردانید. سپس، یک عنصر

<ul>
{ list.map((todo) => (
   <li className="task" key={todo.id}>
        {todo.todo}
        <button onClick={() => handleDeleteTodo(todo.id)}>Delete</button>
    </li>
))}
</ul>

import React, { useState } from 'react';

const TodoList = () => {
    const [inputTask, setInputTask] = useState('');
    const [list, setList] = useState([]);

    const handleAddTodo = () => {
        const newTask = {
            id: Math.random(),
            todo: inputTask
        };

       setList([...list, newTask]);
        setInputTask('');
    };

   const handleDeleteTodo = (id) => {
        const newList = list.filter((todo) => todo.id !== id);
        setList(newList);
    };

   const handleInputChange = (event) => {
        setInputTask(event.target.value);
    };

   return (
        <div className="Todo">
            <h1>My To-Do List</h1>

            <div className="Top">
                <input className="input" type="text" value={inputTask}
                   onChange={handleInputChange} placeholder="Enter a task" />

                <button className="btn" onClick={handleAddTodo}>ADD</button>
            </div>

           <ul>
                { list.map((todo) => (
                    <li className="task" key={todo.id}>
                        {todo.todo}
                        <button onClick={() => handleDeleteTodo(todo.id)}>
                           Delete
                       </button>
                    </li>
                ))}
            </ul>
        </div>
    );
};

export default TodoList;