با React-Bootstrap کامپوننت های ساده و کارآمد بسازید

اکثریت ترافیک وب اکنون می آید از دستگاه های تلفن همراه، نه دسکتاپ. به این ترتیب، برنامه های کاربردی وب مدرن باید به آسانی با وضوح، نسبت ابعاد و دستگاه های مختلف سازگار شوند. کتابخانه React-Bootstrap از دو چارچوب محبوب (React و Bootstrap) برای تسهیل ایجاد برنامه های کاربردی وب مؤثر، کارآمد و پاسخگو استفاده می کند.

این مقاله بلوک های ساختمان و مزایای React-Bootstrap را مورد بحث قرار می دهد و نمونه های دقیق را در یک برنامه نمونه بررسی می کند و تجربه توسعه یافته ای را برای پروژه وب بعدی شما ارائه می دهد.

مبانی: چیستی و چرایی React-Bootstrap

بوت استرپ که بر روی CSS و جاوا اسکریپت ساخته شده است، یک چارچوب CSS است که طراحی وب سایت واکنشگرا را با استفاده از طرح شبکه ای از ردیف ها و ستون ها امکان پذیر می کند. بیایید React-Bootstrap را در چارچوب های CSS و vanilla Bootstrap بررسی کنیم تا پروژه هایی را که می تواند به بهترین نحو ممکن ارائه دهد، شناسایی کنیم.

Bootstrap و CSS Frameworks

هنگام ساخت یک وب سایت، CSS عناصر بصری یک صفحه را توصیف می کند و تغییر CSS یک سایت می تواند یک تغییر بسیار ضروری را ایجاد کند. با این حال، در طراحی وب مدرن، CSS به تنهایی کافی نیست - طراحی وب پاسخگو اجباری است و چارچوب ها زندگی توسعه دهندگان CSS را آسان تر می کنند.

طراحی وب ریسپانسیو به برنامه ها اجازه می دهد تا طرح ها و عناصر را بر اساس انواع دستگاه ها و اندازه پنجره یا صفحه تغییر دهند. چارچوب های CSS مزایای دیگری مانند توسعه سریع، کاهش تکرار کد و بهبود قابلیت نگهداری پایه کد را ارائه می کنند.

چارچوب های زیادی برای ساده کردن نوشتن CSS وجود دارد. Tailwind CSS و پایه دو گزینه محبوب هستند. با این حال، Bootstrap یک انتخاب استاندارد برای CSS پاسخگو به دلیل مزایایی مانند:

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

بیایید هنگام تصمیم گیری بین React-Bootstrap و Vanilla Bootstrap، مبادلات را بررسی کنیم.

Bootstrap در مقابل React-Bootstrap

با وجود مزایای بسیار زیاد، چرا نخواهیم از Bootstrap ساده برای برنامه های React استفاده کنیم؟ پاسخ در نحوه ساخت React نهفته است.

React توصیه نمی کند که توسعه دهندگان DOM را مستقیماً تغییر دهند. در عوض، آن را در درجه اول به کار می گیرد DOM مجازییا VDOM، برای ردیابی تمام تغییرات DOM. React می تواند تغییرات خارج از VDOM را از دست بدهد و منجر به باگ ها، خطاها و رفتارهای غیرمنتظره شود.

نسخه های قبلی بوت استرپ به شدت به jQuery متکی هستند که مستقیماً DOM را تغییر می دهد و بنابراین می تواند این نتایج نامطلوب را ایجاد کند. React-Bootstrap را وارد کنید، کتابخانه ای که دسترسی به هر مؤلفه Bootstrap را فراهم می کند و به جای jQuery به جاوا اسکریپت خالص وابسته است و فقط VDOM را تغییر می دهد.

React-Bootstrap علاوه بر جلوگیری از رفتار نامطلوب مربوط به DOM، نحوی تمیز و خوانا را نیز ارائه می دهد. بیایید همان کارت نمونه را با استفاده از Bootstrap و React-Bootstrap برای مقایسه ایجاد کنیم:

کد کارت بوت استرپ ما حاوی تعداد زیادی است div برچسب ها، شناسایی هر جزء را دشوار می کند:

