بهترین کتابخانه‌ها برای React در سال ۲۰۲۱

اگر در فضای وب کار کرده باشید حتما نام کتابخانه react را شنیده اید. این کتابخانه یکی از بزرگترین کتابخانه های توسعه front-end است و به شما اجازه می دهد صفحات خود را با استفاده از جاوا اسکریپت (به جای HTML) بسازید. معمولا کاربرد اصلی استفاده از react ساخت وب سایت های SPA یا Single Page Application است. در این مقاله می خواهیم به بررسی کتابخانه هایی بپردازیم که مکمل این فریم ورک بزرگ هستند و می توانند در پروژه ها، بسیار به شما کمک کنند.

۱. React Query

React Query در سال های اخیر به یکی از بزرگترین پکیج های مکمل برای react تبدیل شده است و در حال حاضر در گیت هاب بیش از ۲۰ هزار ستاره دارد. معمولا پروسه دریافت داده از منابع خارجی (درخواست بین شبکه ای) با react نیاز به نوشتن کد های زیادی دارد اما کتابخانه React Query به شما کمک می کنند چنین درخواست هایی را با کد هایی بسیار کم بنویسید.

نحوه کار این کتابخانه بدین صورت است که از یک هوک به نام useQuery استفاده می کند. به عبارت ساده تر به ما اجازه می دهد بدو تعریف کردن یک متغیر برای state  بتوانیم به تمام داده های مورد نظر دسترسی داشته باشیم. البته باید در نظر داشت که دریافت داده ها بدین شکل فقط بخش ساده ای از قدرت زیادی این کتابخانه است. یکی از بزرگترین دلایل استفاده از این کتابخانه، قابلیت کش کردن درخواست ها است! یعنی چه؟ یعنی اگر منابعی را قبلا درخواست زده باشیم و حالا بخواهیم دوباره به آن دسترسی پیدا کنیم نیازی به ارسال درخواست جداگانه نیست بلکه می توانیم مستقیما داده ها را از کش بخوانیم.

این مسئله باعث می شود فشار وارد شده به API ما به شدت کاهش پیدا کند و همچنین سرعت برنامه را بالا می برد.

۲. Ant Design

زمانی که صحبت از استفاده از کامپوننت های آماده می شود، کمتر پکیجی است که به شهرت Ant Design رسیده باشد. این پکیج مجموعه ای از کامپوننت های آماده را دارد که به شکل بسیار زیبایی طراحی شده اند و شما می توانید در هر بخشی از برنامه خود از آن ها استفاده کنید.

معمولا زمانی از این پکیج استفاده می شود که بخواهیم زمان نیاز برای توسعه را به شدت کاهش بدهیم و در عین حال از زیباترین کامپوننت های موجود برای react استفاده کنیم. در ضمن بسیاری از این کامپوننت ها کاملا حرفه ای طراحی شده اند و قابلیت هایی را دارند که کدنویسی آن ها از صفر کمی دشوار است (به طور مثال modal های حرفه ای و tooltip ها).

در هر حال اگر نیاز دارید وب سایتی را به سرعت بسازید یا می خواهید ظاهر سایتتان حرفه ای باشد پکیج ant design را پیشنهاد می کنم.

۳. Zustand

اگر با react آشنا باشید احتمال می دهم اسم redux را نیز شنیده باشید. پکیج redux یکی از مشهور ترین پکیج های موجود برای مدیریت state در برنامه های react است اما قدرت زیادش با کمی پیچیدگی نیز همراه است و باید برای یادگیری آن وقت بگذارید. از طرف دیگر خود کتابخانه react نیز قابلیتی به نام context دارد که به شما اجازه می دهد داده های مورد نظر خود را بین کامپوننت های مختلف به اشتراک بگذارید. react context ها ساده هستند اما از طرفی قدرت redux را ندارند.

