Comment inclure les css et js de bootstrap dans une application reactjs ?

Question

Je suis novice en matière de reactjs, je veux inclure bootstrap dans mon application react.

J'ai installé bootstrap par npm install bootstrap --save

Maintenant, je veux charger les css et js de bootstrap dans mon application react.

J'utilise 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 les css et js de bootstrap dans une application reactjs à partir de node_modules ?" Comment configurer bootstrap pour l'inclure dans mon application react ?

Answer 1

Si vous êtes novice en matière de React et que vous utilisez create-react-app cli setup, exécutez le npm ci-dessous pour inclure la dernière version de bootstrap.

npm install --save bootstrap

ou

npm install --save bootstrap@latest

Ensuite, ajoutez l'instruction d'importation suivante à index.js fichier. ( https://getbootstrap.com/docs/4.4/getting-started/webpack/#importing-compiled-css )

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

ou

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

n'oubliez pas d'utiliser className comme attribut sur les éléments cibles (react utilise className comme attribut au lieu de class ).

Answer 2

Via npm vous devez exécuter le programme suivant

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

Si bootstrap 4, ajouter aussi la dépendance popper.js

npm install popper.js --save

Ajoutez l'élément suivant (en tant que nouvel objet) à votre fichier configuration de webpack

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

Ajoutez les éléments suivants à votre indice ou mise en page

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

Answer 3

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

Comment inclure Bootstrap dans votre application React :

1) Recommandé . Vous pouvez inclure les fichiers CSS bruts de Bootstrap comme le précisent les autres réponses.

2) Jetez un coup d'œil à react-bootstrap bibliothèque. Elle est exclusivement écrite pour React.

3) Pour Bootstrap 4, il y a reactstrap

Bonus

Ces jours-ci, j'évite généralement les bibliothèques Bootstrap qui fournissent des composants prêts à l'emploi (react-bootstrap ou reactstrap susmentionnés, etc.). Comme vous devenez dépendant des props qu'ils prennent (vous ne pouvez pas ajouter un comportement personnalisé à l'intérieur) et vous perdez le contrôle du DOM que ces composants produisent.

Donc, soit vous utilisez uniquement le CSS Bootstrap, soit vous laissez Bootstrap de côté. Une règle générale est la suivante : si vous n'êtes pas sûr d'en avoir besoin, vous n'en avez pas besoin. J'ai vu beaucoup d'applications qui incluent Bootstrap, mais qui n'utilisent qu'une petite quantité de CSS et parfois la plupart de ces CSS sont remplacés par des styles personnalisés.

Answer 4

Vous pouvez juste import le fichier css où vous voulez. Webpack se chargera de regrouper le css si vous avez configuré le chargeur comme il se doit.

Quelque chose comme,

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

Et la configuration de webpack comme,

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

Note : Vous devez également ajouter les chargeurs de polices, sinon vous obtiendrez une erreur.

Answer 5

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

Pour l'installation :

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

------------------------------------OR-------------------------------------

Mettez le CDN Bootstrap pour CSS dans la balise du fichier index.html dans react et le CDN Bootstrap pour Js dans la balise du fichier index.html. Utilisez className au lieu de class suivez le fichier index.html ci-dessous

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="../src/images/dropbox_logo.svg">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  </head>
  <body>

    <div id="root"></div>

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

  </body>
</html>