Bootstrap — самая популярная платформа для создания красивых мобильных веб-сайтов, а ReactJS — самая популярная библиотека для создания многофункциональных пользовательских интерфейсов. Использование их вместе может быть немного сложным, но к концу этого руководства у вас будет шаблонный проект ReactJS, который успешно использует Bootstrap.
TLDR;
Я знаю, что вы, вероятно, не будете читать каждое слово этого поста, поэтому, если вы ленивы и просто хотите получить результат, клонируйте шаблон здесь. Если вы хотите узнать, как его настроить, продолжайте читать!
Начиная
Если вам нужно создать новый проект ReactJS, сделайте это с помощью следующей команды. Мне нравится использовать create-react-app, так как он настраивает базовый проект со всеми сценариями/зависимостями, необходимыми для начала работы. Если у вас уже есть существующий проект, пропустите этот шаг.
npx create-react-app PROJECT_NAME
Установка зависимостей
Для использования Bootstrap с React вам понадобятся 2 дополнительных пакета: sassиbootstrap. Установите их с помощью следующей команды.
npm install sass bootstrap
Sass используется для переопределения существующих цветов Bootstrap.
Импорт Bootstrap
Ваш первый шаг — создать новый файл с именем App.scss в папке src. Если вы никогда раньше не использовали Sass, не волнуйтесь! Вы можете думать о Sass как о файле CSS с дополнительными наворотами.
Добавьте следующий код в новый файл src/App.scss.
Пояснение
Строки 1 и 2 выше во фрагменте кода переопределяют существующие цвета Bootstrap. Существует 10 стандартных цветов Bootstrap, которые необходимо переопределить: основной, дополнительный, успех, опасность, предупреждение, информация, светлый, темный, приглушенный,и белый.
В моем примере я изменил только основной и дополнительный цвета Bootstrap, но вы можете включить столько переопределений, сколько вам нужно, просто следуйте тому же синтаксису.
ОЧЕНЬ важно переопределить цвета перед импортом файла Bootstrap Sass (строка 4). Если вы сначала импортируете Bootstrap, это не сработает.
Импорт App.scss
Последним шагом в настройке Bootstrap для работы с React является импорт только что созданного файла App.scss.
Откройте файл точки входа в своем проекте, обычно это index.jsили app.js и затем добавьте следующую строку в начало этого файла. В моем случае это index.js, так как я использовал create-react-app.
import './App.scss'
Использование новых цветов
Теперь, когда вы импортировали App.scss в корень вашего проекта, вы можете использовать любой класс Bootstrap в React! Посмотрите пример ниже, чтобы увидеть его в действии!
Подведение итогов
В этом коротком руководстве вы узнали, как использовать React с Bootstrap. Если у вас есть какие-либо вопросы, не стесняйтесь оставлять комментарии ниже, и я отвечу, как только смогу!
Если вы узнали что-то новое в этом уроке, поставьте лайк и рассмотрите возможность подписаться на меня, чтобы получить больше подобных уроков!
Если вы хотите просмотреть исходный код этого проекта, нажмите здесь.
