راهنمای جامع نحوه ایجاد لیست تعاملی در React

نوشته شده توسط: تیم فنی نیک آموز

تاریخ انتشار: ۲۵ تیر ۱۴۰۳

آخرین بروزرسانی: 26 تیر 1403

زمان مطالعه: 9 دقیقه

ایجاد لیست تعاملی در React باعث می‌شود به‌جای اطلاعات بی‌روح، یک‌سری اطلاعات سازماندهی‌شده دراختیار کاربر قرار دهیم. دنیای وب بدون لیست‌ها می‌لنگد. لیست‌ تعاملی در طراحی رابط کاربری (UI) هر وب‌سایتی نقش اساسی دارد. لیست‌های تعاملی در ری اکت برای نمایش منوهایی مثل منوی (navbar) استفاده می‌شود. در جاوا اسکریپت معمولی، برای ساخت لیست از آرایه (array) استفاده می‌کنیم. در React، رندر کردن کارآمد لیست‌ها برای حفظ عملکرد مناسب و ایجاد تجربه‌ای روان برای کاربر، حیاتی است.

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

ایجاد پروژه جدید با استفاده از Create React App

Create React App ابزاری قدرتمند برای شروع راحت و توسعه‌ وب‌اپلیکیشن‌های تک‌صفحه‌ای با React است. این ابزار به‌صورت خودکار، محیط توسعه‌ شما را برای استفاده از جدیدترین قابلیت‌های جاوااسکریپت آماده می‌کند، تجربه‌ای دلنشین برای شما به ارمغان می‌آورد و اپلیکیشن شما را برای انتشار بهینه می‌سازد.

برای راه‌اندازی پروژه با Create React App، به موارد زیر نیاز دارید:

نود (Node.js) با نسخه‌ی ۱۴.۰.۰ یا بالاتر
نصب‌کننده‌ بسته‌ npm با نسخه‌ ۵.۶ یا بالاتر

پس از اطمینان از داشتن موارد فوق، مراحل زیر را دنبال کنید:

ایجاد پروژه: در ترمینال یا خط فرمان خود، دستور زیر را اجرا کنید و نام دلخواه خود را برای پروژه جایگزین my-app نمایید:

npx create-react-app state-class-tutorial

ورود به پوشه‌ پروژه: با دستور زیر، وارد پوشه‌ پروژه‌ای شوید که با نام انتخابی شما ساخته شده است:

cd state-class-tutorial

اجرای پروژه: برای راه‌اندازی و اجرای پروژه‌ React ، خود دستور زیر را اجرا کنید:

npm start

ایجاد لیست ساده در React

برای نمایش لیستی از موارد در قسمت فرانت وب‌سایت با ری اکت، مراحل زیر را دنبال کنید:

ساختن لیست: ابتدا لیستی از آیتم‌های موردنظر خود را به‌صورت یک آرایه در ری اکت تعریف کنید. این آرایه حاوی تمامی اطلاعات و المان‌هایی است که می‌خواهید در لیست نهایی نمایش داده شود.
پیمایش (Traverse) لیست: برای نمایش تک‌تک آیتم‌های لیست در مرورگر، از تابع قدرتمند ()map جاوااسکریپت استفاده می‌کنند. این تابع به شما امکان می‌دهد هر عنصر از آرایه را به‌صورت مجزا بررسی و تغییر دهید. در ادامه، هر عنصر از لیست را با تگ‌های <li> و </li> (مخفف List Item) محصور می‌کنیم تا به‌صورت یک آیتم مجزا در لیست نمایش داده شود.
نمایش نهایی لیست: درنهایت، لیست به‌روزرسانی‌شده، که حالا تمامی آیتم‌ها با تگ‌های <li> احاطه شدند، درون تگ‌های <ul> و </ul> (مخفف Unordered List) قرار می‌دهیم. این تگ‌ها ساختار نهایی لیست بدون ترتیب (Unordered) را در خروجی نهایی وب‌سایت شما تعریف می‌کنند. با رندر (render) کردن این ساختار به DOM، لیست دلخواه شما به زیبایی در مرورگر به نمایش در خواهد آمد.

نمونه پیاده سازی لیست ساده در ReactJS

// Filename -  index.js 

import React from 'react';
import ReactDOM from 'react-dom';

const numbers = [1,2,3,4,5];

const updatedNums = numbers.map((number)=>{
    return <li>{number}</li>;
});

ReactDOM.render(
    <ul>
        {updatedNums}
    </ul>, 
    document.getElementById('root')
);

کد بالا، لیست بدون ترتیبی را به‌صورت زیر نمایش می‌دهد:

رندر کردن لیست ها درون کامپوننت های React

در کد بالا، ما لیست را به‌طور مستقیم درون DOM رندر کردیم. اما چندان روش مناسبی نیست؛ چون همه‌چیز در React به‌صورت مجزا ساخته می‌شود. برای مثال، منوی ناوبری را درنظر بگیرید. قاعدتاً آیتم‌های موجود در منوی ناوبری هر وب‌سایتی، به‌صورت سخت‌کد (hard-coded) تعریف نمی‌شوند. این آیتم‌ها معمولاً از پایگاه داده فراخوانده شده و سپس به‌صورت لیستی در مرورگر نمایش داده می‌شوند. بنابراین، از دیدگاه یک کامپوننت در ری اکت، می‌توانیم لیستی را با استفاده از props به یک کامپوننت پاس دهیم و سپس از این کامپوننت، برای رندر کردن لیست به DOM استفاده کنیم.

در ادامه، کد قبلی که لیست را به‌صورت مستقیم رندر می‌کرد، به یک کامپوننت به‌روزرسانی می‌کنیم. این کامپوننت، آرایه‌ای را به‌عنوان props دریافت کرده و یک لیست بدون ترتیب (unordered list) را برمی‌گرداند.

// Filename - index.js

import React from 'react';
import ReactDOM from 'react-dom';

// Component that will return an
// unordered list
function Navmenu(props)
{
    const list = props.menuitems;

    const updatedList = list.map((listItems)=>{
        return <li>{listItems}</li>;
    });

    return(
        <ul>{updatedList}</ul>
    );
}

const menuItems = [1,2,3,4,5];

ReactDOM.render(
    <Navmenu menuitems = {menuItems} />, 
    document.getElementById('root')
);

خروجی به‌صورت زیر خواهد بود:

البته ایجاد جدول به همین جا ختم نمی‌شود. هنگام رندر لیست در React، ممکن است با اخطاری در کنسول مرورگر خود مواجه شوید که به شما می‌گوید هرکدام از آیتم‌های لیست شما، باید یک کلید منحصربه‌فرد داشته باشند. این اخطار با عنوان هشدار لیست ReactJS نمایش داده می‌شود.

برای رفع این اخطار، باید برای هر آیتم در لیست خود، یک کلید منحصربه‌فرد تعیین کنید.

استفاده از کلیدها در لیست تعاملی در React

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

import React from 'react';
import ReactDOM from 'react-dom';

// Component that will return an
// unordered list
function Navmenu(props)
{
    const list = props.menuitems;

    const updatedList = list.map((listItems)=>{
        return(
                <li key={listItems.toString()}>
                    {listItems}
                </li>
            ); 
    });

    return(
        <ul>{updatedList}</ul>
    );
}

const menuItems = [1,2,3,4,5];

ReactDOM.render(
    <Navmenu menuitems = {menuItems} />, 
    document.getElementById('root')
);

درنهایت، خروجی مشابه همان خروجی قبلی ولی این بار بدون هشدار است.

مدیریت حالت با useState و استایل‌ دهی به لیست با CSS

