قواعد نامگذاری در فریمورک React

نوشتن کدهای با کیفیت و تمیز یکی از مهمترین اهدافی‌ست که کدنویسان حرفه‌ای به دنبال رسیدن به آن هستند. یکی از روش‌های بسیار مهم برای رسیدن به چنین هدفی، پیروی کردن از قواعد نامگذاری است. که البته ما در وبسایت راکت بسته به تکنولوژی مورد نظر مقالاتی در این زمینه منتشر کرده‌ایم. برای مثال می‌توانید به مقاله «آشنایی با ۱۰ قاعده نام گذاری در جاوا اسکریپت» مراجعه کنید.

نام گذاری فایل‌ها و دایرکتوری‌ها بسیار ساده است اما به همان اندازه نیز از اهمیت برخوردار است. یک نامگذاری درست و بهینه می‌تواند به توسعه دهندگان دیگر نیز کمک بسیار زیادی در جهت پیدا کردن محتوا مورد نظرشان بکند.

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

منظور از قواعد نامگذاری چیست؟

قبل از اینکه سراغ خود فریمورک 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 استفاده کنید. برای مثال در زیر می‌توانید رعایت این نکته را مشاهده کنید.

const appContainer = <AppContainer />

بنابراین تا اینجا به این نکته مشترک دست پیدا کردیم که نام کامپوننت‌ها باید به صورت Pascal Case نوشته شود. حال بیایید نام فایل‌ها را با شیوه‌های مختلف امتحان کنیم. با در نظر گرفتن اینکه ما در حال توسعه یک کامپوننت با نام AppContainer هستیم، فایل jsx آن را نیز با همین عنوان، نامگذاری می‌کنیم.

استفاده از Camel Case برای نامگذاری فایل‌ها

CamelCase روشی است که شما بدون در نظر گرفتن هیچ فاصله‌ و یا نقطه گذاری، نام مورد نظر را می‌نویسید. در این حالت حرف اول هر کدام از کلمه‌ها بجز کلمه اول به صورت بزرگ نوشته می‌شود. در این حالت نام فایل مورد نظر ما appContainer.jsx خواهد بود.

استفاده از Kebab Case برای نامگذاری فایل‌ها

در روش Kebab Case هر کلمه با استفاده از علامت خط تیره ( - ) از همدیگر جدا می‌شوند و تمام حروف نیز به صورت کوچک نوشته خواهد شد. در این حالت نام فایل مورد نظر ما app-container.jsx خواهد بود.

استفاده از Pascal Case برای نامگذاری فایل‌ها

روش Pascal Case شباهت بسیاری به روش Camel Case دارد با این تفاوت که حرف اول کلمه اول نیز به صورت بزرگ نوشته می‌شود. در این حالت نام فایل مورد نظر ما AppContainer.jsx خواهد بود.

در پایان

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

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