قواعد نام‌گذاری در React js برای کامپوننت‌ها، متدها و توابع

قواعد نام‌گذاری درReact.js برای کامپوننت‌ها، متدها و توابع

رعایت اصول نام‌گذاری در React.js باعث خوانایی و نگهداری بهتر کد می‌شود. در ادامه بهترین روش‌ها برای نام‌گذاری کامپوننت‌ها، متدها و توابع را بررسی می‌کنیم:

۱. نام‌گذاری کامپوننت‌های React

✅ استفاده از PascalCase (حروف بزرگ در ابتدای هر کلمه) ✅ نام باید هدف کامپوننت را توصیف کند ✅ نام فایل کامپوننت باید با نام کامپوننت صادر شده مطابقت داشته باشد

✅ نمونه کد صحیح:

function UserProfile() { 
  return <div>کامپوننت پروفایل کاربر</div>;
}

export default UserProfile;

🚫 روش غلط (نام‌گذاری نامناسب):

function user_profile() {  // ❌ اشتباه
  return <div>کامپوننت پروفایل کاربر</div>;
}

۲. نام‌گذاری متدها (توابع داخل کامپوننت)

✅ استفاده از camelCase ✅ شروع نام تابع با یک فعل (مانند handleClick, fetchData) ✅ نام باید واضح و مختصر باشد

✅ نمونه صحیح:

const handleSave = () => {
  console.log("ذخیره شد!");
};

const fetchUserData = async () => {
  const response = await fetch("/api/user");
};

🚫 روش نامناسب (نام‌گذاری غیر واضح):

const click = () => {   // ❌ اشتباه (نام غیر واضح)
  console.log("کلیک شد");
};

۳. نام‌گذاری توابع کمکی (Utility Functions)

✅ استفاده از camelCase ✅ شروع نام با یک فعل (مانند calculateTotal) ✅ استفاده از نام‌های معنی‌دار برای توابع عمومی

✅ نمونه صحیح:

const formatDate = (date: Date) => {
  return date.toISOString().split("T")[0];
};

const validateEmail = (email: string) => {
  return email.includes("@");
};

🚫 روش نامناسب (نام نامفهوم و کوتاه):

const x = () => {  // ❌ اشتباه (نام غیر معنی‌دار)
  return Math.random();
};

۴. نام‌گذاری Event Handlers (مدیریت رویدادها)

✅ استفاده از handle + نام رویداد (مانند handleClick, handleSubmit) ✅ در صورت خاص بودن رویداد، نام را متناسب با آن تنظیم کنید (handleFormSubmit)

✅ نمونه صحیح:

const handleButtonClick = () => {
  alert("دکمه کلیک شد!");
};

const handleFormSubmit = (event: React.FormEvent) => {
  event.preventDefault();
};

🚫 روش نامناسب (نام غیر واضح)

const doSomething = () => { // ❌ اشتباه (عدم مشخص بودن عملکرد)
};

۵. نام‌گذاری متغیرهای State در React

✅ استفاده از نام‌های واضح برای متغیرهای state ✅ برای متغیرهای بولی، با is یا has شروع کنید ✅ نام متغیر باید با setVariableName برای متغیرهای تنظیم‌کننده همراه باشد

✅ نمونه صحیح:

const [isModalOpen, setIsModalOpen] = useState(false);
const [userName, setUserName] = useState("");

🚫 روش نامناسب (نام نامفهوم برای state)

const [data, setData] = useState([]);  // ❌ اشتباه (نام غیر واضح)

۶. بهترین روش‌ها برای نام‌گذاری درReact.js

✔️ یکپارچگی (Consistency) – یک روش نام‌گذاری مشخص را در کل پروژه رعایت کنید ✔️ خوانایی (Readability) – نام‌هایی انتخاب کنید که هدف تابع را دقیقاً مشخص کنند ✔️ اجتناب از اختصارات نامفهوم – handleSubmitForm() بهتر از hndSubFrm() است

با رعایت این قواعد، کد React شما خواناتر، بهینه‌تر و قابل نگهداری خواهد بود.