Как установить bootstrap react
Два способа интеграции Bootstrap в React-приложение
Второй метод заключается в установке готового пакета React-Bootstrap. Данная сборка позволяет использовать JavaScript компоненты фреймворка Bootstrap (кнопки, формы, элементы навигации) в React- приложениях. Мы рассмотрим оба способа, чтобы вы могли выбрать наиболее подходящий.
Пример использования элементов Bootstrap в оформлении React- приложения:
Первый способ интеграции Bootstrap и React
Прежде всего, установим фреймворк Bootstrap, используя следующую команду для менеджера пакетов npm:
Код в файле src/index.js должен выглядеть следующим образом:
Теперь вы можете использовать классы Bootstrap, как это сделал я в файле src/App.js (результат – на скриншоте, продемонстрированном в начале статьи):
Второй способ подключения Bootstrap к React-приложениям
В этом методе мы установим сборку React-Bootstrap с помощью следующей npm команды:
После завершения установки импортируем CSS элементы Bootstrap в файл src/index.js :
Код файла src/index.js выглядит следующим образом:
Все готово, можно использовать классы Bootstrap, как это сделано в моем примере файла src/App.js на скриншоте, приведенном в начале статьи:
Пожалуйста, оставьте ваши мнения по текущей теме материала. Мы очень благодарим вас за ваши комментарии, дизлайки, лайки, отклики, подписки!
Как использовать Bootstrap с React?
Все мы знаем популярность React и то, как эта библиотека упростила задачи разработки для фронтенд-разработчиков. React — самая популярная интерфейсная библиотека для создания пользовательского интерфейса приложения. Отрасли постепенно сокращают использование библиотек jQuery и DOM для создания своих приложений.
Когда дело доходит до создания адаптивного приложения, на рынке полезны фреймворки CSS. Если вы работаете фронтенд-разработчиком, то фреймворки Bootstrap, Foundation и Bulma для вас не новы. Большинство отраслей используют фреймворк Bootstrap. Миллионы веб-сайтов работают в режиме начальной загрузки.
В этом блоге мы собираемся обсудить, как использовать React и Bootstrap, как добавить bootstrap в приложение React. Как установить пакет начальной загрузки React и как использовать его в приложении React. Начнем с этого…
Метод добавления Bootstrap в React
В основном есть три способа добавить Bootstrap в приложение React. Обсудим их по очереди.
1. Использование Bootstrap CDN
Это один из самых простых способов использовать бутстрап в вашем приложении React. Лучшее в загрузочном CDN — это отсутствие необходимости в установке или загрузке. Вам просто нужно скопировать и вставить ссылку в заголовок вашего приложения, чтобы оно заработало. Ниже находится ссылка, которая вам нужна.
Если вашему приложению нужны компоненты JavaScript вместе с начальной загрузкой, то в нижней части страницы разместите тег
Интеграция Bootstrap с React: руководство для разработчиков
Интеграция Bootstrap с React позволяет разработчикам React использовать современную сеточную систему Bootstrap и ее различные другие компоненты.
В этом уроке мы собираемся:
React — одна из самых популярных технологий JavaScript для интерактивных веб-приложений. Его популярность проистекает из модульного подхода на основе компонентов, компоновки и быстрого алгоритма рендеринга.
Почему нельзя просто включить компоненты Bootstrap в React
Если нам нужен Bootstrap только для адаптивной сетки из 12 столбцов или компонентов, которые не используют jQuery, мы можем просто прибегнуть к ванильной таблице стилей Bootstrap. Иначе, есть много библиотек, которые заботятся о преодолении разрыва между React и Bootstrap. Мы сравним оба метода, чтобы лучше подходить к конкретному случаю.
Настройка таблицы стилей Bootstrap с помощью React
Давайте используем CLI Create React App для создания проекта React, который требует нулевой конфигурации для начала работы.
Мы устанавливаем приложение Create React и запускаем следующую команду, чтобы начать новый проект и обслуживать сборку разработки:
Вот структура каталогов, созданная приложением Create React:
В качестве альтернативы, мы можем использовать CDN для извлечения минимизированного CSS:
Давайте посмотрим, что работает, а что нет с этой настройкой.
Использование Vanilla Bootstrap с React
После добавления таблицы стилей Bootstrap в проект React мы можем использовать обычные классы Bootstrap внутри кода JSX. Давайте перейдем на демонстрационный сайт Bootstrap и скопируем некоторый случайный пример кода, просто чтобы убедиться, что все работает как надо:
Разве не было бы замечательно, если бы мы могли импортировать Bootstrap в качестве компонентов React, чтобы максимально использовать возможности React? Например, представьте, можно ли использовать комбинацию компонентов Grid, Row и Column для организации страницы вместо надоедливых HTML-классов:
К счастью, нам не нужно реализовывать собственную библиотеку для этой цели, так как уже есть некоторые популярные решения. Давайте посмотрим на некоторые из них.
Обзор сторонних библиотек для React и Bootstrap
Существует несколько библиотек, которые пытаются создать реализацию Bootstrap для React, чтобы мы могли использовать компоненты JSX при работе со стилями Bootstrap. Я собрал список нескольких популярных модулей Bootstrap, которые мы можем использовать в наших проектах React.
React-Bootstrap — безусловно, одна из самых популярных библиотек для добавления компонентов Bootstrap в React. Однако на момент написания этого руководства оно предназначалось для Bootstrap v3, а не для последней версии Bootstrap. Он находится в активной разработке, и API может сломаться, когда выйдет более новая версия.
Reactionstrap — это еще одна библиотека, которая дает нам возможность использовать компоненты Bootstrap в React. В отличие от React-Bootstrap, responsestrap создан для последней версии Bootstrap. Модуль включает компоненты для типографики, значков, форм, кнопок, таблиц, сеток макетов и навигации. Он также находится в активной разработке и является хорошей альтернативой для создания приложений Bootstrap на основе React.
Как включить bootstrap css и js в приложение reactjs?
Я новичок в reactjs, я хочу включить bootstrap в мое приложение react
теперь, хотите загрузить bootstrap css и js в моем приложении react.
Я использую webpack.
webpack.конфиг.js
моя проблема: «как включить bootstrap css и js в приложение reactjs из node_modules?»Как настроить bootstrap для включения в мое приложение react?
9 ответов
если вы новичок в реагировании и использовании create-react-app cli настройка. Затем выполните приведенную ниже команду NPM, чтобы включить последнюю версию bootstrap.
не забудьте использовать className как атрибут (react использует className как атрибут вместо класс)
вы не можете использовать компоненты Javascript на основе Bootstrap Jquery в приложении React, так как все, что пытается манипулировать DOM вне React, считается плохой практикой. Здесь вы можете прочитать подробнее о.
Как включить Bootstrap в приложение React:
1) рекомендовано. Вы можете включить необработанные CSS-файлы Bootstrap, как указано в других ответах.
2) посмотри react-bootstrap библиотека. Это исключительно написано для реакции.
3) для Bootstrap 4 есть reactstrap
бонус
в эти дни я обычно избегаю загрузочных библиотек, которые предоставляют готовые к использованию компоненты (вышеупомянутые react-bootstrap или reactstrap и т. д.). Поскольку вы становитесь зависимыми от реквизита, который они берут (вы не можете добавить пользовательское поведение внутри них), и вы теряете контроль над DOM, который производят эти компоненты.
поэтому либо используйте только Bootstrap CSS, либо оставьте Ушко наружу. Общее эмпирическое правило: если вы не уверены, нужно ли вам это, вам это не нужно. Я видел много приложений, которые включают Bootstrap, но используют только небольшое количество CSS, и иногда большая часть этого CSS переопределяется пользовательскими стилями.
можно просто import файл css, где вы хотите. Webpack позаботится о том, чтобы связать css, если вы настроили загрузчик по мере необходимости.
и webpack конфиг вроде
Примечание: Вы также должны добавить загрузчики шрифтов, иначе вы получите ошибку.
Via npm, вы бы запустить folowing
если bootstrap 4, также добавьте поппер.js
добавить следующее (как новый объект) в свой конфигурация webpack loaders: [ массив
добавьте к вашему индекс или планировка
пожалуйста, перейдите по ссылке ниже, чтобы использовать bootstrap с React. https://react-bootstrap.github.io/
поместите загрузочный CDN для CSS в тег индекса.html-файл в react и Bootstrap CDN для Js в теге индекса.HTML-файл. Применение класса вместо класса следуйте ниже индекса.HTML-код
и добавьте import в свой индекс.файл JS
или вы можете просто добавить CDN в свой индекс.HTML-файл.
вы можете установить его dirctly через
затем импортируйте то, что вам действительно нужно из bootstrap, например :
а также вы можете установить:
и для CSS вы можете прочитать эту ссылку также carfuly
надеюсь, это полезно;)
Шаг 1: с помощью NPM установите эту команду ниже
Шаг 2: пример индекса.в JS скрипт импорта ниже команду
Шаг 3: компоненты пользовательского интерфейса см. ниже веб-сайт reactstrap.гитуб.io
на всякий случай, если вы можете использовать yarn что рекомендуется для приложений React,
это добавит bootstrap в качестве зависимости от вашего package.json как хорошо.
React.js: собираем с нуля изоморфное / универсальное приложение. Часть 2: добавляем bootstrap, страницы и роутинг
Разработка изоморфного приложения глазами моей жены
Это продолжение статьи про разработку изоморфного приложения с нуля на React.js. В этой части мы добавим несколько страниц, bootstrap, роутинг, концепцию Flux и ее популярную реализацию Redux.
Оглавление
Итак, в первой части мы закончили на том, что разработали простой компонент HelloWorld и собрали окружение для сборки и контроля качества кода. Настало время сделать полноценный сайт, а это значит, что мы добавим еще несколько страниц, свяжем их ссылками и реализуем изоморфный роутинг.
1. Добавляем в проект react-bootstrap
Это очень популярная библиотека, которая позволяет использовать элементы bootstrap в стиле React.
Например, вместо конструкций вида
Также не придется использовать JavaScript-код оригинального bootstrap, ведь он уже реализован в компонентах react-bootstrap.
Устанавливаем react-bootstrap
Вносим изменения в проект
Выделим виджет HelloWorld из App.jsx в отдельный компонент. Напоминаю, что App.jsx — это точка входа в изоморфную часть приложения, и мы ее скоро перепишем в виде layout’а, внутри которого будут отображаться запрошенные пользователем страницы.
Рефакторинг
src/components/HelloWorldPage/index.js
Этот шаг позволит нам импортировать наш компонент так
Это аккуратнее и упрощает сопровождение исходного кода приложения.
Создаем App.jsx
src/components/App/index.js
src/components/App/App.jsx
Важное примечание: обратите внимание, что я явно указываю, какие компоненты react-bootstrap я импортирую. Это поможет webpack в процессе сборки включить только используемую в проекте часть react-bootstrap, а не всю библиотеку целиком, как случилось бы, если бы я написал
Важно отметить, что этот маневр работает только в тех случаях, когда используемая библиотека поддерживает модульность. Например, react-bootstrap и lodash к таким относятся, а jquery и momentjs — нет.
Как видно из кода, приведенный выше компонент не работает со state и не использует component workflow callbacks (например, componentWillMount и componentDidMount). Это означает, что его можно переписать в виде так называемого Pure Sateless Function Component.
В будущем компоненты, написанные таким образом, будут иметь преимущество в производительности (спасибо теории функционального программирования и концепции pure functions), а чем более производителен каждый компонент в отдельности, тем более производительное приложение у нас получится в итоге.
Пока же реакт оборачивает подобные компоненты в обычные ES6-классы, но с одним приятным бонусом:
По умолчанию компонент обновляется всегда при получении новых значений props и/или state даже в тех случаях, когда они полностью совпадают с предыдущими. Это не всегда необходимо. У разработчика есть возможность самостоятельно реализовать метод shouldComponentUpdate(nextProps, nextState), который возвращает либо true, либо false. С помощью него вы сами можете явно указать Реакту, в каких случаях вы хотите, чтобы компонент перерисовался, а в каких — нет.
Если же компонент реализован как Pure Stateless Function Component, то Реакт сам в состоянии определить необходимость обновления внешнего вида компонента без явной реализации shouldComponentUpdate, то есть мы получаем больший профит, приложив меньше усилий.
Примечание: код ниже является учебным примером такого компонента. Так как в будущем мы внесем изменения в App.jsx, и он перестанет быть pure stateless компонентом, не следует переносить этот пример в наш проект.
Примечание 2: в нашем проекте я буду реализовывать все компоненты в виде ES6-классов, даже там, где возможно и правильно было бы реализовать их в виде Pure Stateless Functions Components, чтобы не усложнять содержание статьи.
Самое время посмотреть, что изменилось в браузере. И… да, у bootstrap нет стилей. Разработчики react-bootstrap сознательно не включили их в дистрибутив, так как все равно вы будете использовать собственную тему. Поэтому идем на любой сайт с темами для bootstrap, например bootswatch.com, и скачиваем понравившуюся. Сохраним ее в src/components/App/bootstrap.css. Я рекомендую сохранить именно полноценную версию, так как ее проще кастомизировать, а минификацию потом все равно сделает webpack.
Примечание: можно скачать мою тему с репозитория на github.
Внесем изменение в App.jsx
src/components/App/App.jsx
Я не хочу сейчас акцентировать внимание на настройке работы с glyphicons, тем более, что мы не будем использовать их в проекте, поэтому просто удалим их из стилей.
src/components/App/bootstrap.css
Возвращаемся в браузер, и теперь все должно выглядеть хорошо.
Примечание: если при перезагрузке страницы вас раздражает, что сначала появляется старая версия страницы, а новая лишь спустя пару секунд — просто перезапустите nodemon.
2. Добавляем несколько страниц и роутинг.
2.1. Сделаем две заглушки
src/components/CounterPage/index.js
src/components/CounterPage/CounterPage.jsx
src/components/TimePage/index.js
src/components/TimePage/TimePage.jsx
2.2. Добавим роутинг
Для роутинга мы будем использовать библиотеку react-router.
Чтобы она заработала, необходимо внести в наш проект следующие изменения:
2.2.1. Файл routes
src/routes.jsx
Обратите внимание, что мы по факту экспортируем компонент Реакта. IndexRoute является аналогом index.html или index.php в вебе: если часть пути опущена, то будет выбрана именно она.
Примечание: компоненты Route и IndexRoute могут быть вложены в другие Route сколько угодно раз. В нашем примере мы ограничимся двумя уровнями.
Таким образом мы определили следующее соответствие
URL ‘/’ => компонент вида
URL ‘/counter’ =>
URL ‘/time’ =>
В нашем приложении компонент App должен играть роль лейаута, поэтому необходимо «научить» его рендерить вложенные (children) компоненты.
src/components/App/App.jsx
2.2.2 Добавим роутинг в серверную часть приложения
src/server.js
Примечание: функция match принимает в качестве первого параметра JavaScript объект с ключами routes и location. Я использую shorthand notation ES6, полный вариант выглядел бы так
где routes мы импортируем из файла routes.jsx. В качестве второго параметра match принимает callback функцию, которая и отвечает за рендеринг.
Временно отключим клиентский JavaScript
src/client.js
Теперь протестируем роутинг в браузере — наша страница выглядит все также, хотя мы и избавились от явного вложения компонента HelloWorldPage в контейнер App. Двигаемся дальше.
Добавим ссылки на другие страницы. Обычно это делается так:
Однако, нам надо оформить в виде ссылок компоненты NavItem. Для этого воспользуемся библиотекой react-router-bootstrap.
src/components/App/App.jsx
Протестируем серверный роутинг.
Перезапустим nodemon. В браузере откроем Developer Tools, вкладку Network.
Теперь можно оценить результаты нашего труда и покликать на ссылки в меню навигации. Заметим, что запросы уходят на сервер, где обрабатываются express. Он, в свою очередь, рендерит и возвращает браузеру HTML-код запрошенной страницы. Сейчас наше приложение работает в точности как классическое веб-приложение.
В случае, если клиентский JavaScript не успеет загрузиться и инициализироваться, либо в нем окажется ошибка, наше приложение будет все еще успешно работать, в чем мы только что смогли убедиться.
2.2.3 Добавим роутинг в клиентскую часть приложения.
src/client.js
Примечание: обратите внимание, что теперь компонент Router стал корневым компонентом нашего приложения. Он отслеживает изменения URL и формирует контент страницы на основе настроенных нами routes.
Вернемся в браузер и еще раз покликаем по ссылкам, внимательно наблюдая за вкладкой Network инструмента Developer Tools. На этот раз страница не перезагружается, запросы к серверу не уходят, а клиентский JavaScript раз за разом рендерит запрошенную страницу. Все работает!
Промежуточный результат
Мы добавили несколько страниц и успешно настроили клиентский и серверный роутинг, убедившись, что они корректно работают для всех сценариев.
3. Flux и Redux
Сначала реализуем страницу со «счетчиками», чтобы разговор о Flux и Redux оказался максимально приближенным к практике.
Создадим два новых компонента: Counter.jsx и StateCounter.jsx.
Counter будет отображать переданное ему значение и кнопку «плюс», отвечающую за изменение этого значения.
StateCounter — компонент-родитель компонента Counter. Он будет хранить текущее значение Counter в собственном хранилище state и содержать бизнес-логику обновления этого значения при клике по кнопке «плюс».
Я сознательно выбрал такую реализацию, чтобы явно разделить интерфейс и бизнес-логику.
Этот прием очень часто используется на практике, так как подобный код проще:
В частности в нашем проекте сразу несколько компонентов будут использовать Counter.
src/components/CounterPage/Counter.jsx
src/components/CounterPage/Counter.css
src/components/CounterPage/StateCounter.jsx
src/components/CounterPage/CounterPage.jsx
Самое время протестировать обновленный код. В браузере перейдем на вкладку «Счетчики» и нажмем на кнопку «+». Значение изменилось с 0 на 1. Отлично! Теперь перейдем на любую другую вкладку, а потом вернемся обратно. Значение счетчика снова стало «0». Это в высшей степени ожидаемо, но не всегда соответствует тому, что мы хотели бы видеть.
Настало время обсудить концепцию «Flux».
Примечание: Flux — это именно концепция, а не библиотека. На сегодняшний день существует множество различных библиотек, которые ее реализуют.
3.1. Основные принципы Flux на пальцах
Компоненты не содержат бизнес-логику, а отвечают лишь за рендеринг интерфейса.
В приложении существует один объект, который хранит состояние всего приложения. Я буду называть его «глобальным состоянием», хотя не совсем уверен, что это наиболее удачный термин. Некоторые компоненты по желанию разработчика «подписываются» на интересующую их часть глобального состояния. С течением времени глобальное состояние может изменяться, а все подписанные на него компоненты получают обновления автоматически.
Важное примечание: глобальное состояние описывает лишь состояние вашего front-end приложения в отдельной вкладке и хранится исключительно в оперативной памяти браузера. Таким образом, оно будет утеряно, если пользователь нажмет F5, что абсолютно нормально, ожидаемо и by design. Я остановлюсь на этой теме более обстоятельно в третьей части.
Практический пример
Допустим, у нас есть сайт интернет-магазина: в центре страницы мы увидим список товаров, в панели навигации — иконку корзины с количеством товаров и общей их стоимостью, а где-то справа — блок с детализацией товаров, добавленных в корзину. Одним словом, достаточно распространенный сценарий.
Сценарий с точки зрения пользователя
Если бы мы писали этот сценарий на jQuery, то пришлось бы написать много кода для работы с DOM’ом. В процессе реализации все новых требований заказчика код становился бы все запутаннее, и, с большой долей вероятности, что-нибудь в итоге сломалось бы, а сложность и стоимость поддержки постоянно увеличивалась бы с течением времени и новых «хотелок».
Этот же сценарий с точки зрения Flux
Примечание: компоненты «Добавить в корзину», «Уведомления», «Корзина» и «Детализация Корзины» подписаны на глобальное состояние.
Пример кода такой функции
Упрощенно, хоть и не совсем корректно: в этом примере функция dispatch отвечает за обновление глобального состояния. Мы берем функцию, которая содержит бизнес-логику обновления глобального состояния, и передаем ее в качестве первого аргумента функции dispatch.
В результате общий процесс выглядит следующим образом и всегда работает однонаправленно.
В процессе выполнения эта функция изменяет один или несколько раз глобальное состояние.
От теории к практике!
3.2. Redux
Коротко: это одна из наиболее популярных реализаций концепции Flux.
Нам предстоит многое сделать:
Подбадривающее примечание: в процессе выполнения этих шагов вам могут прийти мысли вроде: «Зачем все это?» или «Ну почему все так сложно?». Ничего! Глаза боятся, а руки делают. Если вы дошли до этого места, то вспомните первую часть статьи. Она же огромная, я-то знаю, я же ее писал! Да, в первый раз может уйти много времени, чтобы проделать эти шаги, но в последующие разы это будет занимать совсем немного времени, обещаю!
3.2.1. Установим redux, react-redux и redux-thunk
3.2.2. Реализуем бизнес-логику счетчиков
3.2.2.1 Создаем папки src/redux, src/redux/actions и src/redux/reducers соответственно.
3.2.2.2 Создаем файл counterActions.js. В нем будут описаны функции, которые будут вызываться из наших компонентов.
src/redux/actions/counterActions.js
3.2.2.3 Создаем файл counterReducer.js. В нем мы опишем логику обновления глобального состояния.
src/redux/reducers/counterReducer.js
Что делает этот код?
Примечание: очень важно не забыть про третий шаг, так как в процессе инициализации redux все подобные функции (их еще называют «редьюсеры») будут вызваны с действием типа @@INIT, и мы должны корректно вернуть начальное значение.
3.2.3 Реализовываем инициализацию redux
Создаем файл configureStore.js
src/redux/configureStore
Что делает этот код?
3.2.4. Добавляем инициализацию redux в серверную часть приложения
src/server.js
Контекст — это props с глобальной областью видимости. То есть вы в своем компоненте явно указываете соответствующие props, которые будут доступны во всех его child компонентах и их child компонентах и так далее. Важно помнить, что это экспериментальная фича, а значит, есть большой шанс, что ее API в будущем изменится и, соответственно, явно использовать в своих приложениях ее не рекомендуется.
Другое дело, когда речь заходит о библиотеках, где контекст использовать приемлемо. Если API контекста поменяется, то вам будет достаточно обновить версии библиотек, которые его используют, не внося ни строчки изменений в собственный код.
В нашем примере мы используем компонент Provider из библиотеки react-redux и передаем ему хранилище глобального состояния store. Этот компонент хранит состояние в виде контекста, а так как это корневой элемент приложения, то доступ к глобальному состоянию в теории может быть обеспечен для абсолютно любого компонента нашего приложения, чем мы и будем с удовольствием пользоваться.
3.2.5. Добавляем инициализацию redux в клиентскую часть приложения
src/client.js
3.2.6. Реализуем компонент «Счетчик», который будет подписан на глобальное состояние
src/components/CounterPage/ReduxCounter.jsx
Функция connect соединяет наш компонент с глобальным состоянием. Она очень интересная и делает следующее:
Примечание: такие функции как connect называются High Order Components или сокращенно HOCs.
Концепция High Order Component работает следующим образом: у вас есть функция, которая принимает в качестве параметра один компонент, а возвращает другой, который, как правило, содержит в себе исходный с расширенным набором props.
connect как раз и является примером такой функции. Упрощенно она выглядит следующим образом
3.2.7. Добавляем новый счетчик на страницу с CounterPage
src/components/CounterPage/CounterPage.jsx
3.2.8. Тестируем
Мы проделали большую работу, и теперь наш проект напоминает полноценный сайт, поздравляю!