React является одним из самых популярных фреймворков и библиотек JavaScript для создания одностраничных приложений и пользовательских интерфейсов. Его гибкость в создании пользовательских интерфейсов с использованием повторно используемых компонентов, скорость разработки и поддержка сообщества – причины его популярности.
Однако React необходимо сочетать с каскадными таблицами стилей (CSS), чтобы сделать его приложения более визуально привлекательными и презентабельными. Написание CSS с нуля может занять много времени.
Разработчики могут потратить много времени на работу над стилем вместо основной функциональности приложения React. Хорошая новость заключается в том, что такие инструменты и фреймворки, как Bootstrap, упрощают добавление CSS в ваше приложение React.
Содержание
Что такое бутстрап?
Bootstrap — это CSS-фреймворк с открытым исходным кодом для фронтенд-разработки. Bootstrap позволяет разработчикам создавать адаптивные и удобные для мобильных устройств веб-сайты с помощью обширного набора инструментов и шаблонов дизайна на основе JavaScript и CSS.
Bootstrap был создан Twitter и также поддерживается командой инженеров из той же компании. Его исходный код поддерживается на GitHub, и члены сообщества могут вносить свой вклад и отправлять отчеты об ошибках и предложения. Bootstrap 5.3.0-alpha1 — последняя версия на момент написания.
Зачем использовать Bootstrap с React?
- Экономит время: Bootstrap позаботится о форматировании, давая вам больше времени, чтобы сосредоточиться на функциональности. Поэтому вам не нужно беспокоиться о таких проблемах, как внешний вид ваших форм или кнопок, а о таких областях, как отправка данных кнопкой отправки в ваш сервер или API.
- Простота использования: когда вы добавляете Bootstrap в свое приложение React, просто возьмите предварительно разработанные компоненты пользовательского интерфейса и добавьте их в свое приложение.
- Последовательный дизайн. Большинство приложений со временем расширяются. Обеспечение согласованности дизайна вашего сайта важно, если вы хотите привлечь лояльных пользователей. Bootstrap имеет единый стиль, который придаст вашим страницам единообразный вид.
- Множество шаблонов на выбор: Bootstrap предлагает сотни шаблонов, начиная от панелей навигации, кнопок, форм и каруселей и заканчивая раскрывающимися списками, и это лишь некоторые из них, из которых вы можете выбирать.
- Простота настройки: хотя в Bootstrap есть шаблоны дизайна, вы всегда можете настроить размер шрифта, цвет и другие функции в соответствии со своими потребностями.
- Поддержка сообщества: Bootstrap имеет обширную документацию, которая поможет вам начать работу. Тем не менее, вы по-прежнему можете рассчитывать на большое сообщество, всегда добавляющее новые функции и поддерживающее эту структуру CSS.
- Адаптивный дизайн. Когда вы добавляете Bootstrap в свое приложение React, вы уверены, что ваше веб-приложение будет реагировать на все размеры экрана.
Как установить Bootstrap в React
Приложение React не поставляется с установленным Bootstrap по умолчанию. Но прежде чем мы рассмотрим, как добавить/установить Bootstrap в React, нам нужно проверить несколько вещей;
Предпосылки
Используйте эту команду, чтобы проверить, установлен ли node.js на вашем компьютере:
node -v
Если установлен node.js, в вашем терминале будет вывод, аналогичный этому.
Версия узла
Если он не установлен, вы можете обратиться к инструкциям по загрузке с https://nodejs.org/en/.
Используйте эту команду, чтобы проверить, установлен ли React на вашем компьютере:
npm list react
Если React установлен глобально на вашем компьютере, в вашем терминале будет что-то подобное.
Реагировать Версия
- Установите приложение react-create-app на свой компьютер. Используя эту команду
npm install -g create-react-app
- Создайте свое приложение React с помощью этой команды
npx create-react-app my-app
Вы можете заменить мое приложение любым именем по вашему выбору. В нашем случае мы назвали наше приложение react-b.
После установки у вас будет что-то вроде этого на вашем терминале:
Запустите эти команды, чтобы начать
- cd react-b (используйте имя вашего приложения, выбранное на предыдущем шаге)
- npm start (эта команда запускает ваше приложение React)
Теперь мы можем перейти к следующим шагам и добавить/установить Bootstrap в наше приложение React:
Метод установки NPM Bootstrap
Node.js поставляется с установленным по умолчанию npm (менеджером пакетов узла).
Вы можете проверить свою версию npm с помощью этой команды:
npm -v
Если npm установлен, вы получите результат вроде 9.2.0.
Теперь вы можете установить загрузчик с помощью этой команды:
npm install bootstrap
После этого перейдите к файлу ./src/indek.js. Добавьте эту строку вверху.
импортировать ‘bootstrap/dist/css/bootstrap.css’;
Использование менеджера пакетов пряжи
В отличие от npm, iarn не устанавливается по умолчанию при установке node.js.
Установите iard с помощью этой команды;
npm install -g yarn
Эта команда установит iarn глобально, поэтому вам больше не нужно устанавливать пакет каждый раз, когда вы создаете приложение React.
Запустите эту команду, чтобы добавить загрузчик в React:
yarn add bootstrap
После этого перейдите к файлу ./src/indek.js. Добавьте эту строку вверху.
импортировать ‘bootstrap/dist/css/bootstrap.css’;
Вы всегда должны импортировать Bootstrap в начало входного файла вашего приложения перед любыми другими файлами CSS. Это упрощает изменение записей Bootstrap, если вам нужно изменить значения шаблона по умолчанию при создании приложения React.
Метод CDN
Используя подключение к сети доставки контента (CDN), вы можете добавить Bootstrap в React. Добавляя эту ссылку CDN, вы включаете библиотеку Bootstrap в свое приложение React без загрузки и размещения файлов в папке вашего проекта. Следуй этим шагам.
- В своем домашнем каталоге перейдите к файлу .public/indek.html.
- Добавьте этот тег в тег
[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
- Вам нужно добавить зависимости JavaScript в ваше приложение. Перейдите к телу вашего файла index.html и добавьте этот тег непосредственно перед закрывающим тегом:
Bootstrap, наконец, установлен в вашем приложении React.
Использование пакета React Bootstrap
Подходы, которые мы рассмотрели до сих пор, изначально были разработаны для файлов HTML. Чтобы лучше понять это, рассмотрите этот выпадающий код из Bootstrap:
Что не так с кодом? Bootstrap по умолчанию использует класс для классификации своих разделов (DIV). Однако React использует JSX, который использует синтаксис CamelCase. Поэтому вы должны вручную заменить класс на className.
Чтобы этот код работал в React, нам нужно заменить каждый «класс» на «имя_класса». Окончательный код будет:
К счастью, у нас есть два других подхода, react-bootstrap и reactstrap, где ручное вмешательство не требуется.
React-бутстрап
React-bootstrap содержит настоящие компоненты React, созданные с нуля. Библиотека совместима с ядром Bootstrap.
Выполните следующие шаги, чтобы начать работу с React-bootstrap:
- Установите React-bootstrap с помощью этой команды:
npm install react-bootstrap bootstrap
- Перейдите в свой файл src/index.js или App.js и добавьте эту строку перед другими файлами CSS.
импортировать ‘bootstrap/dist/css/bootstrap.min.css’;
React-bootstrap позволяет импортировать конкретный компонент вместо всей библиотеки. Например, если вам нужно импортировать кнопку в один из ваших компонентов, вы можете импортировать ее следующим образом;
импортировать {кнопку} из ‘реагировать-бутстрап’;
Реактстрап
Это библиотека компонентов React для Bootstrap. Reactstrap опирается на фреймворк Bootstrap CSS для своих стилей и тем. Эта библиотека импортирует настоящие классы Bootstrap в ваше приложение React, позволяя вам иметь единый стиль приложения. Вам также не нужно добавлять файлы JavaScript Bootstrap, чтобы активировать функциональность.
Выполните следующие действия, чтобы добавить Reactstrap в свое приложение React:
- Установите Reactstrap с помощью этой команды:
npm install reactstrap react react-dom
- Импортируйте Bootstrap с помощью этих команд:
npm install --save bootstrap
импортировать ‘bootstrap/dist/css/bootstrap.min.css’; (добавьте эту строку в ваш app.js)
Вы также можете использовать вариант ссылки CDN, чтобы включить Bootstrap в свое приложение. После первого шага перейдите в корневой каталог, перейдите к файлу .public/index.html и добавьте эту строку в тег
[email protected]/dist/css/bootstrap.min.css" />
Reactstrap позволяет импортировать определенный компонент вместо всей библиотеки. Например, если вам нужно импортировать кнопку в один из ваших компонентов, вы можете импортировать как;
импортировать {Кнопку} из ‘Reactstrap’;
Заключение
Выше приведены некоторые подходы, которые вы можете использовать для установки Bootstrap в свое приложение React для стилизации веб-приложений. Выбор подхода к размещению является вопросом предпочтения, поскольку конечная цель одна и та же.
Сочетание React с Bootstrap избавляет вас от необходимости отслеживать все стили CSS по мере роста вашего приложения. Разработка вашего приложения становится простой и эффективной, поскольку у вас появляется больше времени, чтобы сосредоточиться на функциональности.
Вы можете изучить несколько причин, по которым стоит выбрать React Native для разработки мобильных приложений.
