4 الگوی برنامه نویسی در ری اکت

مقدمه :اگر شما برنامه نویس فرانت اند هستید احتمالا مشغول ساخت رابط کاربری پیچیده و یا ساده ای با کمک فریم ورک های پرطرفداری مثل ری اکت و یا ویو و برنامه نویسی در ری اکت هستید. در همین احوالات که مشغول برنامه نویسی ری اکت هستید باید مراقب باشید که از best practice های ری اکت هم غافل نباشید.این مسئله به سازماندهی بهتر کدهای شما کمک زیادی می کند.همان طور که میدانید ری اکت یک کتابخانه جاوااسکریپتی است که به برنامه نویسان اجازه میدهد که با ترکیب کامپوننت های مختلف ، یک برنامه جامع و کامل بسازند.در حقیقت هر برنامه نویسی می تواند کامپوننت خود را بسازد و آن را در اختیار جامعه برنامه نویسان ری اکت قرار دهد.در این مقتاه ما قصد داریم که به موضوع ترند و محبوب انواع best practice ها در ری اکت بپردازیم. پس با ما همراه باشید:1-استفاده از کامپوننت های کوچک و تابعی:همان طور که همه ما میدانیم ، باکمک ری اکت ما می توانیم کامپوننت های بزرگی بسازیم که وظایف مختلفی را انجام میدهند. بهترین راه ساخت کامپوننت ، ساختن کامپوننت های کوچک است به طوری که هر تابع نمایش دهنده یک کامپوننت خواهد بود . این کار مزایای فراوانی برای ما دارند که به برخی از آنها اشاره خواهیم کرد:کامپوننت های تابعی میتوانند کاملا مستقل باشند که این مسئله نگهداری و تست آنها را آسانتر خواهد کرد.هر کامپوننت کوچک می تواند در پروژه های مختلفی استفاده شود.هر کامپوننت توابع و عملیات مختلفی را انجام میدهد که می توان آنها را در اختیار جامعه برنامه نویسان قرار داد.با ساخت کامپوننت های کوچکتر توسعه و بهبود عملکرد برنامه بالاتر خواهد رفت.باعث آسانتر شدن بروزرسانی کامپوننت ها میشود.کامپوننت های بزرگ باعث سنگین تر شدن برنامه شده و نگهداری برنامه را سخت تر میکند.ایجاد تعادل بین ساخت کامپوننت های کوچک و مختصر و تعداد کامپوننت های ایجاد شده ، از یک شرکت به شرکت دیگر متفاوت است. از این ها گذشته شما می توانید هر تعداد کامپوننتی که خواستید ایجاد کنید و هر طور که مایلید آنها را ترکیب کرده تا به نتایج دلخواه خود برسید.2- استفاده مجدد بسیار اهمیت دارد ، بنابراین سعی کنید کامپوننت های مختلفی با کمترین پیش نیازها ایجاد کنید:با کمک قانون یک تابع = یک کامپوننت شما میتوانید قابلیت استفاده مجدد را در برنامه های خود بکار برید. با استفاده از قابلیت استفاده مجدد ، شما میتوانید آن کامپوننت ها را در هر پروژه ای استفاده کرده و از کامپوننت هایی که قبلا ساخته اید ، مجددا استفاده کنید.به عبارت بهتر اگر یک کامپوننت بزرگ ، حجیم و سنگین است ، شما میتوانید آن کامپوننت را به کامپوننت های کوچکتر تقسیم کرده و نگهداری برنامه را بهبود بخشیم.برای مثال شما میتوانید پا را از این هم فراتر بگذارید و یک دکمه ای ایجاد کنید که از چندین آیکن در آن استفاده شده است. بنابراین هر وقت نیاز به یک دکمه داشتید ، میتوانید از دکمه خود برای برنامه تان استفاده کنید.3- کدهای خود را یکی کنید و از تکرار بپرهیزید:قانون همیشگی کدنویسی این است که کدها باید تا حد امکان کوتاه و مختصر باشند. یکی از قوانین و موارد best practice این است که از تکرار جلوگیری کنید و اصطلاحا خود را تکرار نکنید. شما با کمک موشکافی در کدها میتوانید موارد مشابه را شناسایی کرده و آنها را تکرار نکنید. این مسئله وابستگی شدیدی به قابلیت استفاده مجدد در ری اکت دارد.در اینجا به جای استفاده از تگ button چندین مرتبه ، میتوان کامپوننت واحدی ساخت که خود شامل تعدادی دکمه باشد و به هنگام استفاده ، میتوان تنها از این کامپوننتی که خود ساخته ایم استفاده کرده و از تکرار بی مورد جلوگیری کنید و یا حتی میتوان از کامپوننت IconButton استفاده کرد و یا حتی پا را از این هم فراتر گذاشته و همه چیز را در یک آرایه به صورت زیر آورد:4- قراردادن css در جاوااسکریپت:زمانی که شما شروع به کدنویسی میکنید یک اقدام متداول این است که تمام کدهای css خود را در یک فایل مجزای SCSS قرار دهید. استفاده از prefix global احتمال تکراری بودن اسامی را در ری اکت کاهش میدهد.اگرچه وقتی که پروژه بیش از حد بزرگ میشود این راه حل امکان پذیر نیست.کتابخانه های زیادی وجود دارد که با کمک آنها میتوان کدهای css را در جاوااسکریپت نوشت. EmotionJs ، Glamorous از محبوب ترین کتابخانه هایی هستند که با آنها امکان نوشتن کدهای css در js محیا میباشد. در کد پایین مثالی از نحوه استفاده از کدهای EmotionJs آورده شده است. این کتابخانه کدهای کامل css را تولید میکند. اول باید طبق کدهای زیر آن را نصب کنید:در مرحله بعد شما نیاز به افزودن آن به پروژه خود دارید:شما میتوانید کدهای css را به برنامه جاوااسکریپتی خود بیفزایید: