Не работает реакт бутстрап

Как включить bootstrap css и js в приложение reactjs?

Я новичок в reactjs, я хочу включить bootstrap в мое приложение react

Я установил bootstrap by npm install bootstrap —save

теперь, хотите загрузить bootstrap css и js в моем приложении react.

Я использую webpack.

webpack.конфиг.js

моя проблема: «как включить bootstrap css и js в приложение reactjs из node_modules?»Как настроить bootstrap для включения в мое приложение react?

9 ответов

если вы новичок в реагировании и использовании create-react-app cli настройка. Затем выполните приведенную ниже команду NPM, чтобы включить последнюю версию bootstrap.

затем добавьте следующую инструкцию import в .js

не забудьте использовать 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 как хорошо.

после этого просто импортируйте bootstrap в своем .

Источник

Bootstrap Dropdown not working in React

I’m trying to get a dropdown working inside a form for one of my React components. Here is how I’m setting up the dropdown portion of the code, the following is inside a form parent tag which is inside the div tag that I’m returning.:

However, when I click the Dropdown button, it does not display the dropdown menu and the items in it.

All my other bootstrap components are working fine. What am I doing wrong?

I referenced bootstrap in my index.js:

Am I missing something?

6 Answers 6

To make dropdown menu and other js stuff work in 4th Bootstrap you need just follow next steps: install with npm to dependencies:

add it to index.js

all steps are taken from here

It’s because you’ve added HTML and CSS but not the js for it. Your code doesn’t know what to do when you click on the dropdown. Here is an example how you have to do that. And the code below:

after a long searching and tweaking I got the answer here

you just have to add a css to resolve this issue. when you click on dropdown button, it adds a class «show» to that element and as per bootstrap that much is sufficient to make a dropdown button work.

for me it work like charm.

I tries @teimurjan solution and it worked for me but with two issues

1. I have to manage a state even though its not needed
2. once dropdown clicked the expanded menu does not disappear on click of body or anywhere else.

Источник

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

Все мы знаем популярность React и то, как эта библиотека упростила задачи разработки для фронтенд-разработчиков. React — самая популярная интерфейсная библиотека для создания пользовательского интерфейса приложения. Отрасли постепенно сокращают использование библиотек jQuery и DOM для создания своих приложений.

Когда дело доходит до создания адаптивного приложения, на рынке полезны фреймворки CSS. Если вы работаете фронтенд-разработчиком, то фреймворки Bootstrap, Foundation и Bulma для вас не новы. Большинство отраслей используют фреймворк Bootstrap. Миллионы веб-сайтов работают в режиме начальной загрузки.

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

Метод добавления Bootstrap в React

В основном есть три способа добавить Bootstrap в приложение React. Обсудим их по очереди.

1. Использование Bootstrap CDN.
2. Импортировать Bootstrap в React как зависимость
3. Установите пакет React Bootstrap (например, bootstrap-react или reactstrap).

1. Использование Bootstrap CDN

Это один из самых простых способов использовать бутстрап в вашем приложении React. Лучшее в загрузочном CDN — это отсутствие необходимости в установке или загрузке. Вам просто нужно скопировать и вставить ссылку в заголовок вашего приложения, чтобы оно заработало. Ниже находится ссылка, которая вам нужна.

Если вашему приложению нужны компоненты JavaScript вместе с начальной загрузкой, то в нижней части страницы разместите тег

Источник

Интеграция Bootstrap с React: руководство для разработчиков

Интеграция Bootstrap с React позволяет разработчикам React использовать современную сеточную систему Bootstrap и ее различные другие компоненты.

В этом уроке мы собираемся:

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

React — одна из самых популярных технологий JavaScript для интерактивных веб-приложений. Его популярность проистекает из модульного подхода на основе компонентов, компоновки и быстрого алгоритма рендеринга.

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

Почему нельзя просто включить компоненты Bootstrap в React

Объединить Bootstrap с React не так просто, как добавить
в файл index.html . Это потому, что Bootstrap зависит от jQuery для питания определенных компонентов пользовательского интерфейса. В jQuery используется метод прямого манипулирования DOM, который противоречит декларативному подходу React.

Если нам нужен Bootstrap только для адаптивной сетки из 12 столбцов или компонентов, которые не используют jQuery, мы можем просто прибегнуть к ванильной таблице стилей Bootstrap. Иначе, есть много библиотек, которые заботятся о преодолении разрыва между React и Bootstrap. Мы сравним оба метода, чтобы лучше подходить к конкретному случаю.

Настройка таблицы стилей Bootstrap с помощью React

Давайте используем CLI Create React App для создания проекта React, который требует нулевой конфигурации для начала работы.

Мы устанавливаем приложение Create React и запускаем следующую команду, чтобы начать новый проект и обслуживать сборку разработки:

