От автора: с ростом популярности одностраничных приложений за последние несколько лет появилось много интерфейсных JavaScript-фреймворков, таких как Angular, React, VueJS, Ember, этот список можно продолжить. В результате использование DOM-библиотек, таких как jQuery, больше не является необходимым требованием для создания веб-приложений. С другой стороны, появилось несколько фреймворков CSS, которые помогут удовлетворить требования построения адаптивных веб-приложений. Почти каждый разработчик интерфейса должен либо использовать, либо слышать о Bootstrap, Foundation или Bulma, каждый из которых представляет собой адаптивную (мобильную) структуру CSS с надежными функциями и встроенными утилитами.
Хотя React стал самой используемой средой JavaScript для создания веб-приложений, Bootstrap — самая популярная платформа CSS, обеспечивающая миллионы веб-сайтов в Интернете. Поэтому становится необходимо изучить различные способы, с помощью которых можно интегрировать в React Bootstrap, и это является целью этого урока.
Этот урок никоим образом не пытается подробно изложить React или Bootstrap. Ожидается, что у вас уже есть опыт работы с React и/или Bootstrap. Если вам нужна помощь с любым из них, смотрите документацию React Docs и Bootstrap.
Добавление Bootstrap
Bootstrap можно добавить в приложение React несколькими способами. В этом уроке нас интересуют только три наиболее распространенных способа:
Использование Bootstrap CDN
Bootstrap как зависимость
React Bootstrap Package
Использование Bootstrap CDN
Это самый простой способ добавить Bootstrap в ваше приложение. Не требуется установка или загрузка. Вы просто помещаете link в раздел head вашего приложения, как показано в следующем фрагменте.
|
1 2 3 |
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous"> |
Если вы хотите использовать компоненты JavaScript, которые поставляются с Bootstrap, вам нужно поместить следующие теги script рядом с вашими страницами, перед закрывающим body, чтобы включить их.
|
1 2 3 4 5 6 7 8 9 10 11 |
<script src="//code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script> <script src="//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 для своих компонентов JavaScript. В приведенном выше фрагменте мы использовали тонкую версию jQuery, хотя вы также можете использовать полную версию.
Для вашего приложения React эти фрагменты кода обычно добавляются на страницу index вашего приложения. Если вы create-react-app для создания своего приложения, ваша страница public/index.html должна выглядеть следующим фрагментом:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
<!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 //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="//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="//code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script> <script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script> </body> </html> |
Теперь вы можете начать использовать встроенные классы Bootstrap и компоненты JavaScript в ваших компонентах приложения React.
Bootstrap как зависимость
Если вы используете инструмент сборки или модуль, например Webpack, то это предпочтительный вариант для добавления Bootstrap в приложение React. Вам нужно будет установить Bootstrap в качестве зависимости для вашего приложения.
|
1 |
npm install bootstrap |
Или, если вы используете Yarn:
|
1 |
yarn add bootstrap |
После того, как вы установили Bootstrap, вы включите его в файл JavaScript входа в приложение. Если вы используете приложение create-react-app, это должен быть ваш файл src/index.js.
|
1 2 3 4 5 6 7 8 9 |
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(); |
Обратите внимание, что мы импортировали загрузочный CSS-фильтр как первую зависимость. При этом мы можем использовать встроенные классы Bootstrap в наших компонентах приложения React. Однако, прежде чем вы сможете использовать компоненты JavaScript Bootstrap в своем приложении, вам нужно будет установить jquery и popper.js если они еще не установлены.
|
1 |
npm install jquery popper.js |
Затем вы внесете дополнительные изменения в файл src/index.js, чтобы добавить новые зависимости, как показано в следующем фрагменте.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
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(); |
Здесь мы добавили импорт для $ и Popper. Мы также импортировали файл с миниатюрным пакетом Bootstrap JavaScript. Теперь вы можете использовать компоненты JavaScript Bootstrap в приложении React.
React Bootstrap package
Третий способ добавить Bootstrap в наше приложение React — это использовать пакет, который перестроил компоненты Bootstrap для работы, в частности, как компоненты React. В репозитории npm есть несколько таких пакетов, но я хотел бы подчеркнуть два самых популярных из них в этом уроке, а именно: react-bootstrap и reactstrap.
Оба пакета — отличный выбор для использования Bootstrap с приложениями React, хотя вы не обязательно должны использовать их. Они имеют очень схожие характеристики.
Использование встроенных классов и компонентов Bootstrap
Вы можете использовать Bootstrap непосредственно на элементах и компонентах вашего приложения React, применяя встроенные классы, как и любой другой класс. Давайте создадим простой компонентный компонент для изменения темы, чтобы продемонстрировать использование классов и компонентов Bootstrap.
Как показано в этой демонстрации, мы используем раскрывающийся компонент, доступный в Bootstrap для реализации нашего переключателя тем. Мы также используем встроенные классы кнопок для установки размера и цвета выпадающего меню.
Мы продолжим писать код для нашего компонента ThemeSwitcher. Убедитесь, что у вас уже установлено приложение React. Создайте новый файл для компонента и добавьте к нему следующий фрагмент кода:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
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; |
Здесь мы создали очень простой компонент переключателя темы, использующий компонент выпадающего списка Bootstrap и пару встроенных классов.
Сначала мы установили состояние компонента с свойством theme и инициализировали его null. Затем мы определили два обработчика события resetTheme() и chooseTheme() в классе компонента для выбора темы и сброса темы соответственно.
В методе render() мы создаем раскрывающееся меню с разделенной кнопкой, содержащее три темы: Primary , Danger и Success. Каждому элементу меню прикреплен обработчик события клика для соответствующего действия. Обратите внимание, как мы используем theme.toLowerCase() чтобы получить класс цвета темы как для раскрывающихся кнопок, так и для текста. Мы по умолчанию используем secondary цвет темы, если тема не задана.
В этом примере мы видели, как легко использовать встроенные классы и компоненты Bootstrap в нашем приложении React.
Использование react-bootstrap
Теперь мы перестроим наш переключатель темы с помощью react-bootstrap. Мы создадим наше приложение с помощью средства командной строки create-react-app -app. Убедитесь, что на вашем компьютере установлено средство create-react-app.
Создайте новое приложение React с помощью приложения create-react-app следующим образом:
|
1 |
create-react-app react-bootstrap-app |
Затем перейдите и установите зависимости следующим образом:
|
1 |
yarn add bootstrap@3 react-bootstrap |
react-bootstrap сейчас нацелен на Bootstrap v3. Тем не менее, активно идет работа по обеспечению поддержки Bootstrap v4.
Создайте новый файл с именем ThemeSwitcher.js в каталоге src вашего проекта и поместите в него следующий контент.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
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. Мы импортируем два компонента из пакета SplitButton react-bootstrap, а именно: SplitButton и MenuItem.
Сначала мы установили состояние компонента свойством theme и инициализировали его null. Затем мы определяем обработчик события chooseTheme() для выбора темы или сброса темы.
Поскольку мы используем Bootstrap 3.3.7, мы создали некоторые стили контейнера в методе render(), чтобы помочь нам достичь горизонтального и вертикального центрирования.
Обратите внимание, как мы определяем размер кнопки в компоненте SplitButton с помощью bsSize prop. Также обратите внимание на то, как мы themeClass в bsStyle prop для динамического изменения цвета кнопки на основе темы состояния.
Мы передаем имя темы команде eventKey для каждого компонента MenuItem. Мы также устанавливаем обработчик onSelect для this.chooseTheme(), который мы определили ранее. Компонент MenuItem передает eventKey и само event в обработчик onSelect следующим образом:
|
1 |
(eventKey: any, event: Object) => any |
Наконец, мы изменим src/index.js файл, чтобы он выглядел следующим фрагментом:
|
1 2 3 4 5 6 7 8 9 10 11 |
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. Мы также импортируем наш компонент ThemeSwitcher и ThemeSwitcher его в DOM.
Если вы запустите приложение сейчас с yarn start команды или npm start, ваше приложение должно стартовать с порта 3000 и должно выглядеть следующим образом:
Использование reactstrap
Мы продолжим работу и перестроим наш переключатель темы с помощью reactstrap. Мы создадим наше приложение с помощью средства командной строки create-react-app -app. Убедитесь, что на вашем компьютере установлено средство create-react-app.
Создайте новое приложение React с помощью приложения create-react-app следующим образом:
|
1 |
create-react-app reactstrap-app |
Затем перейдите и установите зависимости следующим образом:
|
1 |
yarn add bootstrap reactstrap |
Создайте новый файл с именем ThemeSwitcher.js в каталоге src вашего проекта и поместите в него следующий контент.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
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. Сначала мы установили состояние компонента с двумя свойствами:
свойство объекта, инициализированное null
dropdownOpen инициализируется на false. Это свойство будет использоваться в компоненте ButtonDropdown из reactstrap для поддержания состояния переключения выпадающего списка.
Мы также определяем метод toggleDropdown() для переключения открытого состояния выпадающего списка. Это также будет использоваться в компоненте ButtonDropdown.
reactstrap также обеспечивает неконтролируемый компонент UncontrolledButtonDropdown, который не требует поддержки isOpen или поддержки обработчика toggle. В большинстве случаев это можно использовать вместо использования ButtonDropdown.
Каждый элемент в раскрывающемся меню отображается с помощью компонента DropdownItem. Обратите внимание, как мы определяем размер кнопки в компоненте DropdownToggle с помощью параметра size prop. Также обратите внимание на то, как мы themeClass color поддержке компонентов Button и DropdownToggle для динамического изменения цвета кнопки на основе темы состояния.
Мы также устанавливаем обработчик onClick на каждый DropdownItem как и раньше, используя chooseTheme() и resetTheme() мы определили ранее.
Наконец, мы изменим файл src/index.js следующим фрагментом:
|
1 2 3 4 5 6 7 8 9 10 |
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. Мы также импортируем наш компонент ThemeSwitcher и ThemeSwitcher его в DOM.
Если вы запустите приложение сейчас с yarn start команды или npm start, ваше приложение должно стартовать с порта 3000 и должно выглядеть следующим образом:
Создание подробного приложения
Давайте немного продвинем это, чтобы создать приложение с некоторыми подробностями. Мы постараемся использовать как можно больше классов и компонентов Bootstrap. Мы также будем использовать reactstrap для интеграции Bootstrap с React, поскольку он поддерживает Bootstrap 4.
Мы создадим наше приложение с помощью средства командной строки create-react-app -app. Убедитесь, что на вашем компьютере установлено средство create-react-app. Вот скриншот того, что мы будем создавать.
Создайте новое приложение React с помощью приложения create-react-app следующим образом:
|
1 |
create-react-app sample-app |
Затем перейдите и установите зависимости следующим образом:
|
1 |
yarn add axios bootstrap reactstrap |
Обратите внимание, что мы устанавливаем axios как зависимость. Axios — это клиент HTTP, основанный на promises, для браузера и Node.js. Это позволит нам получать сообщения из API BaconIpsum JSON.
Сделайте небольшую модификацию файла src/index.js, чтобы включить файл CSS с миниатюрным Bootstrap. Он должен выглядеть следующим образом:
|
1 2 3 4 5 6 7 8 9 |
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 вашего проекта. Создайте новый файл Header.js в только что созданных components со следующим содержимым:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 |
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 = '//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 со следующим содержимым:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
import React, { Fragment } from 'react'; import { Button, UncontrolledAlert, Card, CardImg, CardBody, CardTitle, CardSubtitle, CardText } from 'reactstrap'; const BANNER = '//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 и добавьте к нему следующий фрагмент кода:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
import React, { Component, Fragment } from 'react'; import axios from 'axios'; import { Badge } from 'reactstrap'; class Post extends Component { state = { post: null } componentDidMount() { axios.get('//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 абзацев из API BaconIpsum JSON и обновить свойство post в состоянии.
Наконец, измените файл src/App.js следующим фрагментом:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
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. Обратите внимание, как мы используем пару классных классов, предоставляемых Bootstrap, для адаптации нашего приложения к разным размерам экрана.
Если вы запустите приложение сейчас с yarn start команды или npm start, ваше приложение должно стартовать с порта 3000 и должно выглядеть так же, как скриншот, который мы видели ранее.
Заключение
В этом уроке мы рассмотрели несколько различных способов, с помощью которых мы можем интегрировать Bootstrap с нашими приложениями React. Мы также видели, как мы можем использовать две самых популярных библиотеки React Bootstrap, а именно: react -bootstrap и responsestrap.
Мы использовали только несколько компонентов Bootstrap в этом учебнике, таких как предупреждение, значок, выпадающий список, navbar, nav, форма, кнопка, карта и т. д. Есть еще пара компонентов Bootstrap, которые вы можете экспериментировать, например, таблицы, модальные окна, подсказки, карусель, jumbotron, разбиение на страницы, вкладки и т. д.
Вы можете проверить документацию пакетов, которые мы использовали в этом уроке, чтобы узнать больше способов их использования. Исходный код для всех демонстрационных приложений в этом учебнике можно найти на GitHub.
Автор: Glad Chinda
Источник: //blog.logrocket.com/
Редакция: Команда webformyself.
