Как использовать компоненты Bootstrap 4 в ReactJS

Платформа Twitter Bootstrap CSS Framework является и будет в течение долгого времени одной из самых удивительных и известных платформ HTML, CSS и JavaScript, которые вы можете использовать как шаблон для создания веб-сайтов или веб-приложений. Основными особенностями фреймворков являются базовые CSS и HTML для типографики, значков, форм, кнопок, таблиц, сеток макетов и навигации, а также пользовательские плагины jquery и поддержка адаптивных макетов. Если вы работаете в каком-либо проекте React и хотите облегчить свою жизнь при разработке пользовательского интерфейса с помощью Bootstrap, у нас есть хорошие новости для вас. Сегодня в качестве компонентов React можно использовать последнюю версию Bootstrap. Мы говорим о Reactstrap. Эта библиотека может помочь вам работать в режиме React, используя потрясающие, новейшие и простые в использовании функции Bootstrap 4.

Заметка

Если вы ищете компоненты Bootstrap 3 в ReactJS, пожалуйста, проверьте эту другую статью.

1. Установите Reactstrap

Модуль Reactstrap реализует все компоненты Bootstrap 4 как компоненты React, поэтому их можно легко встроить в ваше приложение. Это не зависит от jQuery, поэтому ваш код будет максимально чистым. Тем не менее, он использует Tether (зависимость от Bootstrap) для создания эффективных и приятных подсказок. Чтобы установить его, переключитесь в каталог вашего проекта с терминалом и установите в качестве первого шага Bootstrap 4, выполнив следующую команду:

npm install bootstrap@4.0.0-alpha.6 --save

Затем установите модуль Reactstrap, который позволяет использовать начальную загрузку 4 в качестве компонентов реакции:

npm install --save reactstrap react-addons-transition-group react-addons-css-transition-group react react-dom

После установки вы сможете использовать любые компоненты, которые может предложить оригинальная библиотека Bootstrap 4. Для получения дополнительной информации об этой библиотеке, пожалуйста, посетите официальный репозиторий на Github здесь. Не забудьте также посетить их официальный сайт.

2. Определите свою тему Bootstrap 4

Вам нужно будет включить таблицу стилей в классы начальной загрузки 4, так что есть 2 варианта в зависимости от того, как вы работаете. Если вы используете веб-пакет и можете настроить включение CSS-файлов, импортирующих его из JavaScript, вы можете просто импортировать таблицы стилей начальной загрузки 4 по умолчанию в свой основной файл JS, например:

// Import default Bootstrap 4 CSS
import 'bootstrap/dist/css/bootstrap.css';

В противном случае, если вы хотите включить стороннюю тему Bootstrap 4 (как Bootswatch 4) затем вы можете просто включить его в свой HTML-документ с помощью тега ссылки:

My Awesome React App
Loading...

3. Использование компонентов Bootstrap в React

Как типичный подход в React, каждый компонент Bootstrap 4 может быть импортирован из библиотеки:

раскладка

Широко известными особенностями Bootstrap является его революционная система сетки макетов. Использование Grid-системы Bootstrap поможет вам создать макеты страниц через ряд строк и столбцов, в которых размещается ваш контент. Как правило, каждый ряд начальной загрузки помещается в контейнер как в обычном, так и в контейнерном флюиде. В версии React этот компонент также называется контейнером и может использоваться следующим образом:

import {Container} from 'reactstrap';
const ContainerComponent = (
{/* Content here */}
);
const ContainerFluid = (
{/* Content here */}
);

Далее следует компонент Row, который определяет горизонтальный элемент div, в который можно поместить несколько столбцов:

import { Row } from 'reactstrap';
const MyRow = (
{/* My Content */}
);

Наконец, столбцы, которые вы можете использовать в группе с контейнером и строками, чтобы создать свой удивительный макет:

import React from 'react';
import { Container, Row, Col } from 'reactstrap';
export default class Example extends React.Component {
render() {
return (
.col
.col
.col
.col
.col
.col-3
.col-auto - variable width content
.col-3
.col-6
.col-6
.col-6 .col-sm-4
.col-6 .col-sm-4
.col .col-sm-4
.col .col-sm-6 .col-sm-push-2 .col-sm-pull-2 .col-sm-offset-2
.col .col-sm-12 .col-md-6 .col-md-offset-3
.col .col-sm .col-sm-offset-1
.col .col-sm .col-sm-offset-1
);
}
}

Кнопки

Bootstrap предоставляет различные стили кнопок, которые можно легко использовать с React. При простой загрузке вам нужно было только предоставить класс для определения стиля кнопки, теперь в ReactJS вы можете установить его тип с помощью color имущество:

import React from 'react';
import 'bootstrap/dist/css/bootstrap.css';
import { Button } from 'reactstrap';
export default class App extends React.Component {
constructor(props, context) {
super(props, context);
}
render() {
return (
primary{' '}
secondary{' '}
success{' '}
info{' '}
warning{' '}
danger{' '}
link
);
}
}

модальности

Следующий компонент создает кнопку, которая отображает модальный при нажатии. Как только вы нажмете кнопку закрытия, диалоговое окно закроется автоматически:

import React from 'react';
import 'bootstrap/dist/css/bootstrap.css';
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
export default class App extends React.Component {
constructor(props, context) {
super(props, context);
this.state = {
modal: false
};
this.toggle = this.toggle.bind(this);
}
toggle() {
this.setState({
modal: !this.state.modal
});
}
render() {
return (
Open Modal
Modal title
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Do Something{' '}
Cancel
);
}
}

Поскольку мы не хотели перечислять все компоненты начальной загрузки 4, но наиболее часто используемые, вы найдете все компоненты в документации по официальный сайт Reactstrap здесь.