بوت استرپ در React

چگونه از بوت استرپ در React استفاده کنیم؟

همه ما از محبوبیت React و اینکه چگونه این کتابخانه وظایف توسعه را برای توسعه دهندگان Front-end آسان کرده است، مطلع هستیم. React محبوب ترین کتابخانه front-end برای ساخت رابط کاربری برنامه است. صنایع به آرامی استفاده از کتابخانه های jQuery و DOM را برای ساخت برنامه های خود کاهش می دهند. هنگامیکه صحبت از ساخت یک برنامه واکنش گرا می شود، چارچوب های CSS در بازار مفید هستند. اگر به عنوان یک توسعه‌ دهنده فرانت‌ اند کار می‌ کنید، چارچوب‌ های Bootstrap ،Foundation و Bulma برای شما جدید نیستند. اکثر صنایع از چارچوب بوت استرپ استفاده می کنند. میلیون ها وب سایت با بوت استرپ کار می کنند.

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

روش افزودن بوت استرپ به React

برای افزودن بوت استرپ به React عمدتاً سه راه وجود دارد. آن ها را به ترتیب بررسی خواهیم کرد.

1. استفاده از CDN بوت استرپ
2. Bootstrap را در React به عنوان یک وابستگی (dependency) وارد کنید.
3. بسته React Bootstrap (مانند bootstrap-react یا reactstrap) را نصب کنید.

1. استفاده از Bootstrap CDN

این یکی از ساده ترین راه ها برای استفاده از بوت استرپ در برنامه React است. بهترین مورد درباره CDN بوت استرپ؛ عدم نیاز به نصب یا دانلود است. شما فقط باید یک پیوند را در قسمت head برنامه خود جایگذاری کنید تا کار کند. در زیر لینک مورد نیاز شما آمده است.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" 
integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" 
crossorigin="anonymous">

در صورتی که برنامه شما به اجزای جاوا اسکریپت همراه با بوت استرپ نیاز داشته باشد، در پایین صفحه تگ <script> را درست قبل از بسته شدن تگ </body> قرار دهید.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" 
integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" 
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" 
integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" 
crossorigin="anonymous"></script>

این قطعات به صفحه public/index.html اضافه خواهند شد.

2. Bootstrap را به عنوان یک وابستگی وارد کنید.

ممکن است از بسته‌ بندی ماژول یا بسته وب در برنامه خود استفاده کرده باشید یا حداقل نام‌ آن را شنیده باشید. این گزینه دیگری برای اضافه کردن بوت استرپ به React است. می توانید دستور زیر را اجرا کنید و بوت استرپ را به عنوان یک وابستگی در برنامه خود نصب کنید.

npm install bootstrap

پس از نصب، آن را در فایل جاوا اسکریپت ورودی برنامه خود اضافه کنید. در زیر فایل index.js داخل پوشه src قرار دارد.

import 'bootstrap/dist/css/bootstrap.min.css';
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

در خط اول کد بالا، Bootstrap minified CSS را به عنوان اولین وابستگی وارد کرده ایم. با این کار می توانیم از کلاس های بوت استرپ در کامپوننت های React استفاده کنیم. علاوه بر این باید jQuery و popper.js را نیز نصب کنید. که برای این کار مطابق دستور زیر عمل می کنیم.

npm install jquery popper.js

تغییرات زیر را در فایل index.js انجام دهید تا وابستگی های جدید اضافه شود.

import 'bootstrap/dist/css/bootstrap.min.css';
import $ from 'jquery';
import Popper from 'popper.js';
import 'bootstrap/dist/js/bootstrap.bundle.min';
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<Dropdown />, document.getElementById('root'));
registerServiceWorker();

3. بسته React Bootstrap را نصب کنید.

روش دیگر برای افزودن بوت استرپ به کامپوننت React اضافه کردن یک بسته با مؤلفه بوت استرپ داخلی است. این ها برای کار با مؤلفه های برنامه React شما طراحی شده اند. در زیر نام دو بسته محبوب آورده شده است.

• react-bootstrap
• reactstrap

هر دو گزینه های خوبی برای استفاده از Bootstrap با برنامه های React هستند.

ایجاد React App با بوت استرپ

از دستور زیر برای ایجاد یک برنامه React استفاده کنید.

