ترکیب بوت استرپ و ری اکت ( کتابخانه react-bootstrap )
کتابخانه React Bootstrap یکی از محبوب ترین و بهترین فریمورک های ری اکتی جهت پیاده سازی صفحات و طرح های UI اپیکیشن هست .. در واقع کتابخانه react-bootstrap حاصل ترکیب Bootstrap و React هست و به ما اجازه میده از بوت استرپ در ری اکت استفاده کنیم.
در حقیقت تو کتابخانه react-bootstrap تمامی اجزا تبدیل به یک کامپوننت ری اکتی شدن و وابستگی های غیرضروری مثل جی کوئری ازشون حذف شده!
این موضوع کمک میکنه بتونیم خیلی راحت تر و با خیال آسوده از Bootstrap در ری اکت استفاده کنیم.
در جریان باشید که کتابخانه react-bootstrap از هسته اصلی بوت استرپ تشکیل شده و به ما اجازه میده از همون ساختار، استایل ها، اِلِمان ها و ویژگی ها استفاده کنیم 🙂
ما حتی میتونیم بدون کتابخانه react-bootstrap از بوت استرپ استفاده کنیم اما استفاده از React-Boostrap این مزیت رو داره که اجازه میده کنترل خیلی بیشتری روی کامپوننت های بوت استرپی داشته باشیم!
از طرفی ما به هیچ عنوان نباید از بوت استرپ خام در پروژه های ری اکتی استفاده کنیم ( دلیلش رو تو این مقاله بررسی میکنیم )
بیش از 3 میلیون دانلود هفتگی در npm !
داستان بوت استرپ چیه ؟
بوت استرپ یک فریمورک CSS هست که از ترکیب Javascript و CSS ساخته شده. بوت استرپ به ما اجازه میده که صفحات ریسپانسیو و زیبا بسازیم.
ما میتونیم بدون فریمورک های CSS هم اپیکیشن تحت وب خودمون رو بسازیم اما حقیقتا فریمورک های CSS زندگی رو خیلی راحت تر میکنن 🙂
یکی از بهترین و معتبر ترین فریمورک های CSS ، فریمورک Bootstrap هست. تو ری اکت نیازی نیست بصورت مستقیم از بوت استرپ استفاده کنیم، ما میتونیم کتابخانه react-bootstrap رو نصب کنیم و خیلی راحت تر و لذت بخش تر از Bootstrap در React بهره ببریم 🙂
حالا شاید بپرسیم مزایای کتابخانه react bootstrap چیه ؟
مزایای کتابخانه react-bootstrap چیست ؟
از مهمترین مزیت های این کتابخانه میشه به موارد زیر اشاره کرد :
جامعه آماری قوی و منابع آموزشی خیلی خیلی زیاد !
مجموعه گسترده و بزرگ از انواع کامپوننت ها ، اِلِمان ها و قالب های از پیش ساخته شده.
قابلیت سفارشی سازی بین مرورگر های مختلف.
مقایسه Bootstrap و کتابخانه React-Bootstrap !
ما به 2 شکل میتونیم از بوت استرپ در ری اکت استفاده کنیم:
استفاده مستقیم از خود بوت استرپ در ریکت ( پیشنهاد نمیشه ! )
استفاده از کتابخانه react-bootstrap
اگه قصد استفاده از بوت استرپ در React رو داریم، بهترین کار استفاده از کتابخانه react-bootstrap هست. حالا شاید بپرسیم چرا ؟
دلیل این موضوع بر میگرده به سازوکار خود ری اکت !
ری اکت اکیدا توصیه کرده که از دستکاری و تغییر DOM خودداری کنیم و به جاش دام مجازی رو تغییر بدیم ( اگه با دام مجازی آشنا نیستید، پیشنهاد میکنم مقاله دام مجازی ری اکت رو مطالعه کنید )
تو ری اکت نباید از بوت استرپ خام استفاده کنیم! درواقع زمانیکه از بوت استرپ خام استفاده میکنیم، چون متکی به جی کوئری هست، خیلی دام رو دستکاری میکنه و این خلاف استاندارد های ری اکت هست .. راه حل کتابخانه react-bootstrap هست..
علاوه بر اینکه کتابخانه react-bootstrap دیگه دام مجازی رو دستکاری نمیکنه، سینتکس و کد تمیز تری در اختیار ما میزاره.
قبول ندارید ؟
بیاید کامپوننت Card رو تو بوت استرپ خام و کتابخانه react-bootstrap مقایسه کنیم ..
کامپوننت Card در بوت استرپ خام :
<div className="card">
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" className="card-img-top" alt="..." data-lazy-src="https://bs-uploads.toptal.io/blackfish-uploads/public-files/React-icon-8e26f22094a11f6a689d8302dc30782c.svg" /><noscript><img decoding="async" src="https://bs-uploads.toptal.io/blackfish-uploads/public-files/React-icon-8e26f22094a11f6a689d8302dc30782c.svg" className="card-img-top" alt="..." /></noscript>
<div className="card-body">
<h5 className="card-title">یک کارد ساده</h5>
<p className="card-text">یک مثال ساده</p>
<a href="#" className="btn btn-primary">فرانت اندی</a>
</div>
</div>
کامپوننت Card در کتابخانه react-bootstrap :
<Card>
<Card.Img variant="top" src="https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg" />
<Card.Body>
<Card.Title>یک کارد</Card.Title>
<Card.Text>من یک متن هستم</Card.Text>
<Button variant="primary">فرانت اندی</Button>
</Card.Body>
</Card>
حالا که دیدیم برتری و مزیت کتابخانه React Bootstrap چیه، بریم ببینیم چطور میشه ازش استفاده کرد ..
استفاده از کتابخانه React Bootstrap در ری اکت
برای اینکه بتونیم به آموزش کتابخانه react-bootstrap بپردازیم، اجازه بدید یک وبسایت کامل رو به کمک این کتابخانه پیاده سازی کنیم که فوتر، سیستم گرید ریسپانسیو و یک navbar داشته باشه .. ( میخوایم خروجی مطابق تصویر زیر باشه ) :
پس از اینکه یک پروژه ری اکتی نصب کردیم، باید به کمک دستور زیر کتابخانه React-Bootstrap رو نصب کنیم :
npm install bootstrap react-bootstrap
تو دستور بالا ما علاوه بر کتابخانه react-bootstrap ، خود bootstrap رو هم نصب کردیم ( چون هسته اصلی این ماجراس )
حالا که کتابخانه ری اکت بوت استرپ برای ما نصب شد، میتونیم از کامپوننت های این کتابخانه استفاده کنیم.
برای فراخوانی ( import ) این کامپوننت ها میتونیم بصورت زیر عمل کنیم :
import Button from 'react-bootstrap/Button';
import Container from 'react-bootstrap/Container';
یا میتونیم به روش زیر عمل کنیم تا چند کامپوننت مختلف رو در یک خط import کنیم ( با روش destructured imports ) :
import { Button, Container } from 'react-bootstrap';
حالا که کامپوننت دلخواه خودمون رو فراخوانی کردیم میتونیم بصورت زیر در کامپوننت خودمون نمایش بدیم :
<Button>فِرانت اِندی</Button>
اعمال استایل دلخواه به کامپوننت های react-bootstrap ( کاستوم استایل )
تمامی کامپوننت های این کتابخانه یکسری استایل ظاهری پیشفرض و از پیش تعریف شده دارن. ما میتونیم این Style رو بر اساس سلیقه و نیاز خودمون تغییر بدیم.
ما میتونیم به کمک Sass این استایل هارو رونویسی کنیم . برای اینکار باید ابتدا پکیج Sass رو نصب کنیم :
npm install sass
حالا باید فایل App.css رو به App.scss تغییر نام بدیم و زمان فراخوانی این فایل در App.js از آدرس زیر استفاده کنیم :
import './App.scss';
داخل فایل App.scss باید رنگ های دلخواهمون رو رونویسی کنیم ( قبل فراخوانی فایل scss خود بوت استرپ ) یعنی بصورت زیر :
$primary: #204ecf;
$secondary: #262d3d;
@import '~bootstrap/scss/bootstrap';
تو تیکه کد بالا، ما رنگ primary و secondary رو تغییر دادیم و سپس فایل scss بوت استرپ رو فراخوانی کردیم.
کامپوننت Container در react-bootstrap چیست ؟
کامپوننت Container یکی از پایه ای ترین کامپوننت های بوت استرپ هست که به ما اجازه میده یک بلوک جهت نمایش اِلِمان ایجاد کنیم.
یکی از مهمترین کاربرد های Container نمایش محتوا در وبسایت هست چون ما میتونیم برای Container یک فاصله padding اعمال کنیم.
ما میخوایم یک تگ P با رنگ زمینه آبی درست کنیم که داخل یک div با رنگ زمینه خاکستری قرار گرفته :
<div className="bg-primary">
<p>Example</p>
</div>
خروجی تیکه کد بالا اینجوری میشه :
حالا اگه بخویم از کتابخانه react-bootstrap استفاده کنیم ( و Container ) باید کد زیر رو بزنیم :
<Container className="bg-primary">
<p>Example</p>
</Container>
طبق خروجی زیر، میتونیم ببینیم که محتوا یک padding از اطراف گرفته :
حالا اگه عرض مرورگر رو تغییر بدیم، میتونیم ببینیم که اِلِمان ما کاملا Responsive هست 🙂
کامپوننت Navbar در React-Bootstrap
ما به کمک کتابخانه react-bootstrap میتونیم Navbar های حرفه ای، ریسپانسیو و زیبا بسازیم.
بریم ببینیم چطور میشه یک کامپوننت Navbar ساخت.
در ابتدا باید یک پوشه ( Folder ) در مسیر src/components بسازیم و یک فایل با نام ResponsiveNavbar.jsx داخلش ایجاد کنیم.
سپس باید کامپوننت Navbar رو از خود react-bootstrap فراخوانی کنیم و دورش یک Container قرار بدیم :
import { Navbar, NavDropdown, Nav, Container } from 'react-bootstrap';
const ResponsiveNavbar = () => {
return (
<Navbar bg="primary" collapseOnSelect expand="sm">
<Container>
<Navbar.Brand href="/">Example Site</Navbar.Brand>
</Container>
</Navbar>
);
};
export default ResponsiveNavbar;
اگه به خط 5 که از Navbar استفاده کردیم دقت کنید، میبینیم که چند تا آرگومان بهش پاس دادیم :
- آرگومان bg : رنگ Navbar رو مشخص میکنه.
- آرگومان collapseOnselect : امکان باز و بسته شدن Navbar رو تعیین میکنه.
- آرگومان expand : مشخص میکنه تو چه سایزی Navbar بسته بشه.
کامپوننت Footer در کتابخانه React Bootstrap
تقریبا هر اپیکیشن تحت وب یک Footer داره! بریم ببینیم چطور به کمک این کتابخانه محبوب میتونیم فوتر بسازیم ..
ما یک فایل به اسم Footer.jsx میسازیم و داخلش یک کامپوننت به اسم Footer درست میکنیم و کد زیر رو داخلش قرار میدیم :
<div className="bg-secondary mt-auto">
<Container className="p-3">
<p className="text-center text-white">Thank you for visiting this website</p>
<p className="text-center mt-5 text-white">Follow us on social media:</p>
<a href="/" data-wpel-link="internal">Instagram</a>
<a href="/" data-wpel-link="internal">Facebook</a>
<a href="/" data-wpel-link="internal">Twitter</a>
</Container>
</div>
فوتر ما داخل یک Container قرار گرفته تا ریسپانسیو باشه. همچنین داخل فوتر چند لینک شبکه اجتماعی قرار دادیم.
تو تیکه کد بالا از یکسری className هم استفاده کردیم مثل p-3 برای اعمال padding و کلاس mt-5 برای اعمال margin به اِلِمان خودمون..
اما بیاید فوتر خودمون رو یکم حرفه ای تر درست کنیم ..
ما نیاز به 2 کامپوننت به نام های Row ( سطر ) و Col ( ستون ) داریم تا اجزای فوتر خیلی بهتر در کنار همدیگه قرار بگیرن .
کافیه Col و Row رو از react-bootstrap فراخوانی کنیم و کد بالارو بصورت زیر تغییر بدیم :
<div className="bg-secondary mt-auto">
<Container className="p-3">
<p className="text-center text-white">Thank you for visiting this website</p>
<p className="text-center mt-5 text-white">Follow us on social media:</p>
<Row>
<Col className="text-center">
<a href="/" data-wpel-link="internal">Instagram</a>
</Col>
<Col className="text-center">
<a href="/" data-wpel-link="internal">Facebook</a>
</Col>
<Col className="text-center">
<a href="/" data-wpel-link="internal">Twitter</a>
</Col>
</Row>
</Container>
</div>
در نهایت برای نمایش Navbar و Footer ، باید این 2 کامپوننت رو داخل فایل App.js فراخوانی کنیم و بصورت زیر نمایش بدیم :
<div className="d-flex flex-column min-vh-100">
<ResponsiveNavbar />
<Footer />
</div>
استفاده از Grid در react-bootstrap
ما میخوایم کامپوننت ها و اجزای مختلف وبسایت خودمون رو در جای صحیح نمایش بدیم. برای این منظور میتونیم از Grid استفاده کنیم.
گرید ما شامل کامپوننت Card هست که داخل فایل Item.jsx تعریفش میکنیم :
<Card style={{ minWidth: '18rem', margin: '20px' }}>
<Card.Img variant="top" src="..." />
<Card.Body>
<Card.Title>Example Card</Card.Title>
<Card.Text>This is an example React card</Card.Text>
<Button variant="primary">Example Button</Button>
</Card.Body>
</Card>
اسم کامپوننت بالا Item هست. حالا میتونیم به فایل App.js بریم و بصورت داینامیک از Row و Col استفاده کنیم :
<Container className="mt-5">
<Row>
{Array.from(Array(numberOfItems).keys()).map(number => (
<Col key={number}>
<Item />
</Col>
))}
</Row>
</Container>
خروجی نهایی ما بصورت زیر خواهد بود که کاملا ریسپانسیو هم هست :
جمع بندی
کتابخانه react-bootstrap یکی از بهترین، محبوب ترین و کامل ترین فریمورک های CSS هست که میتونیم ازش در ری اکت استفاده کنیم.
اگه طرفدار بوت استرپ هستید و قصد استفاده از Bootstrap در ری اکت رو دارید، پیشنهاد میکنم از کتابخانه react-bootstrap استفاده کنید.
راستی اگه مثل خودم با بوت استرپ حال نمیکنید و دمبال یک فریمورک CSS خفن در ری اکت هستید ، کتابخانه Material UI رو بهتون پیشنهاد میکنم که فوق العادس 🙂
کتابخانه React Bootstrap یکی از محبوب ترین و پرطرفدار ترین فریمورک های CSS هست که به ما اجازه استفاده از بوت استرپ در ری اکت رو میده. دیگه نیازی نیست از بوت استرپ خام استفاده کنیم، با نصب این کتابخانه در پروژه ری اکتی خودمون، میتونیم از تمامی کامپوننت ها، ویژگی ها و قابلیت های بوت استرپ بهره ببریم.
به دلیل استفاده بوت استرپ از jquery و دستکاری DOM اصلی ! ( ما نباید دام اصلی رو در ری اکت تغییر بدیم )
در عوض کتابخانه react-bootstrap دام مجازی رو تغییر میده.
4 دیدگاه
به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.
سلام خیلی خیلی کاربردی و مفید بود دمتون گرم
سلام رفیق
خوشحالم که برات مفید واقع شده 🙂
چاکرم استاد. من تازه متوجه شدم
سلام مایکل جان
خوشحالم که برات مفید واقع شده 🙂