اگر به دنبال پکیجی هستید که قدرت redux و سادگی context را ترکیب کرده باشد باید به Zustand  مراجعه کنید. شما در این پکیج یک تابع تعریف می کنید که یک شیء خاص state را برایتان می سازد و تمام خصوصیات و داده های state شما را در خود خواهد داشت. از طرف دیگر هیچ context provider ای مجبور به ارائه state شما به کامپوننت های برنامه نیست. این پکیج پیشنهاد من برای مدیریت state در برنامه های react است.

۴. React Bootstrap

تمام توسعه دهندگان front-end با کتابخانه بسیار مشهور Bootstrap آشنا هستند. پکیج React Bootstrap همان کتابخانه bootstrap را برای react بازنویسی کرده است که امروزه با حدود ۲۰ هزار ستاره در گیت هاب تبدیل به یکی از محبوب ترین کتابخانه های کامپوننت برای react شده است.

در نظر داشته باشید که این کتابخانه همه چیز را از صفر بازسازی کرده است بنابراین به جای اینکه استایل های CSS و جاوا اسکریپت را به صورت ترکیب شده داشته باشید، عملا کامپوننت هایی را دارید که صد در صد با react نوشته شده اند. این مسئله به معنی حذف کتابخانه های آزاردهنده و قدیمی مانند jQuery است. همچنین تمامی کامپوننت های ساخته شده در این کتابخانه گوشه چشمی به استفاده آسان و زیبایی نیز داشته اند بنابراین علاوه بر کنترل بیشتر روی کامپوننت هایتان، به کیفیت بصری بالایی دسترسی دارید.

۵. Material UI

Material Design نام مجموعه ای از قرار داد ها و زبانی برای طراحی ظاهر برنامه های وب و موبایل است. گوگل در سال ۲۰۱۴ Material Design را معرفی کرد و از آن زمان تا به حال دچار تغییرات زیادی شده است اما یک اصل همیشه ثابت است: Material Design از محبوب ترین قرارداد های توسعه بین طراحان گرافیک و وب بوده است.

کتابخانه Material-UI کتابخانه ای بزرگ از کامپوننت های react است که بر اساس ویژگی های Material Design ساخته شده است. این کتابخانه در حال حاضر حدود ۶۷ هزار ستاره در گیت هاب دارد که نشان از قدمت و محبوبیت این کتابخانه می دهد. تمرکز بزرگ این کتابخانه روی تمیز بودن کد ها است بنابراین استفاده از آن بسیار ساده است. مثلا برای ساخت یک دکمه ساده در آن بدین شکل عمل می کنیم:

import React from 'react';

import { Button } from '@material-ui/core';




function App() {

  return <Button color="primary">Hello World</Button>;

}

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

۶. React Hook Form

React Hook Form یک کتابخانه هوک محور است که به شما اجازه اعتبارسنجی داده ها را می دهد. بر اساس بنچمارک های انجام شده توسط گروه React Hook Form این کتابخانه سرعت بسیار بیشتری نسبت به کتابخانه های مشابه خود دارد.

این کتابخانه برای اعتبارسنجی از هوک (hook) های react استفاده می کند بنابراین عملیات اعتبارسنجی داده ها بسیار ساده و راحت خواهد بود. همچنین برای دریافت داده ها از فیلد های فرم شما از ref استفاده می شود بنابراین عملا در حال نوشتن جاوا اسکریپت استاندارد هستیم.

از مزیت های دیگر این کتابخانه می توان به نوشته شدن آن با تایپ اسکریپت اشاره کرد. این کتابخانه با استفاده از تایپ اسکریپت، تایپ های آماده ای را در اختیارتان قرار می دهد که احتمال خطا و نوشتن کد اشتباه را به شدت پایین می آورد و طبیعتا زمان توسعه را نیز به شدت کم می کند. در ضمن لازم به ذکر است که این کتابخانه می تواند با تمام برنامه های مدیریت state در react نیز ترکیب شود بنابراین از این جهت هیچ مشکلی نخواهید داشت.