create-react-app my-app

اکنون دستور داده شده در زیر را برای نصب وابستگی ها مانند زیر اجرا کنید.

yarn add axios bootstrap reactstrap

در اینجا Axios را به عنوان یک وابستگی نصب کرده ایم که یک کتابخانه جاوا اسکریپت است که برای درخواست HTTP از node.js یا XMLHttpRequests از مرورگر استفاده می شود. Axios به شما امکان می دهد تا پست ها را از BaconIpsum JSON API دریافت کنید.

اکنون برای استفاده از این فایل CSS کوچک شده بوت استرپ، باید تغییراتی را در فایل src/index.js ایجاد کنید تا به شکل زیر باشد.

import 'bootstrap/dist/css/bootstrap.min.css';
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

اکنون یک پوشه component در پوشه src پروژه خود ایجاد کنید. یک فایل Header.js جدید در آن ایجاد کنید و کد زیر را بنویسید.

import React from 'react';
import logo from '../logo.svg';
import {
  Container, Row, Col, Form, Input, Button, Navbar, Nav,
  NavbarBrand, NavLink, NavItem, UncontrolledDropdown,
  DropdownToggle, DropdownMenu, DropdownItem
} from 'reactstrap';

const AVATAR = 'https://www.gravatar.com/avatar/429e504af19fc3e1cfa5c4326ef3394c?s=240&d=mm&r=pg';

const Header = () => (
  <header>
    <Navbar fixed="top" color="light" light expand="xs" className="border-bottom border-gray bg-white" style={{ height: 80 }}>
    
      <Container>
        <Row noGutters className="position-relative w-100 align-items-center">
        
          <Col className="d-none d-lg-flex justify-content-start">
            <Nav className="mrx-auto" navbar>
            
              <NavItem className="d-flex align-items-center">
                <NavLink className="font-weight-bold" href="/">
                  <img src={AVATAR} alt="avatar" className="img-fluid rounded-circle" style={{ width: 36 }} />
                </NavLink>
              </NavItem>
              
              <NavItem className="d-flex align-items-center">
                <NavLink className="font-weight-bold" href="/">Home</NavLink>
              </NavItem>
              
              <NavItem className="d-flex align-items-center">
                <NavLink className="font-weight-bold" href="/">Electronics</NavLink>
              </NavItem>
              
              <UncontrolledDropdown className="d-flex align-items-center" nav inNavbar>
                <DropdownToggle className="font-weight-bold" nav caret>fashion</DropdownToggle>
                <DropdownMenu right>
                  <DropdownItem className="font-weight-bold text-secondary text-uppercase" header disabled>Learn React</DropdownItem>
                  <DropdownItem divider />
                  <DropdownItem>Men</DropdownItem>
                  <DropdownItem>Women</DropdownItem>
                  <DropdownItem>Baby and Kids</DropdownItem>
                </DropdownMenu>
              </UncontrolledDropdown>
              
            </Nav>
          </Col>
          
          <Col className="d-flex justify-content-xs-start justify-content-lg-center">
            <NavbarBrand className="d-inline-block p-0" href="/" style={{ width: 80 }}>
              <img src={logo} alt="logo" className="position-relative img-fluid" />
            </NavbarBrand>
          </Col>
          
          <Col className="d-none d-lg-flex justify-content-end">
            <Form inline>
              <Input type="search" className="mr-3" placeholder="Search React Courses" />
              <Button type="submit" color="info" outline>Search</Button>
            </Form>
          </Col>
          
        </Row>
      </Container>
      
    </Navbar>
  </header>
);

export default Header;

در کد بالا؛ منوی navigation را قرار داده ایم. حال بیایید یک فایل LeftCard.js در پوشه کامپوننت با محتوای زیر ایجاد کنیم:

import React, { Fragment } from 'react';

import {
  Button, UncontrolledAlert, Card, CardImg, CardBody,
  CardTitle, CardSubtitle, CardText
} from 'reactstrap';

const BANNER = 'https://i.imgur.com/CaKdFMq.jpg';

const LeftCard = () => (
  <Fragment>
  
    <UncontrolledAlert color="danger" className="d-none d-lg-block">
      <strong>Account not activated.</strong>
    </UncontrolledAlert>
    
    <Card>
      <CardImg top width="100%" src={BANNER} alt="banner" />
      <CardBody>
        <CardTitle className="h3 mb-2 pt-2 font-weight-bold text-secondary">Lorem Ipsum</CardTitle>
        <CardSubtitle className="text-secondary mb-3 font-weight-light text-uppercase" style={{ fontSize: '0.8rem' }}>Lorem Ipsum, Lagos</CardSubtitle>
        <CardText className="text-secondary mb-4" style={{ fontSize: '0.75rem' }}>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a gallery of type and scrambled it to make a type specimen book</CardText>
        <Button color="success" className="font-weight-bold">Lorem Ipsum</Button>
      </CardBody>
    </Card>
    
  </Fragment>
);

export default LeftCard;

اکنون یک فایل Post.js را در پوشه کامپوننت ها ایجاد کرده و قطعه های زیر را اضافه کنید:

import React, { Component, Fragment } from 'react';
import axios from 'axios';
import { Badge } from 'reactstrap';

class Post extends Component {

  state = { post: null }
  
  componentDidMount() {
    axios.get('https://baconipsum.com/api/?type=meat-and-filler&paras=4&format=text')
      .then(response => this.setState({ post: response.data }));
  }
  
  render() {
    return (
      <Fragment>
        { this.state.post && <div className="position-relative">
        
          <span className="d-block pb-2 mb-0 h6 text-uppercase text-info font-weight-bold">
            Editor's Pick
            <Badge pill color="success" className="text-uppercase px-2 py-1 ml-3 mb-1 align-middle" style={{ fontSize: '0.75rem' }}>New</Badge>
          </span>
          
          <span className="d-block pb-4 h2 text-dark border-bottom border-gray">React Tutorial</span>
          
          <article className="pt-5 text-secondary text-justify" style={{ fontSize: '0.9rem', whiteSpace: 'pre-line' }}>{this.state.post}</article>
          
        </div> }
      </Fragment>
    );
  }
  
}

export default Post;

قطعه بالا پست های صفحه را رندر می کند. در کد بالا وضعیت پست به null مقدار دهی اولیه می شود. هنگامی که صفحه React رندر می شود و مؤلفه مونت (Mount) می شود، چهار پاراگراف را از BaconIpsum JSON API با استفاده از Axios واکشی می کنیم. پس از آن حالت، برای ویژگی post تغییر خواهد کرد.

اصلاح نهایی را در فایل src/App.js انجام دهید که به شکل زیر است:

import React, { Fragment } from 'react';
import axios from 'axios';
import { Container, Row, Col } from 'reactstrap';

import Post from './components/Post';
import Header from './components/Header';
import LeftCard from './components/LeftCard';

const App = () => (
  <Fragment>
  
    <Header />
    
    <main className="my-5 py-5">
      <Container className="px-0">
        <Row noGutters className="pt-2 pt-md-5 w-100 px-4 px-xl-0 position-relative">
        
          <Col xs={{ order: 2 }} md={{ size: 4, order: 1 }} tag="aside" className="pb-5 mb-5 pb-md-0 mb-md-0 mx-auto mx-md-0">
            <SideCard />
          </Col>
          
          <Col xs={{ order: 1 }} md={{ size: 7, offset: 1 }} tag="section" className="py-5 mb-5 py-md-0 mb-md-0">
            <Post />
          </Col>
          
        </Row>
      </Container>
    </main>
    
  </Fragment>
);

export default App;

نتیجه گیری

ما راه های متعددی را برای گنجاندن بوت استرپ در برنامه React مورد بحث قرار داده ایم. همچنین در مورد استفاده از کتابخانه react-bootstrap بحث شد. هشدار، badge ،navbar ،dropdown، button، card ،nav ،form و غیره اجزای رایج کتابخانه بوت استرپ در React هستند، که اغلب از آن ها استفاده خواهید کرد. سایر اجزای مفید عبارتند از جداول، مدال، راهنمای ابزار، carousel ،jumbotron، صفحه بندی، تب ها و غیره. React bootstrap در طرح بندی و طراحی رابط کاربری وب سایت شما بسیار مفید است. هنگامیکه شروع به استفاده از آن کردید، با کاربرد اجزای آن آشنا خواهید شد.