در این مقاله به معرفی تعدادی از کتابخانه ها و ابزار های مفید React می پردازیم.

React یک کتابخانه ی open source جاوا اسکریپت است که توسط فیسبوک توسعه داده شده است که اجازه ساختن UI های پیشرفته را می دهد. در این پست برخی از جالبترین عناصر React را که به شما در ایجاد یک رابط کاربری عالی کمک می کند معرفی می کنیم:

۱ . UI-Router for React

UI-Router برای React مسیریابی مبتنی بر حالت را برای برنامه ها فراهم می کند. به عنوان مثال، به جای ایجاد یک وبسایت سنتی، این جزء باعث می شود که از طریق حالت های مختلف یک برنامه React با هر صفحه ای که دارای محتوای خاص خود است، حرکت کند. همانطور که کاربر در حال حرکت است، برنامه نشانی اینترنتی مرورگر را تغییر می دهد و به کاربران اجازه می دهد تا صفحات خاصی را نشان دهند. UI-Router یک برنامه ی ساده و کاربردی است فوق العاده سریع است.

۲ . React-Bootstrap

React-Bootstrap ترکیبی از دو فریم ورک قدرتمند برای ایجاد یک کتابخانه از قطعات قابل استفاده مجدد است. شما نگاهی به سایت بوت استرپ بدون کدهای تکراری خواهید داشت. به همین دلیل است که این کتابخانه جاوااسکریپت امکان رندر صفحه را فراهم می کند.

۳ . Material-UI

به دنبال استفاده از طراحی مواد Google در ارتباط با React هستید؟ Material-UI مجموعه ای از اجزای React است که این کار را انجام می دهد. شما می توانید یک مجموعه ی گسترده ای از اجزای مفید مانند برنامه های کاربردی، مدالها، دکمه ها، کارت ها، جعبه های گفتگو، آیکون ها، منوها، لغزنده ها و موارد دیگر که در React را که با استفاده از اصول طراحی مواد نوشته شده اند پیدا کنید.

۴ . Gatsby.js

با LWith Gatsby.js شما قادر خواهید بود وب سایت های استاتیک را با استفاده از React ایجاد کنید. کتابخانه اجازه می دهد تا شما داده ها را از منابع مختلف مانند CMS مورد علاقه خود، API، پایگاه داده و یا حتی یک سیستم فایل بکشید. سایت ها می توانند از طریق خط فرمان یا دیگر بسته های “starter” برای کمک به سرعت بخشیدن در روند کارتان تولید شوند.

۵ . styled-components

کامپوننت های سبک به شما در سبک سازی واکنش کامپوننت ها با استفاده از کد CSS کمک می کنند. کد. همچنین نقشه‌برداری بین اجزا و سبک‌ها را حذف می‌کند، کهکل فرآیند را ساده‌تر می‌کند.

۶ . React Sketch.app

React Sketch.app، ایجاد اسناد قابل استفاده مجدد که از اجزای React در Sketch استفاده می کنند را قادر می سازد. این توسط Airbnb ساخته شده تا به مدیریت سیستم طراحی خود کمک کند و برای استفاده از اجزای واقعی React در طرح های شما اجازه می دهد. این یک ابزار واقعا قدرتمند است که به شما کمک می کند تا نمونه های بهتر را تولید کنید.

۷ . React Virtualized

React Virtualized کمک می کند لیست ها و جداول اسکرول طولانی را در حالت جذاب و بسیار قابل تنظیم برای کاربران به ارمغان می آورد. ارتفاع ردیف ثابت یا پویا را تنظیم می کند، به کاربران اجازه می دهد تا به ردیف های خاصی رفته و متغیرهایی را نمایش دهند که پیمایش در آن ها انجام می شود.

۸ . Blueprint

Blueprint یک جعبه رابط کاربری است که شامل مجموعه‌ای از اجزای React است.
این مجموعه شامل عناصر اساسی است که هر برنامه نیاز دارد مانند دکمه ها، آیکون ها و سیستم های ناوبری مختلف. ظاهر آن با Sass طراحی شده، بنابراین شما می توانید عناصر را به دلخواه سفارشی کنید.

۹ . Recharts

Recarchts یک کتابخانه نقشه برداری است که به شما اجازه می دهد تا به سرعت نمودار با اجزای React بسازید. این دستگاه با استفاده از عناصر SVG ساخته شده است، بنابراین آن را روی هر دستگاه مقیاس قابل استفاده است. از جمله اشکال مختلف خط، نوار و نمودار پراکندگی.

۱۰ . React DnD

با React DnD می توانید رابط های کشیدن و رها سازی پیچیده را با استفاده از اجزای React ایجاد کنید. داده ها را می توان بر اساس رویداد های کشیدن و رها کردن انتقال داده و اجزای آنها می توانند بر اساس وضعیت آنها تغییر کنند.