در React ، useState یک Hook (قلاب) داخلی است که به شما امکان می‌دهد حالت (state) را در یک کامپوننت مدیریت کنید. حالت به‌سادگی داده‌ای است که در طول زمان تغییر می‌کند و بر نحوه نمایش کامپوننت شما تأثیر می‌گذارد. با استفاده از useState می‌توانید لیست‌های تعاملی در React بسازید که و آیتم‌ها را اضافه، ویرایش و حذف کنند.

برای مثال، در کد زیر، ما یک حالت به لیست جدیدی اضافه کردیم. در این مثال، از کتابخانه react-sortable-hoc برای مدیریت قابلیت مرتب‌سازی استفاده شده است.

import React, {useState} from 'react';
/* ...*/
export default function () {
    const [items, setItems] = useState(["First Item", "Second Item", "Third Item"]);

    return <SortableList items={items} onSortEnd={
        ({oldIndex, newIndex}) => {
            const removed = items.slice(0, oldIndex)
                .concat(items.slice(oldIndex+1));
                
            setItems(
                removed.slice(0,newIndex)
                    .concat([items[oldIndex]])
                    .concat(removed.slice(newIndex))
            );
        }
    }/>
};

خروجی لیست تمامی ما به‌شکل زیر است:

گام اول: ساخت کامپوننت لیست

در این مرحله، کامپوننت اصلی لیست را با نام SortableList ایجاد می‌کنیم. این کامپوننت از دو بخش اصلی تشکیل شده است:

بخش UI: این بخش رابط کاربری لیست را شامل می‌شود و با استفاده از کتابخانه styled-components استایل‌دهی می‌شود.
بخش منطق: این بخش وظیفه مدیریت state و مرتب‌سازی آیتم‌های لیست را برعهده دارد.

import React, { useState } from 'react';

import styled from 'styled-components'
import {SortableContainer, SortableElement} from 'react-sortable-hoc';

const List = styled.ul`
    margin: auto;
    width: calc(100% - 20px);
    padding-left: 0;
`;

const Header = styled.li`
    padding: 5px;
    color: #888;
    font-weight: bold;
    list-style-type: none;
`;

const Item = styled.li`
  display: block;
  border-top: 1px solid #888;
  list-style-type: none;
  padding: 5px 0;
  &:hover {
      background: #EEE;
  }  
`;

const SortableItem = SortableElement(Item);

const SortableList = SortableContainer(props => {
    return (
        <List>
            <Header>Name</Header>
            {
                props.items.map((item, index) => (
                    <SortableItem key={`item-${index}`} index={index}>{item}</SortableItem>
                ))
            }
        </List>
    );
});

در کد بالا همانطور که می‌بینید، header و Item را با ویژگی‌های مختلف استایل‌دهی کردیم.

گام دوم: مدیریت state

در این مرحله، state لیست را با استفاده از Hook useState مدیریت می‌کنیم. این state شامل آرایه‌ای از آیتم‌های لیست به‌صورت پیش‌فرض است.

export default function () {
    const [items, setItems] = useState(["First Item", "Second Item", "Third Item"]);

    return <SortableList items={items} onSortEnd={
        ({oldIndex, newIndex}) => {
            const removed = items.slice(0, oldIndex)
                .concat(items.slice(oldIndex+1));

            setItems(
                removed.slice(0,newIndex)
                    .concat([items[oldIndex]])
                    .concat(removed.slice(newIndex))
            );
        }
    }/>
};

گام سوم: مرتب سازی آیتم‌ ها

در این مرحله، تابع onSortEnd را برای مدیریت مرتب‌سازی آیتم‌ها تعریف می‌کنیم. این تابع هنگامی که آیتمی جابه‌جا شود، فراخوانی شده و به‌ترتیب آیتم‌های state را به‌روزرسانی می‌کند.

