30 کتابخانه خفن ری اکت در سال 1403! بهترین کتابخانه های React !

ری اکت یک کتابخانه جاوااسکریپی قدرتمند و محبوب هست که از سال 2013 که منتشر شد تا به الان، روز به روز به محبوبیتش افزوده شده! برای ری اکت کتابخانه های قدرتمند و کاربردی خیلی خیلی زیادی منتشر شده که باعث شدن استفاده از React لذت بخش تر و آسون تر بشه! کتابخانه های ری اکت خیلی زیادی وجود داره که ما به عنوان React Developer باید باهاشون آشنا باشیم و درصورت لزوم ازشون استفاده کنیم! اما شاید اصلا از وجود برخی از این کتابخانه ها خبر نداشته باشیم! خب اصلا نگران نباشید چون قراره تو این مقاله 30 مورد از بهترین کتابخانه های ری اکت رو مرور و بررسی کنیم 🙂

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

خب بریم ببینیم خفن ترین و بهترین کتابخانه های ری اکت چی هستن 🙂

1

کتابخانه ری اکت روتر ( React Router )

همونطور که میدونیم React یک کتابخانه SPA ( Single Page Application ) هست. SPA به معنی اپیکیشن تک صفحه ای هست.

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

از طرفی نیاز داریم بدون Reload شدن صفحه، این جابجایی بین صفحات صورت بگیره.

بدون استفاده از کتابخانه های Routing این کار تقریبا غیرممکنه! به همین دلیله که کتابخانه React-Router یک عضو جدانشدنی از ری اکت هست!

کتابخانه React-Router تمامی پروسه Routing رو برای ما مدیریت میکنه و دیگه نگرانی از بابت جابجایی بین صفحات مختلف وبسایت نخواهیم داشت!

کتابخانه ری اکت روتر تقریبا تو همه پروژه هایی که نیاز به چندین صفحه و جابجایی بین صفحات دارن، استفاده میشه. پس میشه گفت استفاده نکردن ازش غیر ممکنه !

بریم سراغ دومین مورد از بهترین کتابخانه های React …

2

کتابخانه Antd در ری اکت ( Ant Design )

کتابخانه Ant Design در ری اکت شامل مجموعه بسیار گسترده و متنوع از کامپوننت های از پیش ساخته شده و آماده برای توسعه اپیکیشن های ری اکتی هست!

این کتابخانه بیش از 75 کامپوننت آماده داره که هم ظاهر جذابی دارن و هم امکانات فوق العاده ای در اختیار ما میزارن.

بطور مثال دیگه نیازی نیست زمان زیادی برای طراحی و پیاده سازی یک کامپوننت Table ( جدول ) بزاریم!

خود یک کامپوننت Table آماده داره که بصورت کامل ریسپانسیو هست و ظاهر جذابی داره. همچنین از ویژگی های پبیشرفته ای مثل Nested Table هم پشتیبانی میکنه! پیاده سازی چنین کامپوننتی قطعا زمان خیلی زیادی از ما میگیره.

گاهی اوغات که زمان کمی برای پیاده سازی یک پروژه ری اکتی داریم، کتابخانه آنت دیزاین به ما خیلی کمک میکنه تا تمرکز خودمون رو، روی پیاده سازی Logic بزاریم.

تو لیست زیر میشه کامپوننت های آماده Ant Design رو دید :

کامپوننت Button
کامپوننت FlatButton
کامپوننت Icon
کامپوننت Typography
کامپوننت Divider
کامپوننت Flex
کامپوننت Grid
کامپوننت Layout
کامپوننت Space
کامپوننت Anchor
کامپوننت Breadcrumb
کامپوننت Dropdown
کامپوننت Menu
کامپوننت Pagination
کامپوننت Steps
کامپوننت AutoComplete
کامپوننت Cascader
کامپوننت Checkbox
کامپوننت ColorPicker
کامپوننت DatePicker
کامپوننت Form
کامپوننت Input
کامپوننت ImputNumber
کامپوننت Radio
کامپوننت Mentions
کامپوننت Select
کامپوننت Rate
کامپوننت Slider
کامپوننت Switch
کامپوننت TimePicker
کامپوننت Transfer
کامپوننت TreeSelect
کامپوننت Upload
کامپوننت Avatar
کامپوننت Badge
کامپوننت Calendar
کامپوننت Card
کامپوننت Carousel
کامپوننت Collapse
کامپوننت Descriptions
کامپوننت Empty
کامپوننت Image
کامپوننت List
کامپوننت Popover
کامپوننت QRCode
کامپوننت Segmented
کامپوننت Statistic
کامپوننت Table
کامپوننت Tabs
کامپوننت Tag
کامپوننت Timeline
کامپوننت Tooltip
کامپوننت Tour
کامپوننت Tree
کامپوننت Alert
کامپوننت Drawer
کامپوننت Message
کامپوننت Modal
کامپوننت Notification
کامپوننت Popconfirm
کامپوننت Progress
کامپوننت Result
کامپوننت Skelton
کامپوننت Spin
کامپوننت Watermark
کامپوننت Affix
کامپوننت App
کامپوننت ConfigProvider
کامپوننت PopLayout
کامپوننت PropForm
کامپوننت PropTable
کامپوننت PropDescription
کامپوننت PropList
کامپوننت EditablePropTable
و…

