توصیه های کاربردی برای نوشتن React Components

من خرج کرده ام مقدار زیادی اخیراً با React گذشت – و من نظراتی را ایجاد کردم. با هیچ کدام از آنها موافق نیستید؟ به من پینگ کن @greveJoe در پلتفرم رسانه های اجتماعی که قبلاً توییتر نام داشت.

بیایید وارد آن شویم.

1. کلاس ها را با clsx و twMerge ترکیب کنید

الحاق کور کلاسNames یک تله است، به خصوص با Tailwind. نیمی از اوقات به دلیل ویژگی CSS، آنطور که انتظار دارید کار نمی کند. در عوض، با استفاده از clsx (یا مشابه) و twMerge با هم انعطاف پذیری را هنگام ترکیب کلاس ها فراهم می کند – به شما امکان می دهد سبک های مؤلفه پیش فرض را با خیال راحت با سبک خود نادیده بگیرید.

چرا این مهم است

• کد پاک کننده: clsx و twMerge به شما کمک می کند ترکیب های کلاسی مختصر و خوانا بنویسید.
• کلاس های مشروط: clsx اعمال کلاس ها بر اساس props یا state را آسان می کند.
• حل تعارض: twMerge به شما امکان می دهد کلاس های متضاد را نادیده بگیرید و از اعمال سبک های مورد نظر اطمینان حاصل کنید.

مثال: کامپوننت دکمه سفارشی

❌ این کار را نکن:

const MyButton = ({ isActive, children }) => (
  <button className={`bg-blue-500 text-white px-4 py-2 ${isActive ? 'border-2 border-red-500' : ''}`}>
    {children}
  button>
);

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

✅ در عوض این کار را انجام دهید:

import clsx from 'clsx';
import { twMerge } from 'tailwind-merge';

const cn = (...classes) => twMerge(clsx(...classes));

const MyButton = ({ isActive, children }) => (
  <button className={cn(
    'bg-blue-500 text-white px-4 py-2',
    isActive && 'border-2 border-red-500'
  )}>
    {children}
  button>
);

ایجاد یک تابع سودمند

برای راحت‌تر کردن ترکیب کلاس‌ها، یک تابع کاربردی ایجاد کنید که ترکیب می‌شود clsx و twMerge:

import clsx from 'clsx';
import { twMerge } from 'tailwind-merge';

const cn = (...classes) => twMerge(clsx(...classes));

export default cn;

سپس می توانید وارد کنید و از آن استفاده کنید cn عملکرد در اجزای خود:

import cn from './utils/cn';

const MyComponent = ({ isActive }) => (
  <div className={cn('bg-white p-4', isActive && 'border-2 border-blue-500')}>
    {/* ... */}
  div>
);

با استفاده از clsx و twMerge با هم، می‌توانید کدهای تمیزتر و قابل نگهداری‌تر را هنگام کار با فریم‌ورک‌های CSS اولیه مانند Tailwind CSS ایجاد کنید. این رویکرد به کارگیری کلاس های شرطی، حل تضادها و خوانا نگه داشتن اجزای شما با افزایش پیچیدگی برنامه شما را آسان تر می کند.

2. لوازم پیش فرض را در آغوش بگیرید

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

در React، forwardRef ابزار قدرتمندی است که به اجزای سفارشی شما اجازه می دهد مانند عناصر HTML بومی رفتار کنند. این کامپوننت شما را قادر می سازد تا a را دریافت کند ref prop، که می تواند برای دسترسی مستقیم به عنصر DOM زیربنایی استفاده شود.

چرا این مهم است

اجازه دادن به قطعات پیش‌فرض:

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

مثال: کامپوننت دکمه سفارشی

❌ این کار را نکن:

const MyButton = ({ children }) => (
  <button className="bg-blue-500 text-white px-4 py-2">
    {children}
  button>
);

چرا این بد است: این رویکرد سبک‌ها را کدهای سخت می‌سازد و اجازه نمی‌دهد که ابزارهای اضافی مانند className یا onClick، باعث می شود جزء غیر قابل انعطاف و استفاده مجدد از آن سخت باشد.

✅ در عوض این کار را انجام دهید:

import React, { forwardRef } from 'react';
import clsx from 'clsx';
import { twMerge } from 'tailwind-merge';

const cn = (...classes) => twMerge(clsx(...classes));

const MyButton = forwardRef(({ children, className, ...props }, ref) => (
  <button 
    ref={ref}
    className={cn('bg-blue-500 text-white px-4 py-2', className)}
    {...props}
  >
    {children}
  button>
));

export default MyButton;

با استفاده از دکمه سفارشی

در اینجا نحوه استفاده از آن آمده است MyButton جزء در یک جزء والد:

import React, { useRef } from 'react';
import MyButton from './MyButton';

const ParentComponent = () => {
  const buttonRef = useRef(null);

  const handleClick = () => {
    if (buttonRef.current) {
      console.log('Button clicked!', buttonRef.current);
    }
  };

  return (
    <div>
      <MyButton ref={buttonRef} className="extra-class" onClick={handleClick}>
        Click Me
      MyButton>
    div>
  );
};

export default ParentComponent;

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

در اینجا نکات 3-5 و نتیجه گیری پست وبلاگ آمده است:

