Comment inclure css et js bootstrap dans l’application reactjs?

Je suis newb à reactjs, je veux inclure le bootstrap dans mon application de réaction

J’ai installé le bootstrap par npm install bootstrap --save

Maintenant, vous voulez charger css et js bootstrap dans mon application de réaction.

J’utilise un webpack.

webpack.config.js

 var config = { entry: './src/index', output: { path: './', filename: 'index.js' }, devServer: { inline: true, port: 8080, historyApiFallback: true, contentBase:'./src' }, module: { loaders: [ { test: /\.js?$/, exclude: /node_modules/, loader: 'babel', query: { presets: ['es2015', 'react'] } } ] } }; module.exports = config; 

Mon problème est “comment inclure css et js bootstrap dans application reactjs à partir de node_modules?” Comment configurer pour que bootstrap inclue dans mon application de réaction?

Si vous êtes nouveau sur React et utilisez create-react-app cli setup. Ensuite, exécutez la commande NPM ci-dessous pour inclure la dernière version de bootstrap.

  npm install --save bootstrap 

ou

 npm install --save [email protected] 

Ajoutez ensuite l’instruction d’importation suivante au fichier index.js

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

ou

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

n’oubliez pas d’utiliser className comme atsortingbut ( react utilise className comme atsortingbut au lieu de la classe )

Vous ne pouvez pas utiliser les composants Javascript basés sur Bootstrap Jquery dans l’application React, car tout ce qui tente de manipuler DOM en dehors de React est considéré comme une mauvaise pratique. Ici vous pouvez lire plus d’informations à ce sujet .

Comment inclure Bootstrap dans votre application React:

1) Recommandé . Vous pouvez inclure des fichiers CSS bruts de Bootstrap comme le spécifient les autres réponses.

2) Jetez un coup d’œil à la bibliothèque react-bootstrap . Il est exclusivement écrit pour React.

3) Pour Bootstrap 4, il y a réactif

Prime

Ces jours-ci, j’évite généralement les bibliothèques Bootstrap qui fournissent des composants prêts à l’emploi (Reapp-Bootstrap ou ReaStrap, etc.). Comme vous devenez dépendant des accessoires qu’ils prennent (vous ne pouvez pas append de comportement personnalisé à l’intérieur) et que vous perdez le contrôle de DOM que ces composants produisent.

Donc, soit utiliser uniquement CSS Bootstrap ou quitter Bootstrap. Une règle générale est la suivante: si vous ne savez pas si vous en avez besoin, vous n’en avez pas besoin. J’ai vu beaucoup d’applications qui incluent Bootstrap, mais en utilisant la seule petite quantité de CSS et parfois la plus grande partie de ce CSS est remplacée par des styles personnalisés.

Vous pouvez simplement import le fichier css où vous voulez. Webpack veillera à regrouper le css si vous avez configuré le chargeur selon vos besoins.

Quelque chose comme,

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

Et le webpack config comme,

 loaders: [{ test: /\.css$/, loader: 'style-loader!css-loader' }] 

Remarque: Vous devez également append des chargeurs de fonts, sinon vous obtiendriez une erreur.

Via npm , vous feriez le suivi

 npm install bootstrap jquery --save npm install css-loader style-loader --save-dev 

Si bootstrap 4, ajoutez également popper.js

 npm install popper.js --save 

Ajoutez ce qui suit (en tant que nouvel object) à vos chargeurs de configuration Webpack loaders: [ array

 { test: /\.css$/, loader: 'style-loader!css-loader' } 

Ajoutez les éléments suivants à votre index ou à votre disposition

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

Veuillez suivre le lien ci-dessous pour utiliser le bootstrap avec React. https://react-bootstrap.github.io/

Pour l’installation:

 $ npm install --save react react-dom $ npm install --save react-bootstrap 

————————————OU————- ————————

Mettez Bootstrap CDN pour CSS dans la balise du fichier index.html dans la réaction et Bootstrap CDN pour Js dans la balise du fichier index.html. Utilisez className au lieu de class suivi ci-dessous index.html

            
 npm install --save bootstrap 

et ajoutez cette instruction d’importation dans votre fichier index.js

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

ou Vous pouvez simplement append CDN dans votre fichier index.html.

vous pouvez l’installer directement via

 $ npm install --save react react-dom $ npm install --save react-bootstrap 

importez ensuite ce dont vous avez vraiment besoin dans le bootstrap comme:

 import Button from 'react-bootstrap/lib/Button'; 

// ou

 import Button from 'react-bootstrap'; 

et aussi vous pouvez installer:

 npm install --save reactstrap@next react react-dom 

Cochez ceci, cliquez ici .

et pour le CSS, vous pouvez lire ce lien aussi carfuly

lire ici

J’espère que c’est utile;)

Étape 1: utiliser NPM pour installer cette commande ci-dessous

 npm install --save reactstrap@next react react-dom 

Étape 2: exemple du script principal index.js importation de la commande ci-dessous

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

Étape 3: Les composants de l’interface utilisateur se rapportent au site Web reactstrap.github.io