استفاده از این کتابخانه کمک میکنه تا زمان کمتری صرف ساخت و پیاده سازی UI کنیم و زمان و تمرکز خودمون رو روی Logic بزاریم.

اگه دوست دارید بیشتر راجب این کتابخانه بدونید، ما تو مقاله کتابخانه Ant Design بصورت تخصصی بررسیش کردیم 🙂

3

کتابخانه Tailwind UI در ری اکت

کتابخانه Tailwind UI در ری اکت تا حدود زیادی شبیه به کتابخانه Ant Design هست. Tailwind UI در ریکت یک low-level css freamwork هست که شامل بیش از 500 کامپوننت و طرح آماده و از پیش ساخته شده بوسیله Tailwind هست.

نکته مثبتی که Tailwind UI داره این هست که بجای کامپوننت آماده، کلاس های Tailwind رو به شما میده. به همین دلیل این کتابخانه حجم خیلی کمی داره و در عوض انعطاف پذیری خیلی خیلی بالایی داره.

با کتابخانه Tailwind UI در ری اکت به صدها کامپوننت و طرح آماده دسترسی دارین.

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

4

کتابخانه Semantic UI React در ری اکت

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

کتابخانه Semantic UI React در ریکت شامل ده ها کامپوننت و اِلِمان آماده و از پیش ساخته شدس.

این کتابخانه سازگاری فوق العاده خوبی با کتابخانه ری اکت داره.

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

5

کتابخانه React Bootstrap در ری اکت

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

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

6

کتابخانه Fabric React در ری اکت

کتابخانه Fabric React در ری اکت معمولا با اسم Office UI Fabric هم شناخته میشه و یکی از مشهور ترین کتابخانه های UI برای کتابخانه ری اکت هست.

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

7

کتابخانه Styled-Components در ری اکت

کتابخانه Styled-Components در ری اکت به ما اجازه میده از تکنیک css-in-js استفاده کنیم. در حقیقت به کمک Styled-Components در ریکت میتونیم درون کامپوننت خودمون از Css و JS درکنار هم استفاده کنیم و ترکیبشون کنیم.

در حقیقت به کمک این کتابخانه دیگه نیازی به فایل های .css نداریم و میتونیم داخل کامپوننت خودمون Css بنویسیم.

8

کتابخانه React DnD در ری اکت

کتابخانه React Dnd در ری اکت به ما اجازه میده از قابلیت Drag & Drop تو اپیکیشن خودمون استفاده کنیم.

در حقیقت React DnD در ریکت به ما این امکان رو میده که کاربر بتونه هرچیزی رو Drag کنه و در هربخشی از صفحه که ما مشخص کردیم Drop کنه.

React DnD در ری اکت با API داخلی HTML پیاده سازی شده و در پشت صحنه از Redux استفاده میکنه.

پیاده سازی ویژگی Drag & Drop در ری اکت بدون React DnD کار سخت، پیچیده و زمانبری هست اما به لطف وجود این کتابخونه دیگه نگرانی از این بابت نداریم.

9

کتابخانه OnsenUI در ری اکت

کتابخانه OnsenUI در ری اکت یک کتابخانه UI محسوب میشه که به ما اجازه میده از کامپوننت ها و طرح های آماده از پیش ساخته شده استفاده کنیم.

OnsenUI در ریکت کامپوننت های زیادی برای دستگاه های موبایل داره و Performance مناسبی برای دستگاه های موبایل داره.

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

