web-dev-qa-db-fra.com

Dans create-react-app, ajouter Bootstrap 4?

Étant donné que create-react-app masque la configuration Webpack sans avoir à utiliser eject, si je veux utiliser quelque chose comme reactstrap ou react-bootstrap, dois-je éjecter ou serai-je bien sans éjecter?

Juste curieux de savoir à quel point on déciderait quand ils ont besoin de eject pour utiliser ce dont ils ont besoin? À ce stade de mon application, je ne fais que du prototypage, mais cela ira plus loin avec plus de dépendances et ainsi de suite.

twitter-bootstrapreactjswebpackcreate-react-appreactstrap
17
Mark

Lorsque vous utilisez create-react-app, vous n'avez pas besoin d'éjecter ou de modifier la configuration du webpack pour utiliser react-bootstrap.

Installez react-bootstrap

npm install --save react-bootstrap bootstrap@3

Vous devez importer css séparément en l'ajoutant en haut de votre src/index.js

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

Consultez la documentation pour l'utilisation de react-bootstrap .

La plupart des dépendances peuvent être ajoutées sans changer la configuration du webpack. Vous pouvez ajouter des packages et commencer à les utiliser.

Si vous êtes vraiment préoccupé par la possibilité de changer la configuration du webpack, je vous exhorte à vérifier roadhog . C'est une alternative configurable de create-react-app

23
sudo bangbang

C'est plus facile maintenant avec la dernière version de bootstrap: https://getbootstrap.com/docs/4.1/getting-started/webpack/

Installez bootstrap et dépendances:

npm install bootstrap jquery popper.js --save

Ensuite, dans le point d'entrée de votre application (index.js) import bootstrap et le css:

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

C'est bon!

[~ # ~] modifier [~ # ~]

Il y a maintenant une section dans la documentation de create-react-app: https://facebook.github.io/create-react-app/docs/adding-bootstrap#docsNav

Ils mentionnent react-bootstrap et reactstrap si vous préférez utiliser cela, et vous n'aurez pas besoin d'éjecter.

15
mofojed

Tout d'abord, installez la dernière version de bootstrap dans votre application.

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

Remarque: jQuery et popper.js sont les dépendances de bootstrap.

Dans index.js dans votre répertoire racine et ajoutez la ligne ci-dessous

//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';

Dans webpack.config.dev.js (recherchez les plugins et ajoutez le code ci-dessous)

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

Donc, cela ressemblerait à ceci.

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

Il y a un projet appelé 'reactstrap' https://reactstrap.github.io/ qui a toutes les étapes dont vous avez besoin pour intégrer Bootstrap avec React

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

Importez Bootstrap CSS dans le fichier src/index.js:

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

Importez les composants Reactstrap requis dans le fichier src/App.js ou vos fichiers de composants personnalisés:

import { Button } from 'reactstrap';
3
sendon1982