شروع به کار یک پروژه، برای بیشتر توسعه دهندگان React، ساده است. با این حال، در برخی مواقع از برنامه ریزی دقیق برای استفاده مجدد از کامپوننت های تعریف شده در آینده، که به عنوان مقیاس پذیری شناخته می شود، غافل می شویم.
داشتن یه برنامه برای مقیاس پذیری می تواند به شما کمک کند تا:
- استفاده مجدد از کدها را در اولویت قرار دهید و زمان کد نویسی را کاهش دهید
- پروژه را منظم کنید و از بازنویسی پروژه جلوگیری کنید
در اینجا 5 درسی که من از مقیاس بندی پروژه های React یاد گرفته ام را بیان می کنم. این کار باعث می شود تا در حین نوشتن کد React، از پیش برای پروژه هایم برنامه داشته باشم. تمامی مفاهیم ارائه شده در این مقاله با جزئیات در بخش آموزش ری اکت بررسی شده اند.
1. همیشه با مدیریت state شروع کنید
وقتی که در مراحل ابتدایی یک پروژه بودم، خیلی زود سراغ نوشتن state برای تقریبا همه کامپوننت ها می رفتم. با این حال، زمانی که می خواستم state های مختلف را برای چندین کامپوننت همگام (sync) کنم، همه چیز بهم ریخته می شد و سعی می کردم از prop ها یا توابع callback استفاده کنم.
Redux، Recoil، یا context و هوک ها، هر چه که باشد، همیشه کار را با یک ابزار مدیریت state شروع کنید. حتی اگر پروژه کوچک باشد، دقت کنید شما در هر صورت برای مدیریت کلی پروژه نیاز به Authenticaiton و Alert دارید.
علاوه بر این، مدیریت state، بخش بیزینس لاجیک را از نمایش کامپوننت ها جدا کرده و در زمان فراخوانی سرویس های backend، مانند یک لایه کنترل کننده بین UI و پایگاه داده، عمل می کند. state و action ها در این لایه می توانند چندین مرتبه در کامپوننت های مختلف استفاده شوند.
نکته ای که در اینجا وجود دارد این است که همیشه در زمان فراخوانی سرویس های backend، وضعیت انتظار را مدیریت کنید. مشخص کنید که در حال حاضر در انتظار انجام عملیات سمت بک اند هستید. این کار اغلب با رندر کردن کامپوننت spinner و توسط کامپوننت شرطی، انجام می شود. این کار از خطاهای غیرضروری جلوگیری می کند.
2. کتابخانه کامپوننتی خودتان را بسازید
متوجه شدم، حتی زمانی که از کتابخانه های UI مانند Material UI استفاده می کنم هنوز برای پروژه خودم نیاز به سفارشی سازی آن خصوصا روی prop ها، بیزینس لاجیک و استایل ها دارم.
همچنین ایجاد یک کتابخانه از کامپوننت های سفارشی به من این اجازه را می دهد تا در صفحات مختلف از آنها استفاده کنم و حتی آنها را به سایر پروژه های دیگر منتقل نمایم.
این سفارشی سازی شامل تایپ ها، تست ها ، استایل ها و قالبهایStorybook (توصیه می شود) برای هر کامپوننت سفارشی می شود.
3. تایپ ها را تعریف کنید
همان طور که می دانیم جاوا اسکریپت یک زبانِ داینامیک است. وقتی یک پروژه مقیاس بندی می شود، prop ها بین کامپوننت ها پخش می شوند و تعداد توابع افزایش پیدا می کنند.
اگر هیچ بررسی روی تایپ ها وجود نداشته باشد، تعداد زیادی خطای غیرضروری به خصوص مواردی مثل null و undefined، رخ خواهند داد. تعریف کردن تایپ ها همچنین باعث خوانایی بهتر کد می گردد.
بهتر است که در صورت امکان، کار را با TypeScript شروع کنید، اما تعریف PropTypes نیز مفید است.
4. از استایل های خاص و کلی استفاده کنید
مشخص کردن استایل همواره سردرگمی بزرگی برای توسعه دهندگان frontend بوده است. زیرا باید هر دو استایل تکی و استایل یکپارچه (استایل هایی که در کل پروژه مشترک هستند) را مدیریت کنیم.
اگر پروژه ای مثل Figma، دارای طراحی UI باشد، سعی کنید که در ابتدا استایل ها را با تم کلی تعریف کنید. بهتر است که آنها را در theme provider مربوط به کتابخانه UI تعریف کرده تا به راحتی بتوانید سفارشی سازی را روی بخش های تعریف شده اجرا نمایید.
برای استایل های هر کدام از کامپوننت ها، سعی کنید که آنها را در کتابخانه کامپوننت های سفارشی که در بالا ذکر شد، اضافه کنید. اگر تنها برای یک کامپوننت خاص هستند، آنها را در فایل استایل های همان کامپوننت اضافه کنید.
قانون کلی این است که جهت استفاده مجدد، استایل ها را در بالاترین سطح اضافه نمایید.
5. همگام سازی پوشه صفحات با مسیرها
پیش از این، نگه داشتن پوشه کامپوننت ها و صفحات هر دو در یک فایل، برای من بسیار پیچیده بود.
در ادامه یاد گرفتم که بهتر است تا پوشه صفحات را با route ها همگام سازی کنم. این کار باعث خوانایی بهتر برای دیگر توسعه دهندگان شد تا ساختار وب سایت را مانند زیر، متوجه شوند.
من همین ساختار را برای پوشه کامپوننت ها دارم تا کامپوننت ها را به صفحه ای که در آن استفاده می شوند نسبت دهم. اما می توانید یک پوشه /components را در زیر هر صفحه داشته باشید، و پوشه کامپوننت را برای دیگر استفاده ها نیز ایجاد کنید.
مواردی که در این مقاله بررسی شدند در طراحی پروژه های ری‌اکت به ویژه مقایس پذیری پروژه بی اندازه اهمیت دارند. اما اصراری به پیاده سازی این موارد نیست. ممکن است شما روش مدیریت خودتان را داشته باشید. اما همیشه دو قاعده را در نظر داشته باشید:
قاعده اول: جداسازی کامپوننت ها و استفاده مجدد از آن ها
قاعده دوم: سازماندهی ساختار پروژه برای افزایش قابلیت خوانایی
برای تسلط به مفاهیم اساسی ری اکت به شما پیشنهاد می کنم آموزش React را دنبال کنید.