3. به والدین اجازه دهید که چیدمان و فاصله را کنترل کنند

هنگام ساخت اجزای قابل استفاده مجدد، مهم است که به مولفه والد اجازه دهید نگرانی های چیدمان و فاصله گذاری را برطرف کند. این امر مسئولیت‌های اجزای والدین و فرزند را از هم جدا می‌کند و طراحی مدولارتر و قابل استفاده مجدد را ترویج می‌کند. راه بحث برانگیزتر برای عبارت این است: هرگز استفاده نکنید margin – padding و gap تمام چیزی هستند که نیاز دارید

چرا این مهم است

• مدولاریت: حفظ نگرانی های چیدمان و فاصله در مولفه والد، اجزای فرزند را مدولارتر و قابل استفاده مجدد می کند.
• انعطاف پذیری: اجزای اصلی می توانند چیدمان و فاصله را بر اساس نیازهای خاص خود تطبیق دهند.
• ثبات: متمرکز کردن طرح‌بندی و تصمیم‌گیری‌های فاصله‌گذاری در مؤلفه والد، یک رابط کاربری سازگار را تضمین می‌کند.

مثال: کامپوننت لیست

❌ این کار را نکن:

const ListItem = ({ children }) => (
  <div className="mb-4">
    {children}
  div>
);

const List = () => (
  <div>
    <ListItem>Item 1ListItem>
    <ListItem>Item 2ListItem>
    <ListItem>Item 3ListItem>
  div>
);

چرا این بد است: هر یک ListItem دارای هارد کد شده است margin-bottom، که می تواند منجر به ایجاد فاصله ناسازگار شود و کامپوننت را کمتر سازگار کند.

✅ در عوض این کار را انجام دهید:

const ListItem = ({ children }) => (
  <div>{children}div>
);

const List = () => (
  <div className="flex flex-col gap-4">
    <ListItem>Item 1ListItem>
    <ListItem>Item 2ListItem>
    <ListItem>Item 3ListItem>
  div>
);

با اجازه دادن به پدر و مادر List جزء رسیدگی به فاصله بین ListItems، شما یک طراحی مدولارتر و انعطاف پذیرتر ایجاد می کنید که می تواند به راحتی با الزامات چیدمان مختلف سازگار شود.

4. از اجزای کنترل شده برای تعاملات پیچیده استفاده کنید

برای فعل و انفعالات پیچیده مانند فرم‌ها یا مدال‌ها، از اجزای کنترل‌شده برای مدیریت حالت استفاده کنید و راهی روشن برای مؤلفه والد برای کنترل رفتار مؤلفه فرزند فراهم کنید.

چرا این مهم است

• پیش بینی پذیری: اجزای کنترل شده حالت و رفتار مولفه کودک را قابل پیش بینی تر می کند.
• تست آسانتر: با اجزای کنترل‌شده، نوشتن تست‌های واحد برای مؤلفه اصلی آسان‌تر است.
• تفکیک بهتر نگرانی ها: مؤلفه والد وضعیت را مدیریت می کند، در حالی که مؤلفه فرزند بر روی رندر و تعاملات کاربر تمرکز می کند.

مثال: مولفه مدال

const Modal = ({ isOpen, onClose, children }) => (
  <div className={cn('fixed z-10 inset-0 overflow-y-auto', isOpen ? 'block' : 'hidden')}>
    <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
      {/* Modal content */}
      <div className="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
        {children}
        <button onClick={onClose}>Closebutton>
      div>
    div>
  div>
);

در این مثال، Modal جزء توسط مولفه والد از طریق کنترل می شود isOpen و onClose لوازم جانبی این حالت مدال را قابل پیش بینی و مدیریت آسان تر می کند.

5. به صورت خودکار کلاس های Tailwind را با Prettier سفارش دهید

برای اینکه کلاس‌های Tailwind خود را منسجم‌تر و خواندنی‌تر کنید، از آن استفاده کنید prettier-plugin-tailwindcss افزونه ای برای سفارش خودکار کلاس های شما.

چرا این مهم است

• ثبات: سفارش خودکار کلاس های Tailwind شما یک سبک ثابت را در کل پایگاه کد شما تضمین می کند.
• خوانایی: اسکن و درک کلاس های سفارش شده در یک نگاه آسان تر است.
• قابلیت نگهداری: کلاس های مرتب شده کار با کد شما را برای توسعه دهندگان دیگر آسان تر می کند.

مثال: راه اندازی زیباتر با Tailwind CSS

1. بسته های لازم را نصب کنید:

npm install -D prettier prettier-plugin-tailwindcss

1. خود را به روز کنید .prettierrc فایل:

{
  "plugins": ["prettier-plugin-tailwindcss"]
}

اکنون، هر زمان که Prettier را در پایگاه کد خود اجرا کنید، کلاس‌های Tailwind شما به‌طور خودکار مرتب می‌شوند و سازگاری و خوانایی کد شما را بهبود می‌بخشند.

نتیجه

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

اگر نکات یا بهترین روش های دیگری برای ساخت کامپوننت های React دارید، خوشحال می شوم آن ها را بشنوم! با من در توییتر در تماس باشید @greveJoe و اجازه دهید به گفتگو ادامه دهیم.

کد نویسی مبارک!