درصورت استفاده از کتابخانه OnsenUI در ری اکت، حتی کاربرانی که گوشی های قدیمی دارن، مشکلی از بابت سرعت نخواهند داشت.

از طرفی یادگیری OnsenUI خیلی راحته و اصلا سخت نیست.

10

کتابخانه Rebass در ری اکت

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

کامپوننت هایی که Rebass در ریکت در اختیار ما میزاره، توسعه پذیرن، سازگاری خوبی با ری اکت دارن و بسیار کاربردی هستن.

11

کتابخانه Material UI در ری اکت

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

این کتابخانه بیش از 2.5 میلیون دانلود در هفته داره ( آمار Npm ) که نشون میده جامعه آماری فوق العاده و بزرگی داره.

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

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

اگه میخواید بیشتر درمورد این کتابخانه بدونید، ما تو مقاله کتابخانه Material UI بصورت تخصصی و جامع بررسیش کردیم 🙂

12

کتابخانه React-motion در ری اکت

کتابخانه های خیلی زیادی برای بحث انیمیشن در ری اکت وجود دارن اما کتابخانه React-motion از spring configuration برای اعمال انیمیشن استفاده میکنه و پیچیدگی خیلی کمی داره.

پیاده سازی انیمیشن به کمک React-motion در ریکت خیلی آسونه و نیاز به یادگیری خاصی نداره.

13

کتابخانه React Spinners در ری اکت

کتابخانه React Spinners در ری اکت شامل مجموعه ای عظیم از Spinner ها هست که مناسب ایجاد وضعیت Loading هستن.

بطور مثال زمانیکه میخوایم داده ای از سرور دریافت کنیم و داده رو به کاربر نمایش بدیم، این پروسه دریافت داده از سرور چند ثانیه طول میکشه.

تو این چند ثانیه بهتره یک انیمیشن به کاربر نمایش بدیم که متوجه بشه باید منتظر دریافت اطلاعات بمونه.

کتابخانه React Spinners در ریکت انیمیشن های زیبا، سبک و خیلی جالبی داره که مناسب چنین شرایطی هستن.

کتابخانه React-Spinners خیلی سبکه و حدود 500 کیلوبایت حجم داره. در عوض بیشتر از 250 هزار دانلود هفتگی داره که نشون میده جامعه آماری خوبی داره.

14

کتابخانه React Hook Form در ری اکت

کتابخانه React Hook Form در ری اکت به ما اجازه میده فرم های کارآمد، انعطاف پذیر و توسعه پذیر ایجاد کنیم که قابلیت اعتبار سنجی ( Validation ) داشته باشن.

فرم ها در ری اکت یکی از پرکاربرد ترین کامپوننت ها هستن که پیاده سازی اصولیشون سخت و زمانبره. کتابخانه React Hook Form در ریکت به ما اجازه میده خیلی راحت تر بتونیم فرم در ریکت ایجاد کنیم.

کتابخانه React Hook Form در ری اکت فقط 800 کیلوبایت حجم داره و بیش از 3 میلیون دانلود هفتگی داره!

نکته مثبت این کتابخانه، پشتیبانی از Yup,Zod,AJV,Superstruct و Joi هست.

برای نصب این کتابخانه از دستور زیر استفاده کنید :

				
					npm install react-hook-form

اگه میخواید این کتابخانه رو یاد بگیرید، ما تو مقاله کتابخانه React Hook Form بصورت جامع و تخصصی بررسیش کردیم 🙂

15

کتابخانه Enzyme در ری اکت

کتابخانه Enzyme در ری اکت برای تست نویسی کاربرد داره و معمولا نسبت به سایر کتابخانه های تست نویسی در ری اکت محبوب تره.

کتابخانه Enzyme در ریکت خیلی انعطاف پذیره و به همین دلیل نسبت به سایر کتابخانه های تست نویسی در ریکت ترجیح داده میشه.

اگه قصد تستی نویسی در ریکت رو دارید یا دمبال یک کتابخانه تست نویسی در ری اکت میگردید، کتابخانه Enzyme میتونه انتخاب خوبی باشه !

Enzyme در ری اکت یکی از محبوب ترین کتابخانه های تست نویسی هست و درحال حاضر بیشتر از 1.5 میلیون دانلود هفتگی داره. البته نکته منفی برای این کتابخانه عدم بروزرسانی از سوی توسعه دهندگان این کتابخانه هست چون آخرین بروزرسانی اون مربوط به 4 سال پیشه!

16

کتابخانه Redux در ری اکت

ریداکس یک کتابخانه مدیریت State هست ( State Management ) که تو تمام کتابخانه ها و فریمورک های جاوا اسکریپتی قابلیت استفاده داره.

ما تو مقاله ریداکس در ری اکت حسابی درمورد این کتابخانه صحبت کردیم، پیشنهاد میکنم برای آشنایی بیشتر مطالعه کنید.

این کتابخانه قابلیت استفاده در تمامی کتابخانه ها و فریمورک های جاوااسکریپتی رو داره.

تیم Redux کتابخانه React Redux رو منتشر کردن تا توسعه دهندگان ری اکت بتونن از ریداکس خیلی بهتر و راحت تر استفاده کنن.

کتابخانه react-redux بیشتر از 5.5 میلیون دانلود هفتگی داره که نشون میده محبوب ترین و پر استفاده ترین State Management برای ری اکت محسوب میشه.

ریداکس جامعه آماری خیلی خوبی داره و در عوض حجم کمی داره ( 300 کیلوبایت )

17

کتابخانه MobX در ری اکت

کتابخانه MobX در ری اکت یک State Management ساده و مقیاس پذیر هست که محبوبیت خیلی زیادی داره و خیلی زیاد با Redux مقایسه میشه چون مشابه یکدیگه هستن.

بطور کل کتابخانه MobX در ریکت برای مدیریت State کاربرد داره ( یک State Management هست ) که پیچیدگی خیلی کمتری نسبت به Redux داره.

اگه برنامه کوچکتر با پیچیدگی کمتری دارید، کتابخانه MobX در ری اکت مناسب شماست، در غیر اینصورت میتونید برید سراغ Redux که برای اپیکیشن های بزرگتر مناسبه.

18

کتابخانه Stripe در ری اکت ( درگاه پرداخت در ری اکت )

اگه تو پروژه ری اکتی خودمون درگاه پرداخت داریم، کتابخانه Stripe در ری اکت میتونه به ما خیلی خیلی کمک کنه. شاید بپرسید چطور ؟

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

کتابخانه Stripe در ری اکت بیشتر از 100 متود پرداخت رو پشتیبانی میکنه اما تو این لیست خبری از بانک ها یا روش های پرداخت ایرانی نیست! این یعنی اگه قصد ایجاد درگاه پرداخت ریالی برای اپیکیشن خودتون دارید، این متود های آماده به درد شما نمیخورن.

خلاصه اگه قصد ایجاد درگاه پرداخت در ریکت دارید، این کتابخانه مناسب شماست!

19

کتابخانه React 360 در ری اکت ( واقعیت مجازی در ری اکت )

کتابخانه React 360 در ری اکت به ما تو ایجاد یک تجربه دید 360 درجه یا VR کمک میکنه.

اگه قصد پیاده سازی VR در ری اکت رو داشته باشیم، کتابخانه React 360 در ریکت بشدت برای ما کاربردیه چون از واقعیت مجازی در دسکتاپ، موبایل و دستگاه های VR پشتیبانی میکنه.

به کمک React 360 میتونیم تصاویر 3D و VR ایجاد کنیم و به کاربر نمایش بدیم.

کتابخانه React 360 دقیقا مثل کتابخانه React VR در ری اکت، از مفاهیم و ابزار های یکسان استفاده میکنه.

اگه قصد پیاده سازی موارد زیر رو دارید میتونید از کتابخانه React 360 در ری اکت کمک بگیرید :

ایجاد و نمایش تصاویر 2D در ری اکت

ایجاد و نمایش تصاویر 3D در ری اکت

ایجاد و نمایش تصاویر 360 درجه در ری اکت

ایجاد و نمایش ویدئو 360 درجه در ری اکت

ایجاد و نمایش تور 360 درجه در ری اکت

نمایش بازی 360 درجه در ری اکت و ..

20

کتابخانه Tremor در ری اکت ( ساخت داشبورد در ری اکت )

کتابخانه tremor در ری اکت به ما اجازه میده که به راحتی آب خوردن داشبورد در ری اکت بسازیم!

درواقع کتابخانه tremor در ریکت شامل مجموعه ای از ابزارها، کامپوننت های ماژولار و هوک ها هست که به ما در ایجاد یک داشبورد ری اکت کمک میکنه.

درحال حاضر کمپانی های بزرگ زیادی از کتابخانه tremor برای داشبورد کمپانی خودشون استفاده کردن. برخی از این کمپانی ها عبارتند از : tinybird , Vercel , Neon و upstash

بطور خلاصه هرچیزی که برای ساخت یک داشبورد حرفه ای نیاز دارید، داخل کتابخانه tremor موجوده. برخی از این موارد عبارتند از :

کامپوننت Card
کامپوننت List و Table
کامپوننت Chart ( برای نمایش نمودار و گزارشات )
کامپوننت Advanced Visualizations
و ده ها کامپوننت دیگر

کتابخانه tremor در ری اکت فقط 400 کیلوبایت حجم داره، درعوض بیش از 50 هزار دانلود هفتگی داره و بصورت منظم بروزرسانی میشه.

21

کتابخانه Planby در ری اکت ( استریم در ری اکت )

کتابخانه Planby در ری اکت به ما اجازه میده ایده های مختلفی مثل استریم زنده ،برنامه زمانی و رویداد موسیقی برگزار کنیم!

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

کمپانی های مشهور و بزرگ زیادی از کتابخانه Planby استفاده میکنن که نشون از قابل اعتماد بودن این کتابخانه دارن.

کمپانی هایی مثل :

JWP
+Media
Waipu.tv
Brella
Housing Cloud

22

کتابخانه Advanced Cropper در ری اکت ( برش تصاویر در ری اکت )

کتابخانه React Advanced Cropper به ما اجازه میده تصاویر رو در اپیکیشن های ری اکتی، برش بدیم ( ابزار Crop )

همچنین میشه به کمک کتابخانه Advanced Cropper در ری اکت، سایز و نسبت تصویر رو تغییر داد ( Aspect ratio )

این کتابخانه بر پایه Cropper.js ساخته شده که به ما یک UI جذاب برای کار با تصویر ارائه میده.

ما میتونیم با کتابخانه Advanced Cropper تصاویر خودمون رو ویرایش کنیم و هنگام کارها و اکشن های مختلف، Callback هایی رو صدا بزنیم.

علاوه بر همه اینها، کتابخانه React Advanced Cropper به ما ویژگی های زیر رو هم میده:

زوم تصویر
چرخش تصویر
تغییر نسبت تصویر
و ..

23

کتابخانه Zod در ری اکت ( اسکیما در ری اکت )

کتابخانه Zod در ری اکت به ما اجازه میده برای دیتا های خودمون اسکیما ( الگو/ساختار ) بسازیم و سپس Validation روی دیتا های خودمون انجام بدیم.

بطور مثال برای Object های تو در توی خودمون میتونیم یک اسکیما بسازیم.

کتابخانه Zod در ریکت از انواع مختلف داده ای Primitive مثل String و Boolean تا داده های Complex مثل Object و Array پشتیبانی میکنه.

ما همچنین میتونیم ارور های خودمون رو به کمک کتابخانه Zod در ری اکت مدیریت کنیم ( Error Handling )

24

کتابخانه ری اکت کوئری ( React Query )

ری اکت کوئری پروسه دریافت داده از سرور ( Data Fetching ) و کش کردن اطلاعات ( Cashing ) رو برای ما مدیریت میکنه.

React Query به ما در مدیریت State هم کمک میکنه.

ما تو مقاله ری اکت کوئری 0 تا 100 ری اکت کوئری رو بررسی کردیم و آموزش دادیم. پیشنهاد میکنم برای آشنایی بیشتر با این کتابخانه پر استفاده و کاربردی، مطالعه کنید.

25

کتابخانه React Windows در ری اکت

فرض کنیم یک لیست بزرگ از اطلاعات و داده داریم که میخوایم به کاربر نمایش بدیم. بصورت پیشفرض تمامی اطلاعات Render میشن و در DOM قرار میگیرن ( بدون توجه به این موضوع که شاید کاربر کل اون لیست رو اسکرول نکنه و همش رو نبینه )

کتابخانه React Windows فقط همون بخش قابل مشاهده رو برای کاربر Render میکنه و داخل DOM قرار میده !!

این فوق العادس 🙂

فرض کنید یک لیست 500 عددی از لیست سفارشات کاربر بهش نمایش میدیم. بصورت پیشفرض کل این 500 عدد آیتم رندر میشه و داخل DOM قرار میگیره.

همین موضوع باعث میشه صفحه کند بشه و UX بدی به کاربر بدیم ( در این حالت Performance خیلی ضعیفی داریم )