۷. Rebass

Rebass یک کتابخانه بسیار کوچک از کامپوننت های UI است که توانایی تعریف تم (theme) را دارند. باید در نظر داشته باشید که این کتابخانه بسیار کوچک است و برای افرادی ساخته شده است که به طراحی مینیمال سوق پیدا کرده اند.

در این پکیج فقط ۸ کامپوننت اصلی در یک فایل بسیار کوچک قرار دارند و همگی برای طراحی وب واکنش گرا (responsive) طراحی شده اند. این پکیج دارای یک ThemeProvider می باشد که به شما اجازه می دهد آن را به دیگر بخش های سیستم خود نیز گسترش بدهید. اگر دوست ندارید از کتابخانه های کامپوننت آماده و بزرگ در react استفاده کنید، Rebass یکی از بهترین گزینه ها برای شما است چرا که در عین مینیمال بودن به شما اجازه شخصی سازی نیز می دهد.

۸. React Router

React Router یک کتابخانه کامپوننت برای پیاده سازی navigation در برنامه های SPA است و انجام این کار را برای توسعه دهندگان بسیار ساده می کند.

علاوه بر این، React Router از transition های زیبایی در بین صفحات استفاده می کند. transition ها انیمیشن های کوتاه و جذابی هستند که به کاربر نشان می دهند در حال جا به جا شدن بین صفحات است. مزیت دیگر این پکیج این است که به طور کامل از server-side rendering پشتیبانی می کند و توانایی nesting را نیز در آن خواهید داشت. باید در نظر داشته باشید که این کتابخانه مجموعه ای از کامپوننت های ناوبری یا navigational است و به شما اجازه می دهد در برنامه های SPA صفحات خود را bookmark کنید.

۹. Semantic UI React

به احتمال زیاد همه شما نام Semantic UI را شنیده اید. Semantic UI یک کتابخانه بزرگ برای طراحی front-end است و در سال های اخیر همیشه رقیبی جدی برای بوت استرپ به شما رفته است. مسئله اینجاست که Semantic UI به صورت پیش فرض یک کتابخانه ساده CSS است بنابراین باید راهی برای ترکیب آن با react پیدا کنیم.

Semantic UI React نسخه رسمی Semantic UI برای فریم ورک react است. این کتابخانه از jQuery برای اضافه کردن برخی از قابلیت های اضافه به Semantic UI استفاده می کند تا این کتابخانه را برای پروژه react ای شما آماده کند. در این پروژه از JSX استفاده شده است تا کامپوننت هایش را مستقیما به کد های شما متصل کند.

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

۱۰. Redux

زمانی که صحبت از کتابخانه های react می شود ممکن نیست نام redux در لیست نباشد. redux یک برنامه مدیریت state می باشد اما برخلاف تصور عموم توسعه دهندگان، هیج انحصار خاصی در استفاده با react ندارد. شما می توانید از redux در Vue یا Angular یا Ember نیز استفاده کنید.

کار اصلی redux ارائه یک سیستم سراسری از state است که نیاز شما به پاس دادن prop ها را به طور کلی از بین می برد. تفاوت redux با بسیاری از برنامه های مدیریت state دیگر در react این است که redux قدرت و امکانات بسیار زیادی دارد و بیشتر برای برنامه های متوسط و بزرگ ساخته شده است. از مزایای این پکیج می توانیم به پشتیبانی گسترده آن و همچنین قابلیت ویرایش کد در هنگامی که برنامه روی سرور است اشاره کنیم. همچنین React Native نیز یک نسخه خاص از redux را دارد که نامش را React-Redux گذاشته است.

۱۱. React Responsive

از نظر تاریخی برای ریسپانسیو کردن یک سایت خاص همیشه از media query ها در زبان CSS استفاده می شده است اما پکیج React Responsive در ظاهر این کار را به روش دیگری انجام می دهد.

React Responsive ابزاری برای برنامه های react است که به شما اجازه استایل دهی و تعیین visibility (نمایش یا عدم نمایش عناصر) را می دهد. اگر بخواهیم به زبان ساده تر بگوییم، این پکیج روشی برای ساخت media query ها درون react است و در هنگامی که بخواهید روی عناصر خود کنترل داشته باشید بسیار کاربردی خواهد بود. مزیت اصلی این پکیج این است که کد های جاوا اسکریپت و CSS شما را از هم جدا نمی کند.

۱۲. Chakra UI

Chakra UI یک کتابخانه کامپوننت دیگر برای react است که به توسعه دهندگان اجازه می دهد تمرکز خود را روی ساخت تجربه کاربری بهتر بگذارند و در عوض مسئولیت طراحی را به Chakra UI بسپارند.

کامپوننت های UI در این پکیج کاملا ماژولار هستند و استفاده از آن ها هیچ نیازی به دانش تخصصی ندارد. این پکیج مجموعه ای از کامپوننت های ساده مانند Box و Stack را نیز دارد که به شما اجازه می دهند آن ها را با استفاده از prop ها استایل دهی کنید! یک مزیت جالب دیگر این کتابخانه این است که تمام کامپوننت های آن با حالت شب (dark mode) سازگاری دارند و می توانید به راحتی این حالت را در برنامه هایتان ایجاد کنید.

۱۳. Grommet

Grommet یک فریم ورک کامل بر اساس react است که قابلیت های بسیار زیادی را در اختیار شما قرار می دهد. به طور مثال تمام کامپوننت های استفاده شده در این فریم ورک ماژولار هستند و همچنین تم های زیادی را به صورت پیش فرض در اختیار خواهید داشت.

طراحی با Grommet به معنی طراحی mobile-first است که باب طبع گوگل نیز می باشد. این پکیج با تمام امکاناتی که در اختیار شما قرار می دهد، پیچیدگی خاصی ندارد و هرکسی که بتواند با react کار کند می تواند به راحتی با Grommet نیز کار کند. یکی از محبوب ترین مزایای Grommet این است که به شما اجازه می دهد آن را به پروژه هایی اضافه کنید که از قبل و بدون Grommet نوشته شده اند. در ضمن Grommet از قانون WCAG 2.1 پیروی می کند بنابراین کاربرانی که از کیبورد یا ابزار های صفحه خوان استفاده می کنند (افرادی که کم بینا یا نابینا هستند) می توانند از وب سایت شما نیز استفاده کنند. در نظر داشته باشید که کمپانی های بزرگی مانند Netflix و Boeing از این سرویس استفاده می کنند.

۱۴. Fluent UI

Fluent UI که قبلا با نام Fabric React شناخته می شد یک کتابخانه UI دیگر برای react است که توسط تیم ماکروسافت طراحی شده است. این کتابخانه قابلیت هایی نظیر برنامه های office ماکروسافت را در اختیار شما می گذارد.

Fluent UI با سیستم های دسکتاپ، اندروید و آی او اس سازگاری دارد و بر اساس سایت های ماکروسافت مانند Office 365 و OneNote و Azure DevOps طراحی شده است. این پکیج مجموعه ای از کامپوننت های آماده است که از زبان خاص طراحی ماکروسافت به نام Office Design Language پیروی می کنند. اگر برنامه شما قابلیت هایی مانند برنامه های Office ماکروسافت دارد این پکیج یک انتخاب عالی برای شما است.

۱۵. Evergreen UI

کمپانی مشهور Segment یک فریم ورک UI برای کتابخانه react به نام Evergreen را معرفی کرده است که با استقبال خوبی در گیت هاب روبرو شده است (۱۰ هزار ستاره).