<div className="card">  <img src=" className="card-img-top" alt=" />  <div className="card-body">      <h5 className="card-title">Example Card</h5>      <p className="card-text">This is an example React card</p>      <a href="#" className="btn btn-primary">Example Button</a>    </div></div>

از سوی دیگر، کد کارت React-Bootstrap ما به وضوح هر جزء را برچسب گذاری می کند:

<Card>  <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>

آیا این دو مزیت React-Bootstrap را از هر نظر برتر از Bootstrap می کند؟ نه. از نسخه 5، بوت استرپ دیگر از jQuery استفاده نمی کند و می تواند با React استفاده شود. و تا همین اواخر، React-Bootstrap هیچ پشتیبانی از Bootstrap 5 نداشت، به این معنی که توسعه دهندگان نمی توانستند پروژه های React-Bootstrap خود را با نسخه های جدید Bootstrap ارتقا دهند. React-Bootstrap v2 این مشکل را حل می کند.

اگر قصد دارید پروژه خود را از React به چارچوب دیگری مانند Vue منتقل کنید، Bootstrap بهترین انعطاف پذیری را ارائه می دهد. شما می توانید از بیشتر کدهای ساده بوت استرپ مجددا استفاده کنید، اما کاربران React-Bootstrap باید کد خود را تبدیل کنند. Bootstrap و React-Bootstrap هر کدام مزایا و معایب خود را دارند و اینکه کدام یک را انتخاب می کنید به نیازهای خاص شما بستگی دارد. در مورد ما، ما خوانایی را بالاتر از انعطاف پذیری برای مهاجرت اولویت بندی می کنیم.

پیاده سازی: اجزای زیبا با React-Bootstrap

برای بررسی یک پیاده سازی کاربردی React-Bootstrap، اجازه دهید یک رابط کاربری استاندارد وب سایت با نوار ناوبری، پاورقی و یک شبکه واکنش گرا ایجاد کنیم.

راه اندازی و اصول

ابتدا بیایید یک برنامه React جدید در ترمینال ایجاد کنیم:

npx create-react-app react-bootstrap-example --template typescript

در مرحله بعد، هر دو React-Bootstrap و Bootstrap را نصب کنید (نصب Bootstrap ضروری است زیرا شامل تمام سبک های اجزای React-Bootstrap است):

npm install bootstrap react-bootstrap

اگر نمی خواهید سبک های پیش فرض Bootstrap را لغو کنید، در این مرحله ضروری است که شیوه نامه Bootstrap را وارد کنید. bootstrap/dist/css/bootstrap.min.css، در src/App.tsx فایل. (برای استفاده از استایل سفارشی، سبک های پیش فرض بوت استرپ را لغو می کنیم، بنابراین نیازی به انجام این مرحله نداریم.)

به طور کلی، دو راه برای وارد کردن اجزای React-Bootstrap وجود دارد. روش اول از این نحو استفاده می کند:

import Button from \'react-bootstrap/Button\';import Container from \'react-bootstrap/Container\';

با این حال، من ترجیح می دهم از واردات تخریب شده استفاده کنم، زیرا آنها کد را برای چندین مؤلفه فشرده و ساده می کنند:

import { Button, Container } from \'react-bootstrap\';

در نهایت، یک کامپوننت React-Bootstrap را با این نحو ارائه می کنیم:

<Button>This is a button</Button>

سبک های سفارشی

سبک های پیش فرض بوت استرپ (مانند رنگ ها) را می توان با استایل سفارشی برای طراحی وب منحصربه فردتر نادیده گرفت. بیایید Bootstrap را نادیده بگیریم 13 رنگ متن با خودمون ابتدا Sass را نصب می کنیم:

npm install sass

بعد، نام را تغییر دهید App.css فایل به App.scss، نشان می دهد که یک فایل Sass است و import \'./App.scss\'; در App.tsx فایل. در ما App.scss قبل از وارد کردن شیوه نامه Sass Bootstrap، رنگ های اصلی و ثانویه را نادیده می گیریم:

