Как использовать Bootstrap с React

Как использовать Bootstrap с React

От автора: с ростом популярности одностраничных приложений за последние несколько лет появилось много интерфейсных 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 вашего приложения, как показано в следующем фрагменте.

Если вы хотите использовать компоненты JavaScript, которые поставляются с Bootstrap, вам нужно поместить следующие теги script рядом с вашими страницами, перед закрывающим body, чтобы включить их.

Как вы можете видеть, Bootstrap 4 требует jQuery и Popper.js для своих компонентов JavaScript. В приведенном выше фрагменте мы использовали тонкую версию jQuery, хотя вы также можете использовать полную версию.

Для вашего приложения React эти фрагменты кода обычно добавляются на страницу index вашего приложения. Если вы create-react-app для создания своего приложения, ваша страница public/index.html должна выглядеть следующим фрагментом:

Теперь вы можете начать использовать встроенные классы Bootstrap и компоненты JavaScript в ваших компонентах приложения React.

Как использовать Bootstrap с React

Bootstrap как зависимость

Если вы используете инструмент сборки или модуль, например Webpack, то это предпочтительный вариант для добавления Bootstrap в приложение React. Вам нужно будет установить Bootstrap в качестве зависимости для вашего приложения.

Или, если вы используете Yarn:

После того, как вы установили Bootstrap, вы включите его в файл JavaScript входа в приложение. Если вы используете приложение create-react-app, это должен быть ваш файл src/index.js.

Обратите внимание, что мы импортировали загрузочный CSS-фильтр как первую зависимость. При этом мы можем использовать встроенные классы Bootstrap в наших компонентах приложения React. Однако, прежде чем вы сможете использовать компоненты JavaScript Bootstrap в своем приложении, вам нужно будет установить jquery и popper.js если они еще не установлены.

Затем вы внесете дополнительные изменения в файл src/index.js, чтобы добавить новые зависимости, как показано в следующем фрагменте.

Здесь мы добавили импорт для $ и Popper. Мы также импортировали файл с миниатюрным пакетом Bootstrap JavaScript. Теперь вы можете использовать компоненты JavaScript Bootstrap в приложении React.

React Bootstrap package

Третий способ добавить Bootstrap в наше приложение React — это использовать пакет, который перестроил компоненты Bootstrap для работы, в частности, как компоненты React. В репозитории npm есть несколько таких пакетов, но я хотел бы подчеркнуть два самых популярных из них в этом уроке, а именно: react-bootstrap и reactstrap.

Оба пакета — отличный выбор для использования Bootstrap с приложениями React, хотя вы не обязательно должны использовать их. Они имеют очень схожие характеристики.

Использование встроенных классов и компонентов Bootstrap

Вы можете использовать Bootstrap непосредственно на элементах и компонентах вашего приложения React, применяя встроенные классы, как и любой другой класс. Давайте создадим простой компонентный компонент для изменения темы, чтобы продемонстрировать использование классов и компонентов Bootstrap.

Как использовать Bootstrap с React

Как показано в этой демонстрации, мы используем раскрывающийся компонент, доступный в Bootstrap для реализации нашего переключателя тем. Мы также используем встроенные классы кнопок для установки размера и цвета выпадающего меню.

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

Здесь мы создали очень простой компонент переключателя темы, использующий компонент выпадающего списка 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 следующим образом:

Затем перейдите и установите зависимости следующим образом:

react-bootstrap сейчас нацелен на Bootstrap v3. Тем не менее, активно идет работа по обеспечению поддержки Bootstrap v4.

Создайте новый файл с именем ThemeSwitcher.js в каталоге src вашего проекта и поместите в него следующий контент.

Здесь мы попытались как можно больше подражать нашему первоначальному примеру с помощью 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 следующим образом:

Наконец, мы изменим src/index.js файл, чтобы он выглядел следующим фрагментом:

Здесь мы сначала импортируем загрузочные файлы CSS Bootstrap. Мы также импортируем наш компонент ThemeSwitcher и ThemeSwitcher его в DOM.

Если вы запустите приложение сейчас с yarn start команды или npm start, ваше приложение должно стартовать с порта 3000 и должно выглядеть следующим образом:

Как использовать Bootstrap с React

Использование reactstrap

Мы продолжим работу и перестроим наш переключатель темы с помощью reactstrap. Мы создадим наше приложение с помощью средства командной строки create-react-app -app. Убедитесь, что на вашем компьютере установлено средство create-react-app.

Создайте новое приложение React с помощью приложения create-react-app следующим образом:

Затем перейдите и установите зависимости следующим образом:

Создайте новый файл с именем ThemeSwitcher.js в каталоге src вашего проекта и поместите в него следующий контент.

Здесь мы перестроили наш первоначальный пример, используя 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 следующим фрагментом:

Здесь мы сначала импортируем файл CSS с оптимизацией Bootstrap. Мы также импортируем наш компонент ThemeSwitcher и ThemeSwitcher его в DOM.

Если вы запустите приложение сейчас с yarn start команды или npm start, ваше приложение должно стартовать с порта 3000 и должно выглядеть следующим образом:

Как использовать Bootstrap с React

Создание подробного приложения

Давайте немного продвинем это, чтобы создать приложение с некоторыми подробностями. Мы постараемся использовать как можно больше классов и компонентов Bootstrap. Мы также будем использовать reactstrap для интеграции Bootstrap с React, поскольку он поддерживает Bootstrap 4.

Мы создадим наше приложение с помощью средства командной строки create-react-app -app. Убедитесь, что на вашем компьютере установлено средство create-react-app. Вот скриншот того, что мы будем создавать.

Как использовать Bootstrap с React

Создайте новое приложение React с помощью приложения create-react-app следующим образом:

Затем перейдите и установите зависимости следующим образом:

Обратите внимание, что мы устанавливаем axios как зависимость. Axios — это клиент HTTP, основанный на promises, для браузера и Node.js. Это позволит нам получать сообщения из API BaconIpsum JSON.

Сделайте небольшую модификацию файла src/index.js, чтобы включить файл CSS с миниатюрным Bootstrap. Он должен выглядеть следующим образом:

Создайте новый каталог с именами components в каталоге src вашего проекта. Создайте новый файл Header.js в только что созданных components со следующим содержимым:

Компонент, который мы только что создали в этом фрагменте, представляет собой компонент Header, который содержит меню навигации. Затем мы создадим новый файл с именем SideCard.js в каталоге components со следующим содержимым:

Затем создайте новый файл с именем Post.js в каталоге components и добавьте к нему следующий фрагмент кода:

Здесь мы создали компонент Post который отображает сообщение на странице. Мы инициализируем состояние компонента, свойство post равно null. Когда компонент монтируется, мы используем axios для получения случайного сообщения из 4 абзацев из API BaconIpsum JSON и обновить свойство post в состоянии.

Наконец, измените файл src/App.js следующим фрагментом:

Здесь мы просто включаем компоненты 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.

Метки:

Похожие статьи:

Комментарии Вконтакте: