ما به عنوان توسعه دهندگان وب، به دلایل مختلف به صورت روزانه از چندین پکیج NPM استفاده می‌کنیم. از موارد ساده مانند اضافه کردن رنگ به دستورات ()console.log در ترمینال گرفته تا کتابخانه‌های کاملا فرانت-اند مانند React . این پکیج‌ها با عدم نیاز به بازنویسی مواردی که چندین بار توسط کاربران مختلف اجرا شده است، بهره وری ما را افزایش می‌دهند و در زمان نیز صرفه جویی می‌کنند.
در این مقاله 10 پکیج NPM را به شما معرفی می‌کنیم. اگر یک توسعه دهنده React هستید یا قبلا تجربه کار با آن را داشته‌اید، این موارد را حتما بررسی کنید. به علاوه چند فریمورک رابط کاربری برای بسته‌های مبتنی بر برنامه را نیز معرفی خواهیم کرد. پس بدون توضیحات اضافی، بیایید بررسی را شروع کنیم.
Material UI![]()
Material UI احتمالا یکی از بهترین فریمورک‌های رابط کاربری ساخته شده برای React است که به شما امکان می‌دهد ضمن استفاده از طراحی متریال گوگل، یک سیستم طراحی سازگار ایجاد کنید. رابط کاربری Material با ارائه بیش از 50 کامپوننت از جمله کارت‌ها، نوار پیشرفت، مدال‌ها و موارد دیگر در ساخت و طراحی به شما کمک می‌کند که بنا به نیاز خود میتوانید تم مورد نیاز خود را امتحان کنید. اگر بخواهم یک فریمورک رابط کاربری را به یک توسعه دهنده React توصیه کنیم، مطمئنا اولین مورد Material UI است.
Redux Toolkit![]()
اگرچه قلاب‌های useContext و useReducer نیاز به استفاده از Redux را در برنامه‌های مدرن کاهش داده است، اما غیر معمول نیست که تعداد زیادی از پایگاه‌های کد را همچنان برای مدیریت state ببینید. به نظر من Redux هنوز یک مهارت ارزشمند برای یادگیری است و موارد استفاده خاص خود را دارد. با این حال پیش نیازهای لازم برای راه اندازی Redux در یک برنامه React به ویژه برای مبتدیان بسیار زیاد است.
Redux Toolkit هدفش حل این مسئله است و از آن به عنوان یک ابزار رسمی برای توسعه کارآمد Redux استفاده می‌شود و همچنین توسط تیم رسمی آن نیز توصیه می‌گردد که منطق Redux در نظر گرفته شود. با انتخاب Redux Toolkit به جای Redux معمولی، در پروژه‌های بعدی به خودتان و پایگاه کدتان لطف خواهید کرد.
React Icons
React Icons یک پکیج شگفت انگیز است که بیش از ده مجموعه آیکون معروف مانندFont Awesome ، Material Icons، Ant Design Icons و موارد دیگر را با هم تلفیق می‌کند. به این صورت که دسترسی به همه آیکون‌های مورد علاقه شما را فقط با نصب یک پکیج بدون نیاز به نصب جداگانه هر یک از آنها بسیار ساده خواهد کرد. از طریق ایمپورت‌های ES6 میتوانید اطمینان حاصل کنید که فقط آیکون‌هایی را که قصد استفاده از آنها را دارید استفاده خواهید کرد.
React Google Login
OAuth یا Open Authorization کاربران را قادر می‌سازد تا از طریق سرویس دهندگان دیگری مانند گوگل، فیسبوک، تویتر، گیت هاب و ... به وب سایت شما لاگین کنند. حتما تاکنون در بسیاری از وب سایت‌های معروف متوجه دکمه "ورود به سیستم با گوگل" شده‌اید. React Google Login به شما امکان می‌دهد همان عملکرد را داشته باشید و روند دسترسی را برای شما آسان می‌کند. تمام آنچه شما نیاز دارید یک کلید API از طرف گوگل است و در نهایت میتوانید با استفاده از این پکیج ساده Google OAuth را در وب سایت خود پیاده سازی کنید.
Formik
Formik با توجه به همه موارد تکراری مانند پیگیری وضعیت، تغییر کنترلرها، ارسال آنها، اعتبار سنجی و مواردی از این دست، کار دشوار ساخت فرم‌ها در React را آسان‌تر می‌کند. این کتابخانه فرم کوچک و ساده است و شما را تشویق می‌کند که وقت کمتری را برای نوشتن کدهای فرم اختصاص دهید و بر ساخت چیزهای بزرگ‌تر تمرکز کنید. به علاوه حاوی مستندات کامل است و یک آموزش اختصاصی برای آشنایی شما دارد.
React Query
یک بخش اساسی از برنامه وب، واکشی داده‌ها از API بک-اند و بارگیری آنها در کامپوننت است. اگر از Redux استفاده می‌کنید، ممکن است این فرآیند عملیاتی را در قلاب useEffect شما ایجاد کند تا هنگام نصب کامپوننت، داده‌ها را از بک-اند خود واکشی کنید. خوب اگر راه بهتری برای این روش وجود داشته باشد چه؟
React Query یک کتابخانه عالی برای جمع آوری داده‌ها می‌باشد و بهترین گزینه برای استفاده در این موارد است. نه تنها برای واکشی، بلکه می‌تواند حافظه پنهان، همگام سازی، به روزرسانی state سرور، صفحه بندی و حتی بارگذاری تنبل را نیز انجام دهد. همه چیزهایی که برای پربارتر کردن تعاملات خود با بک-اند نیاز دارید در این کتابخانه گنجانده شده است و به شدت توصیه می‌کنیم که آن را امتحان کنید. همچنین در کنار بهبود عملکرد، به شما کمک می‌کند تا کد خود را تمیزتر و قابل نگهداری کنید.
Styled Component
Styled Components یک کتابخانه CSS-in-JS است که الگوی رشته‌ای تگ شده جاوااسکریپت را برای ایجاد کامپوننت‌های HTML سبک طراحی کرده است. چرا باید این را نسبت به رویکرد CSS منظم در نظر بگیرید؟ Styled Components ساختاری شبیه به کامپوننت را برای عناصر مدل سازی شده سفارشی فراهم می‌کند و بارها شما را از تایپ className نجات می‌دهد. علاوه بر این برخی از ویژگی‌های ارزشمند مانند automatic vendor prefixing و automatic critical CSS را دارد. از آنجا که Styled Components از سینتکس CSS معمولی استفاده می‌کند، میتوانید خیلی سریع با آن سازگار شوید.
Axios
Axios یک سرویس گیرنده HTTP مبتنی بر promise بر پایه رابط XMLHttpRequest است که به شما کمک می‌کند درخواست‌های HTTP را برای واکشی برخی داده‌ها انجام دهید. اما صبر کنید، این همان چیزی نیست که واکشی بومی برای آن استفاده شده است. بله دقیقا مانند سایر پکیج‌ها، هدفش ساده سازی فرآیند و ارائه ویژگی‌های بیشتر از جمله تبدیل خودکار داده‌های JSON، درخواست رهگیری و داده‌های پاسخ، محافظت در برابر XSRF، لغو درخواست‌ها و ارائه API ساده‌تری برای کار با HTTP می‌باشد.
Framer Motion
Framer Motion یک کتابخانه انیمیشن شگفت انگیز برای React است و باعث می‌شود وب سایت‌های شما تعاملی و جذاب‌تر جلوه کنند. فقط به صفحه اول آنها مراجعه کنید، در نتیجه سهولت استفاده و تعداد ویژگی‌های ارائه شده مانند انیمیشن‌های عمومی، انیمیشن‌های مبتنی بر حرکت، انیمیشن‌های کشیدن، انیمیشن‌های پیمایشی و موارد دیگر را مشاهده خواهید کرد. بگذارید با این جمله تکمیل کنم: اگر به دنبال کتابخانه‌های انیمیشن بودید، به دنبال چیزی فراتر از Framer Motion نباشید.
Reselect
این پکیج خاص به ویژه در صورت استفاده از Redux بسیار مفید و کاربردی است و سعی در بهبود عملکرد با جلوگیری از محاسبات ناخواسته دارد. به طور خلاصه reselect یک کتابخانه سلکتور است که به شما امکان می‌دهد داده‌های مشتق شده از Redux را از طریق memorization و توسط سلکتورهای memorized محاسبه کنید. اگر کارایی نقش اساسی در برنامه React-Redux شما دارد، پس بدون شک Reselect را انتخاب کنید.
این لیستی از بهترین پکیج‌های NPM بود که فکر می‌کنم اگر با React کار می‌کنید حتما باید نگاهی به آنها بیندازید. شما از چه پکیج‌هایی برای ساده و کارآمدتر کردن روند کار خود استفاده کنید، نظرات خود را در بخش زیر با ما در میان بگذارید.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید