19 فریمورک برتر کامپوننت رابط کاربری React

گردآوری و تالیف : عرفان کاکایی
تاریخ انتشار : 26 اسفند 1397
دسته بندی ها : جاوا اسکریپت

طبق گزارشات، React در سال‌های 2017 و 2018 حدود 150 درصد رشد داشته است. برخی کتابخانه‌ها را ترجیح می‌دهند، و برخی ترجیح می‌دهند که کامپوننت‌های خود را خودشان توسعه دهند. در هر صورت، در اینجا لیستی از 19 کتابخانه کامپوننت رابط کاربری و فریمورک را خواهید دید.

1. Material-UI

کامپوننت‌های React که طراحی متریال گوگل را پیاده‌سازی می‌کنند. این مورد با بیش از 35 هزار ستاره در گیت‌هاب، پر استفاده‌ترین مورد است.

2. React Bootstrap

کامپوننت‌های Bootstrap 3، ساخته شده با استفاده از React. با این که منتظر پشتیبانی از Bootstrap 4 هستیم، این کتابخانه با داشتن 13 هزار ستاره همچنان محبوب باقی مانده است.

3. Grommet

کامپوننت‌های رابط کاربری React زیبا که بر روی تجربه کاربری تمرکز دارند. این کامپوننت‌ها با بیش از 3 هزار ستاره، به طراحی ساده ولی زیبای خود افتخار می‌کنند.

4. Ant Design React

کامپوننت‌های معروف React که از دستورالعمل‌های طراحی Ant پیروی می‌کنند. این کامپوننت‌ها با استفاده از Typescript نوشته شده‌اند و پشتیبانی خوبی دارند.

5. Blueprint

یک جعبه‌ابزار رابط کاربری بر پایه React برای وب، با بیش از 9 هزار ستاره و 100 شرکت‌ کننده. این کامپوننت‌ها با استفاده از TS نوشته شده‌آند و با استفاده از Sass، برای توسعه سریع استایل‌بندی شده‌اند.

6. Reactstrap

این کتابخانه، کامپوننت‌های ساده Bootstrap 4 را فراهم می‌کند. این کتابخانه با داشتن بیش از 4 هزار ستاره و نزدیک 100 شرکت کننده، گزینه‌ محبوبی برای طرفداران Bootstrap است.

7. React Toolbox

React Toolbox مجموعه‌ای از کامپوننت‌های React است که طراحی متریال گوگل را پیاده‌سازی می‌کنند. این مجموعه بر پایه مواردی مانند ماژول‌های CSS، Webpack و ES6 ساخته شده است و با داشتن تقریبا ۸ هزار ستاره، بسیار محبوب است.

8. React Desktop

یک کتابخانه کامپوننت رابط کاربری که هدفش آوردن تجربه دسکتاپ به وب است، و بسیاری کامپوننت‌های Sierra و Windows 10 را به همراه دارد.

9. Semantic UI React

Semantic UI React ادغام رسمی React برای رابط کاربری Semantic است. این مورد با داشتن ۶ هزار و ۵۰۰ ستاره، توسط سازمان‌های بزرگی مانند Netflix و Amazon استفاده می‌شود.

10. Onsen UI React

بیش از 100 کامپوننت که خصوصا برای طراحی متریال و Flat ساخته شده‌اند و فریم‌وورک‌های رابط کاربری Onsen را به React می‌آورند، تا بتوانید برنامه‌های دورگه بسازید.

11. Rebass

کتابخانه و سیستم طراحی کامپوننت رابط کاربری React. این مورد با داشتن تقربیا ۴ هزار ستاره، انتخاب خوبی برای طرفداران Styled-componentها است.

Rebass

12. Elemental UI

یک ابزار رابط کاربری آزمایشی برای وبسایت‌ها و برنامه‌های React.js، که ۴ هزار ستاره دارد و در حال حاضر توسط نویسندگان Keystone.js و Thinkmill توسعه داده می‌شود.

13. Belle

مجموعه‌ای از کامپوننت‌های React که برای موبایل و دسکتاپ بهینه‌سازی شده‌اند و استایل‌هایی با قابلیت سفارشی‌سازی بالا دارند و می‌توانند به صورت کلی، یا تک به تک پیکربندی شوند.

14. Prime React

گرچه این پروژه کمتر از ۴۰۰ ستاره دارد، مجموعه ۶۰ تایی کامپوننت‌های رابط کاربری آن که چندین تم مختلف دارد، می‌تواند کاربردی باشد.

15. Carbon Components

کامپوننت‌های React بر پایه سیستم طراحی Carbon.

16.Gestalt

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

17. Material Components Web

این کتابخانه که توسط گروهی از مهندسان و طراحان در گوگل ساخته شده است، جایگزین react-mdl شد و در حال حاضر حدود ۷ هزار ستاره دارد.

18. React MD

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

19. React Virtualized

مجموعه‌ای بی نقص از کامپوننت‌های React برای بصری‌سازی مجموعه‌های عظیم داده‌ها. این مجموعه با بیش از 10 هزار ستاره، کاملا محبوب و کاربردی است.

منبع

مقالات پیشنهادی

  • Grommet فریمورک رابط کاربری مبتنی بر React 

    فریمورک Grommet یک فریمورک برای طراحی و پیاده سازی رابط کاربری وبسایت است. از فریمورک های دیگری که می توان جایگزین این فریمورک دانست می توان بوت استرپ...

    ارسطو عباسی
  • 10 نکته مهم در طراحی رابط کاربری

    یک وبسایت فراتر از چند برگه که از طریق لینک‌ها با همدیگر متصل شده‌اند است. در این حیطه رابط کاربری وجود دارد، فضایی که افراد مختلفی به آن وارد شده و ا...

    ارسطو عباسی
  • تفاوت رابط‌ کاربری و تجربه‌ کاربری

    در این مطلب قصد دارم دو مفهوم که به صورت وسیعی استفاده می‌شود را به سرعت توضیح دهم. طراحی رابط کاربری و طراحی تجربه کاربری. اولین موردی که می‌خواهیم ب...

    ارسطو عباسی