طراحی کامپوننت‌های React مانند یک توسعه دهنده حرفه‌ای

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

در ادامه، چند راهنمایی برای ایجاد اجزای قابل استفاده در React آورده شده است.

ساده‌سازی کامپوننت‌

یک کامپوننت باید فقط مسئولیت یک وظیفه یا قطعه خاصی از عملکرد را داشته باشد. بهتر است از ساخت کامپوننت‌های پیچیده که سعی می‌کنند کارهای زیادی را انجام دهند، خودداری کنید.

برای مثال، اگر یک کامپوننت دارید که مسئولیت پردازش لاگین را دارد، منطقی نیست که همین کامپوننت مسئول نمایش مکان‌های فروش برای یک محصول خاص باشد.

استفاده از Props و Context

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

اینجا یک مثال از یک کامپوننت قابل استفاده مجدد React است که یک لیست از آیتم‌ها را نمایش می‌دهد:

import React from 'react';
const List = (props) => {
 return (
    <ul>
      {props.items.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
};
export default List;

این کامپوننت یک Props به نام items را می‌پذیرد، که یک آرایه از اشیاء با دو ویژگی id و name است. سپس بر روی آرایه items حلقه می‌زند و هر مورد را با استفاده از ویژگی name در یک لیست نمایش می‌دهد.

برای استفاده از این کامپوننت، شما آن را در یک کامپوننت دیگر وارد کرده و به عنوان پارامتر آرایه items را به آن انتقال می‌دهید، به این شکل:

const MyComponent = () => {

 const items = [
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' },
    { id: 3, name: 'Item 3' },
  ];

 return (
      <div>
        <List items={items} />
      </div>
    );
  };
}

export default MyComponent;

سپس می‌توانید از این کامپوننت در چندین نقطه از برنامه‌ی خود استفاده کنید، با امکان نمایش لیست‌های مختلف فقط با ارسال Prop‌s مختلف که شامل itemهای متفاوت است.

تعریف Props با استفاده از TypeScript

استفاده از پیش‌فرض‌های props در کامپوننت‌های تابعی در React، منسوخ شده است و توصیه می‌شود از این پس از TypeScript برای تعریف نوع props استفاده شود.

تایپ‌اسکریپت یک زبان برنامه‌نویسی پرطرفدار است که برای جاوا اسکریپت، تایپ استاتیک اختیاری اضافه می‌کند. این زبان می‌تواند در پروژه‌های React برای بهبود تجربه توسعه با گرفتن خطاها قبل از رسیدن به مرورگر مورد استفاده قرار بگیرد. هنگام ایجاد یک کامپوننت React در TypeScript، شما می‌توانید نوع Props و State را با استفاده از interface تعریف کنید.

در ادامه، یک مثال از استفاده از TypeScript برای تعریف نوع props آمده است.

import React from 'react';

interface Props {
 name: string;
 age: number;
 : (event: React.MouseEvent<HTMLButtonElement>) => void;
}

const MyComponent: React.FC<Props> = ({ name, age,  }) => {
 return (
    <div>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
      <button ={}>Click me</button>
    </div>
  );
}

export default MyComponent;

در این مثال، کامپوننت MyComponent سه Props با نام‌های name، age و را می‌پذیرد. اینترفیس Props نوع هر Prop را تعریف می‌کند. name یک رشته، age یک عدد و یک تابع است که یک React.MouseEventرا به عنوان ورودی می‌گیرد و void را برمی‌گرداند. کامپوننت از این Props برای رندر کردن متن و یک دکمه استفاده می‌کند.

هنگام استفاده از این کامپوننت، شما باید Props را به گونه‌ای ارسال کنید که با نوع‌های تعریف شده در Interface سازگار باشد.

کامپوننت‌های خود را تست کنید

حتما کامپوننت‌های خود را برای اطمینان از کارکرد صحیح آن ها و سهولت در استفاده، تست کنید. من پیشنهاد می کنم از جِست (JEST)، یک فریمورک عالی تست برای ری‌اکت استفاده کنید. تست کردن کامپوننت‌های ری‌اکت با جِست چندین مزیت دارد.

۱. بهبود کیفیت کد

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

۲. افزایش اعتماد به کد

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

۳. اشکال‌زدایی ساده

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

۴. همکاری بهتر با سایر اعضای تیم

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

۵. افزایش سرعت و کارآیی تست‌ها

جِست (JEST) ویژگی‌هایی مانند تست snapshot و اجرای تست موازی دارد که می‌تواند به سرعت و کارآیی بیشتر در فرآیند تست کمک کند.

در پایان

ساخت کامپوننت‌های قابل استفاده مجدد در React، نیازمند فهم قوی از این روش‌ها و کسب تجربه است. برای حفظ پایداری و قابلیت مقیاس‌پذیری کامپوننت‌های خود، همیشه در نظر داشته باشید که این کدها احتمالاً در چندین پروژه و شاید توسط سایر توسعه‌دهندگان در تیم شما استفاده خواهند شد. با تمرین و توجه به جزئیات، می‌توانید کامپوننت‌های React با کیفیت بالا ایجاد کنید که دارای ارزش افزوده برای هر پروژه‌ای هستند.

شروع هر کاری سخت است، اما به یاد داشته باشید هر روز کمی آسان‌تر خواهد شد :)

بازنشر و نظر شما با ارزش و باعث دلگرمی است ❤︎

این نوشته ترجمه ای بود از Create React Components Like a Senior Developer.