onSortEnd={({ oldIndex, newIndex }) => {
    const removed = items.slice(0, oldIndex)
        .concat(items.slice(oldIndex + 1));

    setItems(
        removed.slice(0, newIndex)
            .concat([items[oldIndex]])
            .concat(removed.slice(newIndex))
    );
}}

اضافه کردن آیتم‌ های جدید به لیست، ویرایش، حذف آیتم ها

تا این قسمت از مقاله، نحوه ایجاد لیست تعاملی در React و مدیریت حالت را بررسی کردیم. در این بخش، نحوه افزودن، ویرایش و حذف آیتم‌ها در لیست‌های React را بررسی می‌کنیم.

افزودن آیتم های جدید

برای افزودن آیتم‌های جدید به لیست، می‌توانید از رویکردهای مختلفی استفاده کنید. در اینجا، دو روش رایج را بررسی می‌کنیم:

استفاده از state:

از useState برای مدیریت لیست آیتم‌ها به‌عنوان state استفاده کنید.
یک تابع برای افزودن آیتم‌های جدید به لیست state ایجاد کنید.
هنگام کلیک کاربر روی دکمه Add Item تابع را اجرا کنید تا آیتم جدید به لیست اضافه شود.

import React, { useState } from 'react';

function App() {
  const [items, setItems] = useState([]);

  const addItem = (newItem) => {
    setItems([...items, newItem]);
  };

  return (
    <div>
      <input type="text" placeholder="Enter new item" />
      <button onClick={() => addItem('New Item')}>Add Item</button>
      <ul>
        {items.map((item) => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

ویرایش آیتم‌ ها

برای ویرایش آیتم‌های موجود در لیست، می‌توانید از مراحل زیر استفاده کنید:

در هر آیتم لیست، یک دکمه ویرایش (Edit </button>) قرار دهید.
هنگام کلیک کاربر روی دکمه، یک فرم ویرایش را نمایش دهید که مقادیر فعلی آیتم را نشان می‌دهد.
به کاربر اجازه دهید مقادیر را ویرایش کند و سپس تغییرات را ذخیره کند.

import React, { useState } from 'react';

function App() {
  const [items, setItems] = useState([
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' },
  ]);

  const editItem = (id, updatedItem) => {
    setItems((prevItems) =>
      prevItems.map((item) => (item.id === id ? updatedItem : item))
    );
  };

  return (
    <div>
      <ul>
        {items.map((item) => (
          <li key={item.id}>
            {item.name}
            <button onClick={() => editItem(item.id, { name: 'Edited Item' })}>
              Edit
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

حذف آیتم ها

برای حذف آیتم‌ها از لیست، می‌توانید از مراحل زیر استفاده کنید:

در هر آیتم لیست، یک دکمه حذف (Delete</button>) قرار دهید.
هنگام کلیک کاربر روی دکمه، آیتم را از لیست state حذف کنید.

import React, { useState } from 'react';

function App() {
  const [items, setItems] = useState([
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' },
  ]);

  const removeItem = (id) => {
    setItems((prevItems) => prevItems.filter((item) => item.id !== id));
  };

  return (
    <div>
      <ul>
        {items.map((item) => (
          <li key={item.id}>
            {item.name}
            <button onClick={() => removeItem(item.id)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

جمع‌ بندی: نحوه ایجاد لیست تعاملی در React

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

برای افزودن آیتم جدید، از setState یا تابع مربوطه کتابخانه لیست استفاده کنید.
برای ویرایش آیتم، از یک شناسه منحصربه‌فرد برای هر آیتم و حالت ویرایش استفاده کنید.
از useState یا یک کتابخانه مدیریت لیست برای ذخیره داده‌های لیست خود استفاده کنید.
برای حذف آیتم، از تابع setState یا تابع مربوطه کتابخانه لیست با شناسه آیتم استفاده کنید.

با استفاده از اصول اولیه، می‌توانید لیست‌های تعاملی جذاب و کارآمدی را در برنامه‌های React خود بسازید.