Узнайте, как правильно установить и использовать Bootstrap в ваших проектах React.

Согласно опросу разработчиков Stack Overflow, в настоящее время React является самой популярной средой JavaScript. В этой статье я познакомлю вас с библиотекой пользовательского интерфейса под названием «React-Bootstrap», которая предоставляет замечательные компоненты пользовательского интерфейса. Многие библиотеки пользовательского интерфейса React доступны в Интернете, но React-Bootstrap на сегодняшний день является самым популярным выбором среди веб-разработчиков. Спасибо создателям за сохранение схожести со стандартным фреймворком Bootstrap и наличие широкого спектра тем Bootstrap.

Четырехэтапное руководство по интеграции библиотеки пользовательского интерфейса React-Bootstrap в React

  1. Установка React-Bootstrap
  2. Импорт файлов активов в приложение
  3. Импорт компонентов
  4. Использование компонентов

Шаг 1: Установка React-Bootstrap

Откройте терминал в своем проекте React и выполните следующую команду, чтобы начать установку пакета с помощью NPM (менеджера пакетов узлов).

npm install react-bootstrap bootstrap

Если вы предпочитаете использовать пряжу, выполните следующую команду.

yarn add react-bootstrap bootstrap

Приведенная выше команда установит два пакета — Bootstrap и React-Bootstrap. Цель установки Bootstrap в дополнение к React-Bootstrap: Пакет React-Bootstrap не поставляется с каким-либо CSS. Он содержит только компоненты. Поэтому для включения файлов CSS требуется дополнительный пакет.

Шаг 2: Импорт файлов активов в приложение

Откройте index.js и добавьте следующую строку, чтобы включить файл CSS платформы Bootstrap.

import 'bootstrap/dist/css/bootstrap.min.css';

Теперь вы можете начать использовать библиотеку пользовательского интерфейса React-Bootstrap и ее компоненты в своем приложении.

Шаг 3: Импорт компонентов

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

import Button from 'react-bootstrap/Button';

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

Шаг 4: Использование компонентов

Вот как вы можете использовать любой компонент Bootstrap в своем приложении React. Я продемонстрирую несколько, но вы можете обратиться к официальной документации, чтобы увидеть все компоненты.

  • Компонент кнопки
  • Компонент оповещения
  • Компонент Spinner

4.1. Компонент кнопки

Импортируйте компонент, добавив следующую строку вверху страницы.

import Button from 'react-bootstrap/Button';

Затем вы можете использовать свойства импортированного компонента, чтобы изменить его макет. Например, кнопка имеет множество реквизитов, таких как variant, type, target, size и т. д. Обратитесь к следующему фрагменту кода, чтобы отобразить кнопку.

Включите его в файл App.js, и вы увидите следующий вывод.

4.2. Компонент оповещения

Импортируйте компонент, добавив следующую строку вверху страницы.

import Alert from 'react-bootstrap/Alert';

Затем вы можете использовать свойства импортированного компонента, чтобы изменить его макет. Например, у Alert есть такие реквизиты, как variant. Обратитесь к следующему фрагменту кода, чтобы отобразить предупреждение.

Включите его в файл App.js, и вы увидите следующий вывод.

4.3. Компонент Spinner

Импортируйте компонент, добавив следующую строку вверху страницы.

import Spinner from 'react-bootstrap/Spinner';

Затем вы можете использовать свойства импортированного компонента, чтобы изменить его макет. Например, у Spinner есть такие реквизиты, как variant. Обратитесь к следующему фрагменту кода, чтобы отобразить счетчик.

Включите его в файл App.js, и вы увидите следующий вывод.

Посетите следующий репозиторий GitHub, чтобы скачать файлы.



GitHub — tararoutray/react-bootstrap-demo: демонстрационное приложение, показывающее, как интегрировать загрузку с…
Этот проект был загружен с помощью Create React App. В каталоге проекта вы можете запустить: Запускает приложение в…github.com



Посетите официальную страницу документации React-Bootstrap, чтобы узнать больше о его компонентах.



React-Bootstrap
Самый популярный интерфейсный фреймворк, перестроенный для React.react-bootstrap.github.io



Слава! Вы научились устанавливать и использовать библиотеку пользовательского интерфейса React-Bootstrap в приложениях React и создавать потрясающие приложения.

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