کتابخانه React Bootstrap یکی از محبوب ترین و بهترین فریمورک های ری اکتی جهت پیاده سازی صفحات و طرح های UI اپیکیشن هست .. در واقع کتابخانه react-bootstrap حاصل ترکیب Bootstrap و React هست و به ما اجازه میده از بوت استرپ در ری اکت استفاده کنیم.
در حقیقت تو کتابخانه react-bootstrap تمامی اجزا تبدیل به یک کامپوننت ری اکتی شدن و وابستگی های غیرضروری مثل جی کوئری ازشون حذف شده!
این موضوع کمک میکنه بتونیم خیلی راحت تر و با خیال آسوده از Bootstrap در ری اکت استفاده کنیم.
در جریان باشید که کتابخانه react-bootstrap از هسته اصلی بوت استرپ تشکیل شده و به ما اجازه میده از همون ساختار، استایل ها، اِلِمان ها و ویژگی ها استفاده کنیم 🙂
ما حتی میتونیم بدون کتابخانه react-bootstrap از بوت استرپ استفاده کنیم اما استفاده از React-Boostrap این مزیت رو داره که اجازه میده کنترل خیلی بیشتری روی کامپوننت های بوت استرپی داشته باشیم!
از طرفی ما به هیچ عنوان نباید از بوت استرپ خام در پروژه های ری اکتی استفاده کنیم ( دلیلش رو تو این مقاله بررسی میکنیم )
بوت استرپ یک فریمورک CSS هست که از ترکیب Javascript و CSS ساخته شده. بوت استرپ به ما اجازه میده که صفحات ریسپانسیو و زیبا بسازیم.
ما میتونیم بدون فریمورک های CSS هم اپیکیشن تحت وب خودمون رو بسازیم اما حقیقتا فریمورک های CSS زندگی رو خیلی راحت تر میکنن 🙂
یکی از بهترین و معتبر ترین فریمورک های CSS ، فریمورک Bootstrap هست. تو ری اکت نیازی نیست بصورت مستقیم از بوت استرپ استفاده کنیم، ما میتونیم کتابخانه react-bootstrap رو نصب کنیم و خیلی راحت تر و لذت بخش تر از Bootstrap در React بهره ببریم 🙂
حالا شاید بپرسیم مزایای کتابخانه react bootstrap چیه ؟
از مهمترین مزیت های این کتابخانه میشه به موارد زیر اشاره کرد :
جامعه آماری قوی و منابع آموزشی خیلی خیلی زیاد !
مجموعه گسترده و بزرگ از انواع کامپوننت ها ، اِلِمان ها و قالب های از پیش ساخته شده.
قابلیت سفارشی سازی بین مرورگر های مختلف.
ما به 2 شکل میتونیم از بوت استرپ در ری اکت استفاده کنیم:
اگه قصد استفاده از بوت استرپ در React رو داریم، بهترین کار استفاده از کتابخانه react-bootstrap هست. حالا شاید بپرسیم چرا ؟
دلیل این موضوع بر میگرده به سازوکار خود ری اکت !
ری اکت اکیدا توصیه کرده که از دستکاری و تغییر DOM خودداری کنیم و به جاش دام مجازی رو تغییر بدیم ( اگه با دام مجازی آشنا نیستید، پیشنهاد میکنم مقاله دام مجازی ری اکت رو مطالعه کنید )
تو ری اکت نباید از بوت استرپ خام استفاده کنیم! درواقع زمانیکه از بوت استرپ خام استفاده میکنیم، چون متکی به جی کوئری هست، خیلی دام رو دستکاری میکنه و این خلاف استاندارد های ری اکت هست .. راه حل کتابخانه react-bootstrap هست..
علاوه بر اینکه کتابخانه react-bootstrap دیگه دام مجازی رو دستکاری نمیکنه، سینتکس و کد تمیز تری در اختیار ما میزاره.
قبول ندارید ؟
بیاید کامپوننت Card رو تو بوت استرپ خام و کتابخانه react-bootstrap مقایسه کنیم ..
لطفا برای مطالعه ادامه این مقاله + تیکه کد ها و مثالهای بیشتر روی لینک زیر کلیک کنید :