تمرکز پروژه Evergreen روی سادگی و سبک بودن پکیج بوده است بنابراین تجربه بی نظیری را برایتان به ارمغان می آورد. این پکیج به صورت پیش فرض با react سازگار است و نیازی به پیکربندی های اضافه یا تنظیمات جداگانه ندارد. همچنین این پکیج به طوری طراحی شده است که پاسخگوی پروژه های بزرگ و بین المللی نیز باشد.

۱۶. SWR

کتابخانه SWR شباهت زیادی به React query دارد اما به دلیل شهرت بالایش باید آن را در این لیست قرار می دادم. این کتابخانه بر اساس React Hooks تعریف شده است و برای دریافت داده ها از منابع مختلف به کار می رود.

اساس کار این کتابخانه مفهوم stale-while-revalidate است. یعنی سعی می کند ابتدا داده ها را از یک لایه کش به شما بدهد و اگر در این کار موفق نبود به سراغ ارسال درخواست های جدید می رود. از نقاط قوت این پکیج می توان به Backend Agnostic بودن آن اشاره کرد که یعنی به تکنولوژی backend شما (چه PHP چه Node.js چه Deno و الی آخر) توجهی ندارد و در همه حال کار می کند. همچنین به صورت پیش فرض از تایپ اسکریپت پشتیبانی کرده و در عین حال بسیار سبک است.

۱۷. Styled Components

Styled Components یک کتابخانه بسیار پرطرفدار و صد البته جالب برای react است. این کتابخانه که با React Native نیز سازگار است به شما اجازه می دهد دستورات مربوط به استایلینگ و زبان CSS را در همان کامپوننت های خودتان یا در کامپوننت هایی جداگانه بنویسید.

استفاده از این پکیج مزیت های زیادی دارد. اولین مزیت عدم درگیری نام کلاس ها و استایل های شما با یکدیگر است. همانطور که می دانید در شیوه عادی نوشتن CSS کلاس ها و تمام سکلتور ها باید نامی یکتا داشته باشند اما هر از گاهی این موضوع از زیر دست طراحان وب در رفته و باعث ایجاد مشکلات در سایت می شود. Styled Components به شما اجازه می دهد استایل های هر کامپوننت را درون خودش و با جاوا اسکریپت بنویسید بنابراین هیچ مشکلی از این نظر نخواهید داشت.

از طرف دیگر این کتابخانه ساختار پروژه شما و کد های نوشته شده در آن را بسیار مرتب تر می کند چرا که همه چیز در یک بخش واحد قرار دارد. مثلا اگر در آینده بخواهید بخشی از سایت یا کامپوننت خاصی را ویرایش کنید کافی است به فایل جاوا اسکریپتی آن کامپوننت مراجعه کرده و تغییرات را در آن اعمال کنید. این پروژه در حال حاضر در گیت هاب ۳۰ هزار ستاره دارد.

۱۸. Enzyme

Enzyme یک ابزار تست نویسی برای کامپوننت های react می باشد که در سال های اخیر سر و صدای زیادی را به پا کرده است. این پکیج توسط تیم توسعه شرکت بزرگ AirBnB ساخته شده است و به صورت یک پروژه Open-Source یا متن باز از سال ۲۰۱۵ روی گیت هاب قرار گرفته است.

هدف اصلی این پکیج ساده تر کردن تست نویسی و در کل تست کردن کامپوننت های react است. چطور؟ Enzyme با تقلید از API ساده jQuery در هنگام کار با عناصر DOM به شما اجازه می دهد با کامپوننت های برنامه خود تعامل داشته باشید و انواع و اقسام عملیات های تستینگ مانند assert و manipulate و traverse را به سادگی انجام دهید.

احتمالا برایتان سوال باشد که Enzyme چه تفاوتی با ابزار پیش فرض react برای تست نویسی (TestUtils) دارد؟ اگر نگاهی فنی به Enzyme داشته باشیم متوجه خواهیم شد که Enzyme در پشت صحنه از بسیاری از قابلیت های TestUtils استفاده می کند اما در عین حال کار را بسیار ساده تر و سریع تر می کند بنابراین یک سر و گردن بالاتر از TestUtils محسوب می شود.

