Вопрос:

В создаваемое приложение добавляем Bootstrap 4?

twitter-bootstrap reactjs webpack create-react-app reactstrap

12503 просмотра

4 ответа

807 Репутация автора

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

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

Автор: Mark Источник Размещён: 03.01.2018 12:02

Ответы (4)


21 плюса

11126 Репутация автора

Решение

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

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

npm install --save react-bootstrap bootstrap@3

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

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

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

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

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

Автор: sudo bangbang Размещён: 03.01.2018 11:20

3 плюса

381 Репутация автора

Прежде всего, установите последнюю версию bootstrap в вашем приложении.

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

Примечание: jQuery и popper.js являются зависимостями начальной загрузки.

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

//Include bootstrap's css 
import './../node_modules/bootstrap/dist/css/bootstrap.min.css';
//Include bootstrap's 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'] 
  })
]
Автор: Johnsackson Размещён: 15.02.2018 01:16

15 плюса

908 Репутация автора

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

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

npm install bootstrap jquery popper.js --save

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

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

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

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

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

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

Автор: mofojed Размещён: 24.05.2018 02:59

3 плюса

4056 Репутация автора

Существует проект под названием «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';
Автор: sendon1982 Размещён: 11.06.2018 10:59
Вопросы из категории :
32x32