نحوه استفاده از Bootstrap با React
چهارشنبه 10 مرداد 1397در این آموزش چندین راه مختلف که می توانیم Bootstrap را با اپلیکیشن React خود ادغام کنیم بررسی خواهیم کردیم و همچنین نحوه ی کار با دو کتابخانه ی محبوب React Bootstrap به نام react-bootstrap و reactstrap را نیز بررسی خواهیم کرد.در این آموزش با چندین کامپوننت Bootstrap نظیر alert ، badge ، dropdown ، navbar ، nav ، form ، button ، card و غیره کار خواهیم کرد.
با افزایش محبوبیت اپلیکیشن های تک صفحه ای در طی چند سال اخیر، framework های جاوااسکریپت front-end زیادی نظیر Angular، React ، VueJS ، Ember و غیره ساخته شده است. در نتیجه استفاده از کتابخانه های DOM نظیر jQuery دیگر یکی از ملزومات ساخت وب اپلیکیشن ها نیست.
از سوی دیگر تعدادی از framework های CSS نیز برای کمک به پاسخگویی به الزامات ساختن وب اپلیکیشن های responsive ساخته شده است. تقریبا همه ی توسعه دهندگان front-end از Bootstrap، Foundation یا Bulma استفاده کرده اند یا درباره ی آن شنیده اند. هرکدام از این موارد یک framework برای CSS است که responsive است که هرکدام ویژگی های قوی و امکانات داخلی دارند.
درحالی که React، framework پراستفاده جاوااسکریپت برای ساخت وب اپلیکیشن ها شده است، Bootstrap نیز محبوب ترین framework برای CSS است که در میلیون ها وب سایت در اینترنت استفاده شده است. بنابراین یافتن راه های متفاوتی که با آن ها بتوان Bootstrap را با اپلیکیشن های React استفاده کرد بسیار ضروری است و این موضوع هدف این آموزش است.
هدف این پست، آموزش React یا Bootstrap به صورت جزئی نیست و انتظار می رود که شما از قبل تجربه ی کار با React و/یا Bootstrap را داشته باشید. اگر در این موارد به کمک نیاز دارید React Docs و مستندات Bootstrap را بررسی کنید.
اضافه کردن Bootstrap
Bootstrap می تواند به اپلیکیشن React شما به چند طریق اضافه شود. در این آموزش به سه روش بسیار معمول این کار خواهیم پرداخت:
1.استفاده از Bootstrap CDN
Bootstrap.2 به عنوان وابستگی
3.پکیج React Bootstrap
استفاده از Bootstrap CDN
این مورد ساده ترین روش برای اضافه کردن Bootstrap به اپلیکیشن خود است و هیچ نصب یا دانلودی نیاز نیست. به سادگی یک <link> در قسمت <head> از اپلیکیشن خود همانطور که در قطعه کد زیر نشان داده شده است، قرار دهید.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
اگر شما به استفاده از کامپوننت های جاوااسکریپت که با Bootstrap همراه است، می باشید نیاز دارید تگ <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>
همانطور که می توانید ببینید Bootstrap 4 برای کامپوننت های جاوااسکریپت به jQuery و Popper.js نیاز دارد. در قطعه کد بالا ما از نسخه ی کوتاه شده ی jQuery استفاده کردیم شما می توانید از نسخه ی کامل نیز استفاده کنید.
برای اپلیکیشن React شما این قطعه کد ها همیشه به صفحه ی index از اپلیکیشن شما اضافه می شود. اگر شما از create-react-app برای ساخت اپلیکیشن خود استفاده کرده اید صفحه ی public/index.html شما مشابه قطعه کد زیر خواهد بود:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4"
crossorigin="anonymous">
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
<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>
</body>
</html>
حال شما می توانید از کلاس های داخلی Bootstrap و کامپوننت های جاوااسکریپت در کامپوننت های اپلیکیشن React خود استفاده کنید.
Bootstrap به عنوان یک وابستگی
اگر شما درحال استفاده از ابزارهای ساخت یا مجموعه ماژول هایی نظیر Webpack هستید این همان گزینه ای است که باید Bootstrap را به اپلیکیشن React خود اضافه کنید بنابراین نیاز دارید که Bootstrap را به عنوان یک وابستگی برای اپلیکیشن خود نصب کنید.
npm install bootstrap
اگر شما درحال استفاده از Yarn هستید:
yarn add bootstrap
زمانی که Bootstrap را نصب کردید باید آن را در فایل های جاوااسکریپت داخلی اپلیکشن خود اضافه کنید. اگر شما از create-react-app استفاده کرده اید باید Bootstrap را به فایل 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();
توجه کنید که ما Bootstrap minified CSS را به عنوان اولین وابستگی وارد کرده ایم. به این ترتیب ما می توانیم استفاده از کلاس های داخلی Bootstrap را در کامپوننت های اپلیکیشن React خود شروع کنیم. اما قبل از اینکه بتوانید از کامپوننت های Bootstrap جاوااسکریپت در اپلیکیشن خودتان استفاده کنید، نیاز دارید که jquery و popper.js را اگر از قبل نصب نکرده اید، نصب کنید.
npm install jquery popper.js
سپس برخی از تغییرات اضافی را در فایل src/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();
ما اینجا import را برای $ و Popper اضافه کرده ایم. همچنین مجموعه فایل کوچک شده ی Bootstrap JavaScript را نیز اضافه کرده ایم. حال شما می توانید از کامپوننت های Bootstrap JavaScript در اپلیکیشن React خود استفاده کنید.
پکیج React Bootstrap
روش سومی که می توانید Bootstrapرا به اپلیکیشن React خود اضافه کنید استفاده از پکیجی است که کامپوننت های Bootstrap بازسازی شده برای کار انحصاری به عنوان کامپوننت های React ، را دارد، می باشد. تعدادی پکیج در (repository) مخزن npm دردسترس است اما روی دو مورد از محبوب ترین موارد در این آموزش تاکید می کنیم:
1. react-bootstrap
2. reactstrap
هردو مورد گزینه های بسیار خوبی برای استفاده از Bootstrap با اپلیکیشن های React هستند البته شما ملزم به استفاده از هیچکدام از آن ها نیستید. این دو مورد ویژگی های بسیار مشابهی دارند.
استفاده از کلاس ها و کامپوننت های داخلی Bootstrap
شما می توانید از Bootstrap مستقیما روی اجزا و کامپوننت های اپلیکیشن React خود به وسیله ی کلاس های داخلی مانند همه ی انواع دیگر کلاس ها، استفاده کنید. اجازه دهید یک کامپوننت ساده ی React برای سوئیچ کردن تم بسازیم تا استفاده از کامپوننت ها و کلاس های Bootstrap را شرح دهیم.
همانطور که در دمو نشان داده شده است ما از کامپوننت dropdown موجود در Bootstrap برای پیاده سازی این کار استفاده کرده ایم ما همچنین از کلاس های دکمه ی داخلی برای تنظیم اندازه و رنگ دکمه ی dropdown استفاده کرده ایم.
رنگ ها را برای کامپوننت ThemeSwitcher خودمان می نویسیم. اطمینان حاصل کنید که یک اپلیکیشن React را از قبل تنظیم کرده اید. یک فایل جدید برای کامپوننت بسازید و قطعه کد زیر را به آن اضافه کنید:
import React, { Component } from 'react';
class ThemeSwitcher extends Component {
state = { theme: null }
resetTheme = evt => {
evt.preventDefault();
this.setState({ theme: null });
}
chooseTheme = (theme, evt) => {
evt.preventDefault();
this.setState({ theme });
}
render() {
const { theme } = this.state;
const themeClass = theme ? theme.toLowerCase() : 'secondary';
return (
<div className="d-flex flex-wrap justify-content-center position-absolute w-100 h-100 align-items-center align-content-center">
<span className={`h1 mb-4 w-100 text-center text-${themeClass}`}>{ theme || 'Default' }</span>
<div className="btn-group">
<button type="button" className={`btn btn-${themeClass} btn-lg`}>{ theme || 'Choose' } Theme</button>
<button type="button" className={`btn btn-${themeClass} btn-lg dropdown-toggle dropdown-toggle-split`} data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span className="sr-only">Toggle Theme Dropdown</span>
</button>
<div className="dropdown-menu">
<a className="dropdown-item" href="#" onClick={e => this.chooseTheme('Primary', e)}>Primary Theme</a>
<a className="dropdown-item" href="#" onClick={e => this.chooseTheme('Danger', e)}>Danger Theme</a>
<a class="dropdown-item" href="#" onClick={e => this.chooseTheme('Success', e)}>Success Theme</a>
<div className="dropdown-divider"></div>
<a className="dropdown-item" href="#" onClick={this.resetTheme}>Default Theme</a>
</div>
</div>
</div>
);
}
}
export default ThemeSwitcher;
در اینجا ما یک کامپوننت ساده ی تعویض تم را با استفاده از کامپوننت های dropdown و تعدادی از کلاس های داخلی ساخته ایم.
در ابتدا وضعیت کامپوننت ها را با ویژگی theme تنظیم می کنیم و مقدار اولیه ی آن را null می گذاریم. سپس در کلاس کامپوننت دو event handler برای کلیک به نام های resetTheme() برای reset کردن تم و chooseTheme() برای انتخاب تم تعریف می کنیم.
در متد render() ما یک منوی کشویی شامل سه تم به نام های Primary, Danger و Success را ارائه می دهیم. هر آیتم از منو به یک event handler کلیک برای یک عمل مناسب متصل شده است. به نحوه ی استفاده از theme.toLowerCase() برای گرفتن کلاس رنگ تم هم برای دکمه ی کشویی و هم برای متن دقت کنید. اگر هیچ تمی تنظیم نشده باشد بطور پیش فرض ما secondary را به عنوان تم تنظیم کرده ایم.
در این مثال دیدیم که چقدر استفاده از کلاس و کامپوننت های داخلی Bootstrap در اپلیکیشن React آسان است. مستندات Bootstrap را برای آموزش بیشتر درباره ی کلاس ها و کامپوننت های داخلی بررسی کنید.
استفاده از react-bootstrap
حال دوباره تعویض کننده ی تم خود را با react-bootstrap می سازیم ما از ابزار خط دستور create-react-app برای ساخت اپلیکیشن خود استفاده خواهیم کرد. اطمینان حاصل کنید که ابزار create-react-app روی دستگاه شما نصب شده است.
یک اپلیکیشن React جدید با استفاده از create-react-app مانند زیر بسازید:
create-react-app react-bootstrap-app
سپس وابستگی ها را مانند زیر نصب کنید:
yarn add bootstrap@3 react-bootstrap
react-bootstrap اخیرا Bootstrap v3 را هدف قرار داده است اما فعالانه روی ارائه پشتیبانی از Bootstrap v4 کار می شود.
یک فایل جدید به نام ThemeSwitcher.js در دایرکتوری src در پروژه ی خودتان بسازید و محتوای زیر را در آن قرار دهید.
import React, { Component } from 'react';
import { SplitButton, MenuItem } from 'react-bootstrap';
class ThemeSwitcher extends Component {
state = { theme: null }
chooseTheme = (theme, evt) => {
evt.preventDefault();
if (theme.toLowerCase() === 'reset') { theme = null }
this.setState({ theme });
}
render() {
const { theme } = this.state;
const themeClass = theme ? theme.toLowerCase() : 'default';
const parentContainerStyles = {
position: 'absolute',
height: '100%',
width: '100%',
display: 'table'
};
const subContainerStyles = {
position: 'relative',
height: '100%',
width: '100%',
display: 'table-cell',
verticalAlign: 'middle'
};
return (
<div style={parentContainerStyles}>
<div style={subContainerStyles}>
<span className={`h1 center-block text-center text-${theme ? themeClass : 'muted'}`} style={{ marginBottom: 25 }}>{theme || 'Default'}</span>
<div className="center-block text-center">
<SplitButton bsSize="large" bsStyle={themeClass} title={`${theme || 'Default'} Theme`}>
<MenuItem eventKey="Primary" onSelect={this.chooseTheme}>Primary Theme</MenuItem>
<MenuItem eventKey="Danger" onSelect={this.chooseTheme}>Danger Theme</MenuItem>
<MenuItem eventKey="Success" onSelect={this.chooseTheme}>Success Theme</MenuItem>
<MenuItem divider />
<MenuItem eventKey="Reset" onSelect={this.chooseTheme}>Default Theme</MenuItem>
</SplitButton>
</div>
</div>
</div>
);
}
}
export default ThemeSwitcher;
در اینجا تلاش کرده ایم تاجایی که ممکن است از مثال اولیه تقلید کنیم و از react-bootstrap استفاده کنیم. ما دو کامپوننت از پکیج react-bootstrap به نام های SplitButton و MenuItem را وارد می کنیم. مستندات react-bootstrap را برای آموزش بیشتر بررسی کنید.
ابتدا وضعیت کامپوننت ها را با ویژگی theme تنظیم می کنیم و مقدار اولیه ی آن را null می گذاریم. سپس یک event handler به نام chooseTheme() برای انتخاب تم یا restart کردن تم تعریف می کنیم.
از آنجایی که ما درحال استفاده از Bootstrap 3.3.7 هستیم در متد render() برخی از سبک های کانتینر را برای کمک به دستیابی به نقطه تمرکز افقی و عمودی ساخته ایم.
توجه کنید که چگونه اندازه ی دکمه را در کامپوننت SplitButton با استفاده از ویژگی bsSize تعریف کرده ایم همچنین توجه کنید که چگونه themeClass را به ویژگی bsStyle برای تغییر پویای رنگ دکمه بر اساس وضعیت تم ارسال کرده ایم.
ما نام تم را به ویژگی eventKey از هر کامپوننت ارسال می کنیم و سپس onSelect handler را به this.chooseTheme() که پیش تر تعریف کرده ایم تنظیم می کنیم. کامپوننت MenuItem ، eventKey و خود event را به همانند زیر به onSelect handler ارسال می کند:
(eventKey: any, event: Object) => any
درنهایت فایل src/index.js را همانند قطعه کد زیر تعریف خواهیم کرد:
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/css/bootstrap-theme.min.css';
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import ThemeSwitcher from './ThemeSwitcher';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<ThemeSwitcher />, document.getElementById('root'));
registerServiceWorker();
در اینجا ابتدا فایل کوچک شده ی CSS که برای Bootstrap است را import می کنیم و همچنین کامپوننت ThemeSwitcher خود را نیز import می کنیم و آن را به DOM رندر می کنیم.
حال اگر اپلیکیشن را با دستور yarn start یا npm start اجرا کنید اپلیکیشن شما باید روی پورت 3000 اجرا شود و باید مشابه دموی زیر باشد:
استفاده از reactstrap
این بار می خواهیم تعویض کننده ی تم خود را دوباره با استفاده از reactstrap بسازیم. ما از ابزار خط دستور create-react-app برای ساخت اپلیکیشن خودمان استفاده خواهیم کرد. اطمینان حاصل کنید که ابزار create-react-app روی دستگاه شما نصب شده است.
یک اپلیکیشن React جدید با استفاده از create-react-app همانند زیر بسازید:
create-react-app reactstrap-app
سپس وابستگی ها را همانند زیر نصب کنید:
yarn add bootstrap reactstrap
یک فایل به نام ThemeSwitcher.js در دایرکتوری src از پروژه ی خودتان بسازید و قطعه کد زیر را در آن قرار دهید.
import React, { Component } from 'react';
import { Button, ButtonDropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
class ThemeSwitcher extends Component {
state = { theme: null, dropdownOpen: false }
toggleDropdown = () => {
this.setState({ dropdownOpen: !this.state.dropdownOpen });
}
resetTheme = evt => {
evt.preventDefault();
this.setState({ theme: null });
}
chooseTheme = (theme, evt) => {
evt.preventDefault();
this.setState({ theme });
}
render() {
const { theme, dropdownOpen } = this.state;
const themeClass = theme ? theme.toLowerCase() : 'secondary';
return (
<div className="d-flex flex-wrap justify-content-center position-absolute w-100 h-100 align-items-center align-content-center">
<span className={`h1 mb-4 w-100 text-center text-${themeClass}`}>{theme || 'Default'}</span>
<ButtonDropdown isOpen={dropdownOpen} toggle={this.toggleDropdown}>
<Button id="caret" color={themeClass}>{theme || 'Custom'} Theme</Button>
<DropdownToggle caret size="lg" color={themeClass} />
<DropdownMenu>
<DropdownItem onClick={e => this.chooseTheme('Primary', e)}>Primary Theme</DropdownItem>
<DropdownItem onClick={e => this.chooseTheme('Danger', e)}>Danger Theme</DropdownItem>
<DropdownItem onClick={e => this.chooseTheme('Success', e)}>Success Theme</DropdownItem>
<DropdownItem divider />
<DropdownItem onClick={this.resetTheme}>Default Theme</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</div>
);
}
}
export default ThemeSwitcher;
در اینجا ما مثال اولیه ی خودمان را دوباره با استفاده از reactstrap ساخته ایم. تعدادی کامپوننت از reactstrap را import می کنیم.
در ابتدا وضعیت کامپوننت ها را با دو ویژگی تنظیم می کنیم:
1. ویژگی theme که مقدار اولیه ی آن را null قرار داده ایم.
2. dropdownOpen که مقدار اولیه ی آن را false تنظیم کرده ایم. این ویژگی در کامپوننت ButtonDropdown از reactstrap برای حفظ حالت متغیر dropdown استفاده می شود.
ما همچنین متد toggleDropdown() برای تغییر وضعیت کنونی dropdown تعریف کرده ایم. این متد همچنین در کامپوننت ButtonDropdown نیز استفاده می شود.
Reactstrap همچنین کامپوننت کنترل نشده ی UncontrolledButtonDropdown را ارائه می دهد که به ویژگی isOpen یا به ویژگی toggle handler نیاز ندارد. در اکثر مواقع این مورد می تواند به جای ButtonDropdown استفاده شود.
هر آیتم در منوی dropdown با استفاده از کامپوننت DropdownItem رندر می شود. توجه کنید که چگونه اندازه ی دکمه را در کامپوننت DropdownToggle با استفاده از ویژگی size مشخص کرده ایم. همچنین توجه کنید که چگونه themeClass را به ویژگی color در هردو کامپوننت Button و DropdownToggle برای تغییر پویای رنگ دکمه بر اساس وضعیت تم ارسال کرده ایم.
همچنین onClick handler را برای هر DropdownItem با استفاده ازhandler های chooseTheme() و resetTheme() که قبلا تعریف کرده ایم و انجام داده ایم تنظیم می کنیم.
سرانجام فایل 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 ThemeSwitcher from './ThemeSwitcher';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<ThemeSwitcher />, document.getElementById('root'));
registerServiceWorker();
در اینجا ابتدا فایل کوتاه شده ی CSS از Bootstrap را import می کنیم و کامپوننت ThemeSwitcher خودمان را نیز import می کنیم و آن را به DOM رندر می کنیم.
حال اگر اپلیکیشن خود را با دستور yarn start یا npm start اجرا کنید اپلیکیشن شما باید روی پورت 3000 اجرا شود و باید مشابه دموی زیر باشد:
ساخت یک اپلیکیشن دقیق
اجازه دهید این مثال را کمی گسترش دهیم تا یک اپلیکیشن دقیق تر بسازیم. تلاش می کنیم تا جایی که ممکن است از کلاس ها و کامپوننت های Bootstrap استفاده کنیم و همچنین از آنجایی که reactstrap از Bootstrap 4 پشتیبانی می کند از آن برای ادغام Bootstrap با React استفاده خواهیم کرد.
ما از ابزار خط دستور create-react-app برای ساخت اپلیکیشن خودمان استفاده خواهیم کرد. اطمینان حاصل کنید که ابزار create-react-app روی دستگاه شما نصب شده باشد. در اینجا تصویری از چیزی که می خواهیم بسازیم قرار دارد.
یک اپلیکیشن React جدید با استفاده از create-react-app مانند زیر بسازید:
create-react-app sample-app
سپس وابستگی ها را مانند زیر نصب کنید:
yarn add axios bootstrap reactstrap
توجه کنید که axios را به عنوان یک وابستگی نصب کرده ایم. Axios یک تعهد بر مبنای HTTP client برای مرورگر ها و Node.js است و به ما این امکان را می دهد که پست ها را از BaconIpsum JSON API واکشی کنیم.
برای اضافه کردن فایل کوتاه شده ی CSS از Bootstrap کمی تغییر در فایل 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();
یک دایرکتوری جدید به نام components در دایرکتوری src از پروژه ی خودتان بسازید. در دایرکتوری components که ساختید فایل 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="/">Events</NavLink>
</NavItem>
<UncontrolledDropdown className="d-flex align-items-center" nav inNavbar>
<DropdownToggle className="font-weight-bold" nav caret>Learn</DropdownToggle>
<DropdownMenu right>
<DropdownItem className="font-weight-bold text-secondary text-uppercase" header disabled>Learn React</DropdownItem>
<DropdownItem divider />
<DropdownItem>Documentation</DropdownItem>
<DropdownItem>Tutorials</DropdownItem>
<DropdownItem>Courses</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;
کامپوننتی که در این قطعه کد ساختیم کامپوننت Header است که شامل منوی مسیریابی است. سپس یک فایل جدید به نام SideCard.js در دایرکتوری components با محتوای زیر خواهیم ساخت:
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 SideCard = () => (
<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">Glad Chinda</CardTitle>
<CardSubtitle className="text-secondary mb-3 font-weight-light text-uppercase" style={{ fontSize: '0.8rem' }}>Web Developer, Lagos</CardSubtitle>
<CardText className="text-secondary mb-4" style={{ fontSize: '0.75rem' }}>Full-stack web developer learning new hacks one day at a time. Web technology enthusiast. Hacking stuffs @theflutterwave.</CardText>
<Button color="success" className="font-weight-bold">View Profile</Button>
</CardBody>
</Card>
</Fragment>
);
export default SideCard;
سپس یک فایل جدید به نام Post.js در دایرکتوری components می سازیم و قطعه کد زیر را به آن اضافه خواهیم کرد:
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¶s=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">Getting Started with React</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;
در اینجا ما کامپوننت Post را ساخته ایم که یک پست را روی صفحه رندر می کند. ما وضعیت این کامپوننت را با ویژگی post که با null تنظیم شده است مقدار دهی اولیه می کنیم. هنگامی که این کامپوننت شروع به کار می کند از axios برای واکشی یک پست تصادفی از 4 پاراگراف از BaconIpsum JSON API استفاده می کنیم و ویژگی 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 SideCard from './components/SideCard';
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;
در اینجا به سادگی کامپوننت های Header ، SideCard و Post را در کامپوننت App قرار داده ایم. توجه کنید که چگونه از تعدادی از کلاس های کاربردی responsive که توسط Bootstrap ارائه شده است تا اپلیکیشن مناسب صفحه نمایش با اندازه های مختلف باشد، استفاده کرده ایم.
اگر شما اپلیکیشن را با دستور yarn start یا npm start اجرا کنید اپلیکیشن شما باید روی پورت 3000 اجرا شود و دقیقا باید مانند تصویری که پیش تر دیدیم باشد.
نتیجه
در این آموزش چندین راه مختلف که می توانیم Bootstrap را با اپلیکیشن React خود ادغام کنیم را بررسی کردیم و همچنین نحوه ی کار با دو اپلیکیشن محبوب React Bootstrap به نام react-bootstrap و reactstrap را نیز بررسی کردیم.
در این آموزش تنها از چند کامپوننت Bootstrap نظیر alert ، badge ، dropdown ، navbar ، nav ، form ، button ، card و غیره استفاده کردیم و همچنان کامپوننت های دیگری نظیر tables ،modals ، tooltips ، carousel ، jumbotron ، pagination ، tabs و غیره وجود دارد که می توانید آن ها را تجربه کنید.
می توانید مستندات پکیج هایی که در این آموزش استفاده کردیم را بررسی کنید تا راه های بیشتری که می توان استفاده کرد را بیابید. source code تمام دموی اپلیکیشن ها در این آموزش را می توانید در GitHub بیابید.
- Web Design
- 6k بازدید
- 1 تشکر