$primary: #204ecf;$secondary: #262d3d;@import \'~bootstrap/scss/bootstrap\';

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

ظروف

کانتینرها اساسی ترین و اساسی ترین جزء React-Bootstrap هستند. آنها یک بلوک ساختمانی در اجرای اجزای پیچیده تر مانند شبکه ها هستند. ظروف به صورت اختیاری محتویات درون خود را در مرکز و به صورت افقی قرار می دهند.

قبل از افزودن نوار ناوبری، پاورقی و سیستم شبکه به وب سایت خود، بیایید ببینیم که کانتینرها چگونه بر محتوای آنها تأثیر می گذارند. ما یک متن ساده ایجاد می کنیم (p) داخل یک بخش عمومی (div) به طور موقت در src/App.tsx. ما بخش را آبی و پس زمینه کلی خود را خاکستری می کنیم تا نمایش طرح بندی آسان تر شود:

<div className="bg-primary">  <p>Example</p></div>

بدون یک ظرف React-Bootstrap، محتوای ما بدون صفحه است و پاسخگو نیست:

بیایید همان کد را با یک React-Bootstrap امتحان کنیم Container به جای یک ژنریک div (باید وارد کنیم Container قبل از استفاده):

<Container className="bg-primary">  <p>Example</p></Container>

اکنون، محتوای ما با padding ظاهر می شود:

عرض پنجره مرورگر را تغییر دهید تا طراحی واکنشگرا را در عمل ببینید.

نوارهای ناوبری

اولین مؤلفه ای که به سایت نمونه ما اضافه می شود، است نوار ناوبری. ایجاد یک کامپوننت React جداگانه برای نوار ناوبری (برخلاف نوشتن آن در کنار سایر کدها) یافتن کامپوننت ها و ایجاد تغییرات را آسان تر می کند.

ایجاد یک src/components پوشه و فایل را اضافه کنید ResponsiveNavbar.tsx. ما وارد می کنیم Navbar و سایر اجزای ضروری سپس، یک نوار ناوبری اولیه را اضافه می کنیم که در ریسپانسیو پیچیده شده است Container جزء، که لوگو یا عنوان سایت ما را نمایش می دهد (Navbar.Brand):

import { Navbar, NavDropdown, Nav, Container } from \'react-bootstrap\';const ResponsiveNavbar = () => {  return (    <Navbar bg="primary" collapseOnSelect expand="sm">      <Container>   <Navbar.Brand href=" Site</Navbar.Brand> </Container>    </Navbar>  );};export default ResponsiveNavbar;

ما در حال ارسال سه آرگومان به نوار ناوبری هستیم:

• bg بر رنگ نوار ناوبری تأثیر می گذارد.
• collapseOnSelect هنگامی که کاربر یک مورد را انتخاب می کند، نوار ناوبری به طور خودکار جمع می شود.
• expand تعیین می کند که چه زمانی نوار ناوبری جمع می شود (sm به این معنی است که در عرض 768 پیکسل فرو می ریزد).

برای نوار ناوبری پیشرفته تر، یک منوی همبرگر تغییر یافته اضافه می کنیم (Navbar.Toggle) نمایش بخش های "Home"، "Link" و "Drop-down". Navbar.Toggle در حالت دسکتاپ نامرئی است. با این حال، هنگام مشاهده وب سایت در صفحه های کوچکتر، بخش های افقی را فشرده می کند Navbar.Collapse، به منوی همبرگر مناسب برای موبایل.

<Navbar bg="primary" collapseOnSelect expand="sm">  <Container>    <Navbar.Brand href=" Site</Navbar.Brand>    <Navbar.Toggle aria-controls="navbar-toggle" />    <Navbar.Collapse id="navbar-toggle">      <Nav className="me-auto">        <Nav.Link href="        <Nav.Link href="        <NavDropdown title="Drop-down" id="nav-dropdown"><NavDropdown.Item href=" 1</NavDropdown.Item><NavDropdown.Item href=" 2</NavDropdown.Item><NavDropdown.Item href=" 3</NavDropdown.Item>        </NavDropdown>      </Nav>    </Navbar.Collapse>  </Container></Navbar>

