یک برنامه ساده Todo list با React

ek3nk4r 2023-05-13

0 29 4 دقیقه قبل خوانده شده

پیشنهاد ویژه

قیمت لیر ترکیه اعزام دانشجو تحصیل در ترکیه خرید فالوور اینستاگرام

فهرست مطالب

اهداف:

در این آموزش، ما قصد داریم از برخی از ویژگی‌های اصلی React برای ساختن یک برنامه لیست کارکردی استفاده کنیم.

Functional Component: جزء کاربردی برای تعریف جزء TodoList
State: از HookState برای مدیریت حالت در جزء TodoList استفاده کنید.
JSX: JSX برای تعریف UI برای جزء TodoList.
مدیریت رویداد: رسیدگی به رویدادها مانند رسیدگی به فرم ارسالی و رسیدگی به کلیک روی دکمه برای حذف موارد انجام کار.
رندر مشروط: رندر مشروط برای نمایش دکمه حذف فقط در صورت وجود.

برپایی

ترمینال یا خط فرمان خود را باز کنید و به دایرکتوری که می خواهید پروژه را ایجاد کنید بروید.
دستور زیر را برای ایجاد یک پروژه React جدید با create-react-app اجرا کنید:

npx create-react-app todo-app

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

cd todo-app

سپس React و ReactDOM را نصب کنید:

npm install react react-dom

هر دوی آنها برای ایجاد یک برنامه React ضروری هستند. React به شما اجازه می دهد تا اجزای رابط کاربری قابل استفاده مجدد را ایجاد کنید، در حالی که ReactDOM مسئول ارائه آن اجزا در مرورگر است.

اکنون می توانید با اجرای دستور زیر سرور توسعه را راه اندازی کنید:

npm start

یک جزء Todo List ایجاد کنید


function TodoList () {

  return (
    <div>
      <form>
        <input type="text" />
        <button>Add Todo</button>
      </form>
      <ul>
          <li>
         </li>
      </ul>
    </div>
  );
}

export default TodoList;

نتیجه

اسکرین شات برنامه Todo

اضافه شدن بقیه ویژگی های react

عبارت import را اضافه کنید که کتابخانه React و قلاب useState را از پکیج react در قسمت بالای کامپوننت شما می آورد.

import React, { useState } from 'react';

قلاب useState را برای ایجاد دو حالت اضافه کنید: todos و inputValue. todos آرایه ای است که لیستی از todos را نگه می دارد و inputValue رشته ای است که مقدار فیلد ورودی را نگه می دارد.

const [todos, setTodos] = useState([]);
const [inputValue, setInputValue] = useState('');

افزودن لیست کارها

import React from 'react'
import { useState } from 'react'

function TodoList () {
  const [todos, setTodos] = useState([])
  const [inputValue, setInputValue] = useState('')

function handleChange(e){
  setInputValue(e.target.value)
}

function handleSubmit(e){
  e.preventDefault()
  setTodos([...todos, inputValue])
  setInputValue('')
}
  return (
    <div>
      <h1>Todo List</h1>
      <form>
        <input type="text" value={inputValue} onChange={handleChange}/>
        <button onClick={handleSubmit}>Add Todo</button>
      </form>
      <ul>
        {todos.map((todo) => (
          <li key={todo}>{todo}
           <button>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  )
}

export default TodoList

نتیجه

اسکرین شات برنامه Todo

بیایید کدهای بالا را بشکنیم

این JSX است که روی صفحه نمایش داده می شود. این شامل یک فرم با یک فیلد ورودی و یک دکمه برای اضافه کردن کارها، یک لیست نامرتب از کارها با یک دکمه حذف برای هر کدام و یک عنوان است.

 <div>
      <h1>Todo List</h1>
      <form  onSubmit={handleSubmit}>
        <input type="text" value={inputValue} onChange={handleChange}/>
        <button>Add Todo</button>
      </form>
      <ul>
        {todos.map((todo) => (
          <li key={todo}>{todo}
             <button>Delete</button> 
          </li>
        ))}
      </ul>
    </div>

در داخل فرم، مقدار فیلد ورودی به حالت inputValue و رویداد onChange روی تابع handleChange تنظیم شده است که هر بار که فیلد ورودی تغییر می کند، وضعیت inputValue را به روز می کند.

      <form  onSubmit={handleSubmit}>
        <input type="text" value={inputValue} onChange={handleChange}/>
        <button>Add Todo</button>
      </form>

در داخل ul، از روش نقشه استفاده می‌شود تا هر TODO را به‌عنوان یک عنصر li با مجموعه‌ای از کلید برای شاخص todo ارائه کند. هر عنصر li یک دکمه حذف نیز دارد.

      <ul>
        {todos.map((todo) => (
          <li key={todo}>{todo}
             <button>Delete</button> 
          </li>
        ))}
      </ul>

این تابعی است که وضعیت inputValue را با مقدار فیلد ورودی تنظیم می کند. هر بار که فیلد ورودی تغییر می کند، فراخوانی می شود.

const handleChange = (e) => {
  setInputValue(e.target.value);
};

این تابعی است که یک todo جدید به وضعیت todos اضافه می کند و هنگام ارسال فرم، وضعیت inputValue را پاک می کند. هنگام ارسال فرم فراخوانی می شود.

const handleSubmit = (e) => {
  e.preventDefault();
  setTodos([...todos, inputValue]);
  setInputValue('');
};

حذف لیست کارها

این تابعی است که یک todo را از وضعیت todos حذف می کند. یک کپی از آرایه todos با استفاده از عملگر spread ایجاد می کند، todo را در شاخص مشخص شده با استفاده از روش splice حذف می کند و وضعیت todos را روی آرایه جدید تنظیم می کند.

const handleDelete = (index) => {
  const newTodos = [...todos];
  newTodos.splice(index, 1);
  setTodos(newTodos);
};




//




   <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}
          <button onClick={() =>handleDelete(index)}>Delete</button>
          </li>
        ))}

نتیجه

اسکرین شات برنامه Todo

این کدهای نهایی ما است که با هم جمع شده اند

import React from 'react'
import { useState } from 'react'

function TodoList () {
  const [todos, setTodos] = useState([])
  const [inputValue, setInputValue] = useState('')

function handleChange(e){
  setInputValue(e.target.value)
}

function handleSubmit(e){
  e.preventDefault()
  setTodos([...todos, inputValue])
  setInputValue('')
}

function handleDelete(index){
  const newTodos = [...todos]
  newTodos.splice(index, 1)
  setTodos(newTodos)
}
  return (
    <div>
      <h1>Todo List</h1>
      <form>
        <input type="text" value={inputValue} onChange={handleChange}/>
        <button onClick={handleSubmit}>Add Todo</button>
      </form>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}
          <button onClick={() =>handleDelete(index)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  )
}

export default TodoList;