اما کتابخانه React Windows در ری اکت فقط همون آیتم هایی که در معرض دید کاربر هست رو رندر میکنه و داخل DOM قرار میده.

این باعث میشه Performance اپیکیشن ما بهبود پیدا کنه و کاربر تجربه بهتری داشته باشه.

26

کتابخانه headless UI در ری اکت ( کتابخانه headlessui )

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

این کتابخانه تشابه خیلی زیادی به Ant Design و material ui داره. با این تفاوت که سازنده کتابخانه headless UI تیم Tailwind css هست و پشتیبانی خیلی خوبی از این کتابخانه میکنه.

کامپوننت های headlessui ظاهر خیلی خوبی دارن و تجربه کاربری خیلی خوبی به کاربران شما میتونن بدن.

headlessui در ریکت بیش از 1 میلیون دانلود هفتگی داره که نشون میده چه جامعه آماری بزرگی داره! حجم این پکیج حدود 500 کیلوبایت هست که نسبت به رقبای خودش حجم کمی داره.

27

کتابخانه Evergreen در ری اکت ( کتابخانه evergreen-ui )

کتابخانه evergreen-ui در ری اکت یک React UI Freamwork هست که شامل ده ها کامپوننت از پیش ساخته شده هست و برای توسعه اپیکیشن های ری اکتی مورد استفاده قرار میگیره.

کار با کتابخانه evergreen در ریکت خیلی آسونه. این کتابخانه 6.7 مگ حجم داره که نسبت به رقبای خودش حجم خیلی زیادی بحساب میاد!

دانلود هفتگی این کتابخانه 12 هزار نصب هست که نشون میده جامعه آماری خوبی داره.

28

کتابخانه React Helmet در ری اکت ( سئوی ری اکت )

کتابخانه React Helmet یک کامپوننت بسیار کاربردیه که در زمینه مدیریت تگ head هر صفحه به ما کمک میکنه.

از اونجاییکه خزنده های موتور های جستجوگر مثل گوگل از طریق تگ head هر صفحه متوجه میشن اون صفحه شامل چه اطلاعاتیه و بر این اساس رتبه بندی میشن، استفاده از کتابخانه React Helmet تو ری اکت ضروریه ( البته اگه نیاز به سئو داشته باشیم )

به کمک این کتابخانه میتونیم تمامی تگ های مورد نیاز برای SEO در ری اکت رو داخل صفحات خودمون قرار بدیم.

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

ما تو مقاله سئو در ری اکت بصورت 0 تا 100 کتابخانه React Helmet رو آموزش دادیم و بررسی کردیم که چطور باید ازش استفاده کنیم.

29

کتابخانه SWR در ری اکت

کتابخاته SWR در ریکت تا حدود خیلی زیادی شبیه React Query هست و میشه به چشم رقیب ریکت کوئری بهش نگاه کرد!

این کتابخونه در زمینه دریافت اطلاعات از سرور ( Data Fetching ) و کش کردن اطلاعات ( Data Cashing ) کاربرد داره.

کار با کتابخانه SWR در ریکت خیلی خیلی آسونه ( ساده تر ریکت کوئری ) و حجم کمتری داره!

تو مقاله آموزش SWR در ری اکت حسابی در مورد این کتابخانه صحبت کردیم.

30

کتابخانه React Select در ری اکت

اگه با Select Input در ری اکت کار کرده باشید میدونید که شخصی سازیش چقدر سخت و زمانبره. کتابخانه React Select در ری اکت به ما کامپوننت های Select حرفه ای و از پیش ساخته شده ( آماده ) میده.

مثل کامپوننت های Select که قابلیت انتخاب چندین آیتم داشته باشن و قابلیت افزودن و حذف آیتم توسط کاربر رو داشته باشن!

به کمک کتابخانه React Select در ریکت میتونیم ورودی های Select خیلی پیشرفته و حرفه ای داشته باشیم.

جمع بندی

امروز 30 مورد از بهترین کتابخانه های React رو معرفی کردیم که جز پرکاربرد ترین ها هستن. شاید یادگیری همشون ضروری نباشه اما به عنوان یک React Developer باید با همشون آشنا باشیم تا درصورت نیاز بهشون، از اونها استفاده کنیم.

امیدوارم که از مقاله بهترین کتابخانه های ریکت لذت برده باشید..

اگه کتابخونه ای سراغ دارید که میتونه جز بهترین کتابخانه های ری اکت باشه، کامنت کنید که اضافش کنیم 🙂

وبلاگ

1