نوشتن کدهای با کیفیت و تمیز یکی از مهمترین اهدافی‌ست که کدنویسان حرفه‌ای به دنبال رسیدن به آن هستند. یکی از روش‌های بسیار مهم برای رسیدن به چنین هدفی، پیروی کردن از قواعد نامگذاری است. که البته ما در وبسایت راکت بسته به تکنولوژی مورد نظر مقالاتی در این زمینه منتشر کرده‌ایم. برای مثال می‌توانید به مقاله
نام گذاری فایل‌ها و دایرکتوری‌ها بسیار ساده است اما به همان اندازه نیز از اهمیت برخوردار است. یک نامگذاری درست و بهینه می‌تواند به توسعه دهندگان دیگر نیز کمک بسیار زیادی در جهت پیدا کردن محتوا مورد نظرشان بکند.
در این مقاله قصد داریم حول محور همین موضوع، یک آموزش درست و اصولی را برای نامگذاری فایل‌ها، دایرکتوری و محتوا مربوط فریمورک به شما ارائه کنیم. با این مقدمه بیایید فرایند آموزشی این مقاله را شروع کنیم.
منظور از قواعد نامگذاری چیست؟
قبل از اینکه سراغ خود فریمورک React برویم نیاز است که به یک مخرج مشترک از چیستی قواعد نامگذاری برسیم و بدانیم که دقیقا منظورمان از این موضوع چیست.
در دنیای برنامه نویسی کامپیوتر، قواعد نامگذاری به یکسری اصول گفته می‌شود که بر اساس آن، ما موارد نام‌پذیر مانند متغیرها، توابع، کلاس‌ها، فایل‌ها و… را نامگذاری می‌کنیم. حال موضوعی که قصد پاسخ به آن را داریم این است که چگونه نام هر کدام از این موارد باید انتخاب شده و از چه قواعدی باید پیروی بکنند.
بنابراین، قواعد نامگذاری به ما می‌گوید که هر بخش از اپلیکیشن را به چه صورتی نامگذاری کرده و از چه اسامی استفاده کنیم. اما سوال دیگری که باید به آن پاسخ داد این است که چرا باید چنین کاری را انجام دهیم؟ برای پاسخ به این پرسش یک لیست کوتاه را آماده کرده‌ایم که در زیر می‌توانید آن را مشاهده کنید:
- استفاده از قواعد نامگذاری باعث خوانا‌تر شدن کد و دادن سازمان‌دهی بهتری به آن می‌شود.
- قابلیت درک پذیری کد برای دیگر برنامه نویس‌ها بالاتر می‌رود چرا که شما از یک دید، از زبانی استاندارد بین برنامه نویس‌های مختلف برای کدنویسی استفاده می‌کنید.
- در نهایت، استفاده از قواعد نامگذاری باعث می‌شود که کدبیس شما سازگار پذیری بالایی داشته و در بخش‌های مختلف آن تناقض وجود نداشته باشد.
حال برای هر تکنولوژی یکسری قواعد نامگذاری خاص تعیین شده است. برای همین ما در این مقاله به قواعد نامگذاری در فریمورک React خواهیم پرداخت.
آشنایی با قواعد نامگذاری در فریمورک React
React جزو آن دسته از فریمورک‌ها و تکنولوژی‌هایی‌ست که یک قاعده خاص را به ما تحمیل نمی‌کند و دست ما در توسعه اپلیکیشن‌ها به صورت‌های مختلفی باز است. اما این بدین معنی نیست که React یک روش استاندارد و درست را به ما معرفی نکرده است! برعکس، در مستندات React استانداردهای مختلف برای قسمت‌های متفاوت طراحی شده است که متاسفانه در ارتباط با قواعد نامگذاری به صورت صریح نکات کامل و جامعی گفته نشده است. اما ما قصد داریم تا براساس کاری که بیشتر افراد انجام می‌دهند پیش برویم.
برخی از توسعه دهندگان معتقدند که برای نامگذاری کامپوننت‌های React باید براساس نام المان HTML پیش برویم. برای مثال اگر یک کامپوننت قرار است المانی مانند div را رندر کند، نام آن کامپوننت باید به صورت Div باشد.
برخی دیگر می‌گویند که نام کامپوننت باید براساس کاری که قرار است انجام بدهد تعیین شود و نه براساس نام المان HTML آن. برای مثال کامپوننتی که یک پیام را به صورت log در قسمت کنسول می‌نویسد باید نامی مانند ConsoleLogger داشته باشد و نه Console.
در ارتباط با این موضوع در نهایت به خودتان بستگی دارد که از کدام روش استفاده کنید هر چند که روش دوم منطقی تر است.
در جامعه React یکسری روش برای شکل نام‌ها به محبوبیت بالایی رسیده و در ادامه قصد داریم نگاهی به آن‌ها نیز بیاندازیم. در اپلیکیشن‌های React سه روش مرسوم برای نامگذاری وجود دارد که عبارت است از:
- نام گذاری به صورت Camel Case برای نام فایل‌ها و Pascal Case برای نام کامپوننت‌ها.
- نامگذاری به صورت Kebab Case برای نام فایل‌ها و Pascal Case برای نام کامپوننت‌ها.
- استفاده از Pascal Case برای هر دو.
براساس این موارد می‌توان در ابتدا به یک نقطه مشترک رسید و آن این است که برای نام کامپوننت‌ها شما در هر کدام از سه حالت بالا باید از Pascal Case استفاده کنید. در این حالت اولین حرف هر کلمه از نام یک کامپوننت به صورت بزرگ نوشته می‌شود. مثالا App، AppContainer، AwesomeAppContainer.
نکته: به عنوان یک نکته مهم در نظر داشته باشید که زمانی که از یک کامپوننت نمونه می‌گیرید (Instance) باید همواره از camel-Case استفاده کنید. برای مثال در زیر می‌توانید رعایت این نکته را مشاهده کنید.