آیا نام‌های کامپوننت‌های ReactJS باید با حروف بزرگ شروع شوند؟

اگر نام کامپوننت شما در React با حرف کوچک شروع شود، به درستی کار نمی‌کند. به عنوان مثال، وقتی نام کامپوننت را به صورت example تعریف کرده‌اید، در هنگام رندر کردن با <exmaple /> با مشکل مواجه می‌شوید، اما اگر نام آن را به Example تغییر دهید، رندر به درستی انجام می‌شود. دلیل این موضوع در رفتار JSX و نحوه‌ی پردازش نام‌های کامپوننت‌ها نهفته است.

در JSX، نام تگ‌های با حروف کوچک به عنوان تگ‌های HTML در نظر گرفته می‌شوند. به عبارت دیگر، زمانی که از نامی مانند example استفاده می‌کنید، JSX آن را در این قالب پردازش می‌کند: React.createElement('example') که به معنای یک عنصر HTML است. از سوی دیگر، اگر نام کامپوننت با حرف بزرگ شروع شود، مانند Example، آن را به صورت React.createElement(Example) پردازش می‌کند که به یک کامپوننت تعریف شده در فیلد جاوااسکریپت شما اشاره می‌کند.

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

به همین دلیل، اگر کامپوننتی دارید که نام آن با حرف کوچک شروع می‌شود، بهتر است آن را به یک متغیر با حروف بزرگ اختصاص دهید و سپس از آن در JSX استفاده کنید. به عنوان مثال:

      const Foo = example;

    

سپس در JSX می‌توانید از <Foo /> استفاده کنید.

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