۱۹. React Virtualized

همانطور که می دانید برنامه های ساده HTML ای که در ابتدای تاریخ وب حضور پررنگی داشتند،  صفحات سایت شما را در سمت سرور ساخته و سپس به کاربر ارسال می کردند اما برنامه های SPA مانند برنامه هایی که با React ساخته می شوند قسمتی از بار پردازش داده را به عهده سیستم کاربر (تلفن همراه یا کامپیوتر) می گذارند. چطور؟ برنامه های SPA معمولا داده ها را مستقیما از یک API دریافت می کنند و سپس کد های جاوا اسکریپت سمت کاربر صفحه وب را با آن داده ها می سازند.

این مسئله باعث می شود نمایش لیست های بزرگ و طولانی برای کاربرانی که گوشی های ضعیفی دارند کمی سخت باشد و زمان بیشتری را به خود اختصاص بدهد. پکیج React Virtualized یک کامپوننت خاص برای چنین برنامه هایی است و به شما اجازه می دهد لیست های بزرگ را به صورت بهینه در صفحه هایتان نمایش بدهید. این پکیج در پشت صحنه از روش های مختلفی برای کنترل نمایش این لیست ها استفاده می کند (به طور مثال تعداد درخواست های دسترسی به DOM را کاهش می دهد) تا سرعت کار بالا برود.

۲۰. React DnD

ساخت اینترفیس های drag & drop همیشه کار سختی بوده است، چه از تکنولوژی های قدیمی مانند jQuery استفاده کنید و چه بخواهید از تکنولوژی های امروزی تر مانند react استفاده کرده باشید. البته در سال های اخیر HTML5 یک API برای ایجاد drag & drop را معرفی کرد و انجام این کار را بسیار ساده تر کرده است اما هنوز هم پیاده سازی آن با دست خالی در react زمان گیر خواهد بود.

کتابخانه React DnD از همان API ارائه شده توسط HTML5 استفاده کرده و یک اینترفیس بسیار پیشرفته و عالی را برای عملیات های drag & drop ارائه می دهد. کتابخانه های بسیار زیادی شبیه به React DnD وجود دارند اما از آنجایی که React DnD از همان API ارائه شده در HTML5 استفاده می کند، ساختار بهتر و قابل اعتماد تری دارد. تنها عیب این پکیج این است که از صفحات لمسی پشتیبانی نمی کند بنابراین خصوصیت drag & drop در موبایل ها و تبلت ها را از دست می دهید.

باید در نظر داشت که برای drag & drop های ساده نیازی به استفاده از پکیج هایی مانند React DnD نیست. این پکیج بیشتر برای برنامه هایی مفید است که نیاز به drag & drop پیچیده دارند. مثلا برنامه های Trello و Storify که با کشیدن و رها کردن عناصر، داده ها را در بخش های مختلف برنامه جا به جا می کنند نیاز به چنین پکیجی خواهند داشت.

۲۱. React Intl

هر زبانی دارای قوانین و دستورات خودش است و برخی از اوقات نیاز است که از چندین زبان در وب سایت خودمان پشتیبانی کنیم اما ساخت یک وب سایت چند زبانه کار آسانی نیست.

کتابخانه React Intl که توسط تیم yahoo توسعه داده شده است مسئول پیاده سازی چنین قابلیتی در سایت شما است. این پکیج دارای کامپوننت های آماده مربوط به انتخاب زبان است و API خاصی جهت تبدیل رشته ها به هم، تبدیل تاریخ ها (میلادی به شمسی و غیره)، تبدیل اعداد، مدیریت اسامی جمع و تمام قابلیت های مورد نیاز شما را دارد.

منبع: وب سایت dev.to