Navbar.Toggle و Navbar.Collapse ابزارهای قدرتمندی هستند که به توسعه دهندگان کمک می کنند تا نوارهای ناوبری پاسخگو با چند خط کد ایجاد کنند.

بالاخره ما import ResponsiveNavbar from \'./components/ResponsiveNavbar\'; و آن را در قسمت اصلی ما قرار دهیم App:

<div className="d-flex flex-column">  <ResponsiveNavbar /></div>

می توانید هر زمان که بخواهید برنامه را با اجرا آزمایش کنید npm start برای مشاهده به روز رسانی آن با هر جزء اضافه شده.

نوار ناوبری ما کامل است، پس بیایید روی فوتر سایت کار کنیم. همانطور که با ResponsiveNavbar، باید اعلام کنیم Footer و آن را به صورت جدید صادر کنید Footer.tsx فایل. ما با استفاده از متن، پیوندها و a یک فوتر اولیه ایجاد می کنیم Container:

<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="    <a href="    <a href="  </Container></div>

کلاس ها p-3 و mt-5 نشان دهنده padding و margin-top است و مقادیر آنها می تواند بین صفر تا پنج باشد (مثلا p-5 و mt-1 نیز گزینه هایی هستند) یا روی تنظیم شوند auto. اضافه کردن نیز مهم است mt-auto، زیرا پس از اضافه کردن، پاورقی را به پایین صفحه فشار می دهد Footer به ما App در مرحله بعدی

در مرحله بعد، برای نمایش پیوندهای اجتماعی در کنار هم با فاصله صحیح، a را اضافه می کنیم Row کامپوننت و تودرتو هر پیوند را در یک Col (ستون) جزء (ما همچنین باید اضافه کنیم Row و Col به واردات 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="      </Col>      <Col className="text-center">        <a href="      </Col>      <Col className="text-center">        <a href="      </Col>    </Row>  </Container></div>

آخرین مرحله ما این است که پاورقی را در پایین صفحه خود در ما قرار دهیم App:

<div className="d-flex flex-column min-vh-100">  <ResponsiveNavbar />  <Footer /></div>

در اینجا، ما همچنین حداقل ارتفاع صفحه وب را روی آن تنظیم کرده ایم 100vh; این ارتفاع کامل صفحه نمایش (100٪ ارتفاع درگاه دید) است و تضمین می کند که پاورقی به جای اینکه مستقیماً زیر سایر محتواها ظاهر شود در پایین واقعی صفحه نمایش داده می شود.

سیستم های شبکه

وقتی نوار ناوبری و پاورقی در جای خود قرار دارند، وب سایت را با افزودن یک به پایان می رسانیم سیستم شبکه ای به صفحه شبکه ما شامل خواهد شد Card کامپوننت هایی که ما آنها را در قالب جدید تعریف و صادر می کنیم Item.tsx فایل:

<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>

اکنون می توانیم به آن بازگردیم App.tsx و یک شبکه پویا از سطرها و ستون ها بین نوار ناوبری و پاورقی اضافه کنید. ما باید سیستم شبکه خود را در یک بپیچیم Container:

<Container className="mt-5">  <Row>    {Array.from(Array(numberOfItems).keys()).map(number => (      <Col key={number}>        <Item />      </Col>    ))}  </Row></Container>

ما می توانیم یک ثابت برای numberOfItems برای کنترل چند بار Item جزء ارائه شده است. ستون ها به طور خودکار اندازه می شوند و برای همه اندازه های صفحه نمایش پاسخگو هستند. سعی کنید اندازه پنجره مرورگر خود را برای آزمایش تغییر دهید نتیجه نهایی.

توسعه وب پاسخگو آسان شد

سینتکس تمیز React-Bootstrap و اجزای ساده، طراحی واکنشگرا را برای اجرای هر پروژه ای ساده می کند. توانایی کار با Bootstrap و React-Bootstrap برای توسعه دهندگان front-end ضروری است. با استفاده از این ابزارها در مجموعه مهارت های خود، برای طراحی ساده تر برنامه وب و نمونه سازی آماده هستید.

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