В приложении create-react-app добавление Bootstrap 4?

Так как create-react-app скрывает конфигурацию Webpack без использования eject, если я хочу использовать что-то вроде реактивной или реактивной бутстрапа, следует ли изгнать или я буду в порядке, не выбрасывая?

Просто любопытно, в какой момент можно решить, когда им нужно eject, чтобы использовать то, что им нужно? На данный момент в моем приложении я просто прототипирую, но он будет идти дальше с большим количеством зависимостей и еще чего-то.

Ответы

Ответ 1

При использовании приложения create-react-app вам не нужно извлекать или редактировать конфигурацию webpack для использования реакции-бутстрапа.

Установить реакцию-бутстрап

npm install --save react-bootstrap [email protected]

Вам нужно импортировать css отдельно, добавив это в начало src/index.js

import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/css/bootstrap-theme.css';

Ознакомьтесь с документацией для использования action-bootstrap.

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

Если вы действительно обеспокоены возможностью изменения конфигурации webpack, я бы попросил вас проверить roadhog. Это настраиваемая альтернатива create-react-app

Ответ 2

Теперь проще с последней версией начальной загрузки: https://getbootstrap.com/docs/4.1/getting-started/webpack/

Установить загрузчик и зависимости:

npm install bootstrap jquery popper.js --save

Затем в вашей точке входа приложения (index.js) импортируйте index.js загрузку и css:

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

Хорошо пойти!

РЕДАКТИРОВАТЬ

Теперь есть раздел в документации создания-реакции-приложения: https://facebook.github.io/create-react-app/docs/adding-bootstrap#docsNav

Они упоминают реакцию-бутстрап и реактив-ремень, если вы предпочитаете использовать это, и вам не нужно будет выбрасывать.

Ответ 3

Во-первых, установите последнюю версию начальной загрузки в ваше приложение.

//To install bootstrap 4(latest version), jQuery, popper.js
npm i bootstrap jquery popper.js --save

Примечание: jQuery и popper.js являются зависимостями бутстрапа.

В index.js в корневом каталоге и добавьте строку ниже

//Include bootstrap css 
import './../node_modules/bootstrap/dist/css/bootstrap.min.css';
//Include bootstrap js
import './../node_modules/bootstrap/dist/js/bootstrap.min.js';

В webpack.config.dev.js(найдите плагины и добавьте нижеприведенный код)

new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery",
    Popper: ['popper.js', 'default'] 
})

Итак, это будет выглядеть так.

plugins: [
  ....
  new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery",
    Popper: ['popper.js', 'default'] 
  })
]

Ответ 4

Существует проект под названием "actstrap " https://reactstrap.github.io/, в котором есть все шаги, необходимые для интеграции Bootstrap с React.

npm install bootstrap --save
npm install --save reactstrap react react-dom

Импортируйте загрузочный CSS в файл src/index.js:

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

Импортируйте необходимые компонентыactstrap в файл src/App.js или файлы пользовательских компонентов:

import { Button } from 'reactstrap';