Вот структура каталогов, созданная приложением Create React:

Далее, давайте загрузим последнюю версию библиотеки Bootstrap с официального сайта Bootstrap . Пакет включает в себя как скомпилированные, так и минимизированные версии CSS и JavaScript. Мы просто скопируем CSS и поместим его в каталог public/ . Для проектов, которым нужна только сетка, есть также таблица стилей, специфичная для сетки.

Затем мы создаем новый каталог для css внутри public/ , вставляем bootstrap.min.css в наш недавно созданный каталог css и связываем его с public/index.html :

В качестве альтернативы, мы можем использовать CDN для извлечения минимизированного CSS:

Давайте посмотрим, что работает, а что нет с этой настройкой.

Использование Vanilla Bootstrap с React

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

Как мы видим, форма выглядит хорошо, а NavBar — нет. Это потому, что NavBar зависит от плагина jQuery Collapse , который мы не импортировали. Помимо невозможности переключения навигационных ссылок, мы не можем использовать некоторые функции, такие как выпадающие меню, закрываемые оповещения и модальные окна.

Разве не было бы замечательно, если бы мы могли импортировать 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.

Есть несколько других библиотек, таких как React-UI , и специфичные для домена модули, такие как React-bootstrap-table и CoreUI-React Admin Panel на GitHub, которые предоставляют расширенную поддержку для создания потрясающих интерфейсов с использованием React.

Источник

Начать с React и Bootstrap за 2 дня. День №1

Сразу скажу, что сайт будет быстрее работать, если заменить Bootstrap на чистый CSS и JS. Эта статья про то, как быстро начать разрабатывать красивые web-приложения, а оптимизация это уже отдельный вопрос, выходящий за пределы этой статьи.

Для начала надо хотя бы немного разбираться в HTML, CSS, JavaScript, XML, DOM, ООП и уметь работать в терминале (командной строке).

В этой статье сделаю выжимку минимально необходимого для работы и сделаем такой таймер:

Установка

Для начала нам нужен менеджер пакетов. Я выбрал npm, а он есть в Node.js
Так что первым делом устанавливаете Node.js на свою операционную систему с официального сайта: nodejs.org/en/download. С установкой вы сможете разобраться, так что процесс установки описывать не буду. Отмечу лишь, что под Ubuntu устанавливается просто:

Через терминал проверяем, что Node.js и npm успешно установились:

Если при выводе возникнут ошибки – значит что-то прошло не так и надо разбираться, и возможно переустанавливать их. Если же выведется v c цифрами и точками – то всё хорошо.

Установим Create-react-app, чтобы потом можно было быстро создавать каркасы приложений:

Далее создаём каркас приложения на React. Назовём наше приложение new-app. Если хотите создать приложение папке отличной от пользовательской папки – то сначала через терминал перейдите в неё с помощью команды cd. Итак, в терминале достаточно ввести 3 команды:

Создаём приложение new-app. Переходим в папку new-app. Запускаем приложение. После этих строк должен запуститься браузер с приложением React по адресу http://localhost:3000

Терминал должен остаться открытым, без него не будет открываться страница приложения. Если вдруг закрыли – не беда. Достаточно с помощью команды cd перейти в папку приложения и запустить его командой npm start

Теперь установим Bootstrap

Так же советуют установить к нему зависимости jquery и popper.js, но они нужны только для JS-части Bootstrap. Попробовал без них — CSS-часть Bootstrap нормально работает, так что следующие строки в терминале не обязательны:

Далее надо внести изменения в файлы приложения, для этого переходим в папку new-app, где находится приложение в файл src/index.js добавляем строку, она должна быть первой:

Если будете использовать jQuery, popper.js или JS-часть Bootstrap (модальные окна, анимации и т.д), то потребуется под первой строкой добавить ещё 3 строки:

Теперь осталось запустить проект:

И снова откроется браузер по адресу http://localhost:3000 уже с приложением, облагороженным с помощью Bootstrap:

Так же для отладки React можно установить расширение «React Developer Tools» для браузера. Актуальные ссылки на расширение для Chrome и Firefox и другие варианты использования указаны в официальном репозитории github.com/facebook/react-devtools
Установка и первоначальная настройка на этом завершена.

JSX, компоненты и свойства

Давайте посмотрим, что нам сгенерировал create-react-app — исходные файлы лежат в каталоге src. Во-первых, посмотрим файл index.js – там несколько строчек импорта. По строчкам понятно, что они делают, так что не буду комментировать.

Самая важная строка в этом файле:

В ней рисуется страница приложения. В исходном HTML-файле находится элемент

выводится компонент App, который рисуется функцией render класса ReactDOM. При этом компонент рисуется в форме, похожей на XML, которая и называется JSX (о котором позже).

Теперь перейдём в файл App.js, где находится реализация класса App, который наследуется от класса React.Component.

JSX очень похож на HTML, при этом есть вставки JS-кода в фигурных скобках <>. И обязательно должен быть один корневой элемент, в данном случае

Чтобы лучше разобраться – сотрём весь код метода render(), и напишем простейший компонент:

А теперь вернёмся в файл index.js и исправим

После сохранения файлов – в браузере обновится страница. А теперь будем разбираться.

Концептуально, компоненты подобны JavaScript-функциям. Они принимают произвольные данные (называемые props) и возвращают React-элементы, описывающие что должно появиться на экране. Компоненты позволяют разделить UI на независимые, переиспользуемые части и работать с каждой из них отдельно.

Когда React видит, что элемент представляет собой пользовательский компонент, он передает все JSX-атрибуты в этот компонент единым объектом. Такой объект называется props.

В примере параметр name передаётся в компонент как атрибут тега со значением «Мир». Далее в методе render() класса App в качестве результата функции внутри JSX, который фактически является HTML-шаблоном – в фигурных скобках <> указывается this – текущий класс, props – пользовательский объект, name – название параметра объекта.

Конструктор, жизненный цикл и изменение состояния

Помимо параметров, хранящихся в props можно хранить состояние объекта в state.

Сделаем таймер. Для таймера не нужны параметры, поэтому уберём параметры в index.js:

А теперь в файле App.js заменим весь текст между import и export:

После вставки и сохранения этого кода на странице появится и автоматически запустится таймер.

Давайте разбирать этот код. До класса объявили константу, благодаря которой можно регулировать частоту обновления таймера.

Далее внутри класса идёт обязательный конструктор класса, в который передаётся props. Далее стандартная обработка конструктора родительского класса super(props) и определение состояния value через this – текущий объект. Это единственное место, где можно напрямую установить состояние. В остальных местах доступно только чтение, либо установка состояния специальным методом setState(), который используется в следующем методе increment() для увеличения состояния value на единицу.

В приложениях с множеством компонентов очень важно высвобождать ресурсы, занятые компонентами, когда они уничтожаются. Нам необходимо устанавливать таймер каждый раз, когда DOM отрисовывается в первый раз. В React это называется «монтированием/монтажом». Также нам нужно очищать этот таймер, каждый раз когда DOM, созданный компонентом, удаляется. В React это называется «демонтированием/демонтажём».

Для этого и используются методы componentDidMount() и componentWillUnmount(). В документации эти методы носят название «lifecycle hooks». Мы же будем для простоты называть их методами жизненного цикла. Метод componentDidMount() срабатывает после того, как компонент был отрисован в DOM. Это хорошее место, чтобы установить таймер. Очищать таймер будем в методе componentWillUnmount() жизненного цикла.

Обратите внимание, как мы в componentDidMount() сохраняем ID таймера прямо в this используя стрелочную функцию. В то время как this.props самостоятельно устанавливаются React-ом и this.state имеет определенное значение, вы свободно можете добавить дополнительные поля в класс вручную, если вам необходимо хранить что-нибудь, что не используется для визуального вывода. Если вы не используете что-то в render(), оно не должно находиться в состоянии state.

Далее на время выполнения render() в локальной константе value фиксируется значение состояния value. И далее с помощью математической функции floor(), которая округляет число в меньшую сторону, деления(/) и получение остатка от деления(%) получаем части таймера, которые далее выводим в одну строку после слова Таймер. Можно посмотреть результаты нашей работы.

Оформление с помощью Bootstrap

Не удобно, что таймер работает сразу при обновлении страницы. Хотелось бы, чтобы он запускался и останавливался при нажатии на соответствующие кнопки. А ещё хотелось бы, чтобы он был в центре и крупный.

Начнём с оформления. Для этого в файл App.css добавим следующие строки:

Благодаря встроенному в Bootstrap адаптивно-резиновому контейнеру container-fluid, который помогает создать полностью гибкий макет страницы или некоторого блока. Данный контейнер имеет 100% ширину. Сделаем контейнер flex, с направлением выстраивания элементов по вертикали – чтобы он занял всё пространство и его можно было выровнять по центру.

Теперь доработаем метод render() в App.js, чтобы применить стили Bootstrap и добавить пару кнопок. Для этого заменим возвращаемое методом значение на следующее:

В первой строке к корневому

добавили 2 класса Bootstrap: container-fluid(о котором писал выше) и align-items-center – который как раз и выравнивает элементы контейнера по центру.

с классом display-1 – этот класс как раз для показа крупного текста.

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

В последней цифре, показывающей части секунды добавлено условное выражение, позволяющее для однозначных цифр (

Источник