web-dev-qa-db-fra.com

Comment inclure les fichiers bootstrap css et js dans l'application reajs?

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

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

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

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 fichiers d'amorçage css et js dans l'application reajs de node_modules?" Comment configurer pour bootstrap à inclure dans mon application de réaction?

twitter-bootstrapreactjswebpack
78
Mehul Mali

Si vous débutez avec 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 la déclaration d'importation suivante à index.js file

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

ou 

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

n'oubliez pas d'utiliser className as attribut (réagit en utilisant className as attribut au lieu de class )

137
Praveen M P

Vous ne pouvez pas utiliser de composants Javascript basés sur Bootstrap JQuery dans l'application React, car toute tentative de manipulation du DOM en dehors de React est considérée comme une mauvaise pratique. Ici vous pouvez lire plus d'infos à 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 à react-bootstrap library. Il est exclusivement écrit pour React.

3) Pour Bootstrap 4, il y a reactstrap

Prime

De nos jours, j'évite généralement les bibliothèques Bootstrap qui fournissent des composants prêts à être utilisés (réagis-bootstrap ou réactstrap mentionnés ci-dessus, etc.). Au fur et à mesure que vous devenez dépendant des accessoires qu'ils prennent (vous ne pouvez pas ajouter de comportement personnalisé à l'intérieur d'eux) et vous perdez le contrôle sur les DOM produits par ces composants. 

Donc, utilisez uniquement Bootstrap CSS ou quittez Bootstrap. La 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 l'utilisation de la petite quantité de CSS et parfois de la plus grande partie de cette CSS est remplacée par des styles personnalisés.

26
Shota

Via npm , vous courriez le suivant

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 objet) à votre tableau webpack config loaders: [

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

Ajoutez ce qui suit à votre index ou layout 

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

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

Quelque chose comme,

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

Et la configuration webpack comme,

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

Remarque: vous devez également ajouter des chargeurs de polices, sinon vous obtiendrez une erreur.

13
Thaadikkaaran

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

------------------------------------OU------------- ------------------------

Mettez Bootstrap CDN for CSS dans la balise du fichier index.html dans react et Bootstrap CDN for Js dans la balise du fichier index.html. Utilisez className à la place de la classe Suit under index.html

<!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>
5
Aditya Parmar
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 ajouter CDN dans votre fichier index.html.

3
Nikhil

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

Étape 1: à l'aide de NPM, installez cette commande ci-dessous

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

Étape 2: exemple de commande index ci-dessous pour le script principal index.js

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

Étape 3: Les composants de l'interface utilisateur se réfèrent au site Web ci-dessousreactstrap.github.io

2
Vidhyapathi Kandhasamy

vous pouvez l'installer directement via 

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

puis importez ce que vous avez vraiment besoin du 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

vérifier ceci cliquez ici .

et pour le CSS, vous pouvez également lire ce lien carfuly 

lire ici

1
Majed HORIA

Si vous utilisez CRA (create-react-app) dans votre projet, vous pouvez ajouter ceci:

npm install react-bootstrap bootstrap

Si vous utilisez bootstrap dans votre application et si cela ne fonctionne pas, utilisez ceci dans index.html:

<link
  rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
  integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
  crossorigin="anonymous"
/>

J'ai fait ce qui précède pour résoudre un problème similaire. Espérons que cela vous soit utile :-)

0
Mohamad Ali

Juste au cas où si vous pouvez utiliser yarn qui est recommandé pour les applications React,

tu peux faire,

yarn add [email protected] // this is to add bootstrap with a specific  version

Cela ajoutera également le bootstrap en tant que dépendance à votre package.json.

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "bootstrap": "4.1.1", // it will add an entry here
    "react": "^16.5.2",
    "react-dom": "^16.5.2",
    "react-scripts": "1.1.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

Après cela, importez simplement bootstrap dans votre fichier index.js.

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

Je veux juste ajouter que l'installation et l'importation de bootstrap dans votre fichier index.js ne seront pas suffisantes pour utiliser les composants bootstrap. Chaque fois que vous souhaitez utiliser un composant, vous devez l'importer, par exemple: Je dois utiliser un conteneur et une ligne.

    <Container>
        <Row>
        <Col sm={4}> Test </Col>
        <Col sm={8}> Test </Col>
        </Row>
</Container>

Vous devriez importer dans votre fichier js

import {Container, Row, Col} from 'react-bootstrap';
0
ElKaygi

Après avoir installé bootstrap dans votre projet "npm install --save [email protected]" .__, vous devez accéder au fichier index.js du dossier SRC du projet et importer le fichier bootstrap à partir du module de module de noeud. 

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

Si vous aimez, vous pouvez obtenir de l'aide avec cette vidéo, cela vous aidera beaucoup.

Importer Bootstrap In React Project

0
Yousuf Shaikh

Puisque Bootstrap/Reactstrap a publié sa dernière version, à savoir Bootstrap 4, vous pouvez l'utiliser en procédant comme suit

  1. Accédez à votre projet 
  2. Ouvrir le terminal

  3. Je suppose que npm est déjà installé, puis tapez la commande suivante

    npm install --save reactstrap react react-dom

Cela installera Reactstrap en tant que dépendance dans votre projet.

Voici le code pour un bouton créé avec Reactstrap

import React from 'react';
import { Button } from 'reactstrap';

export default (props) => {
  return (
    <Button color="danger">Danger!</Button>
  );
};

Vous pouvez vérifier le Reactstrap en visitant leur page officielle

0
Hadi Mir

D'une manière ou d'une autre, la réponse acceptée ne parle que d'inclure le fichier css depuis le bootstrap.

Mais je pense que cette question est liée à celle-ci - Bootstrap Dropdown ne fonctionne pas dans React

Il y a quelques réponses qui peuvent aider - 

  1. _ { https://stackoverflow.com/a/52251319/4266842 } _
  2. _ { https://stackoverflow.com/a/54188034/4266842 } _
0
Vikram Gulia

Réponse complète pour vous donner jquery et bootstrap puisque jquery est une condition requise pour bootstrap.js:

Installez jquery et bootstrap dans node_modules:

npm install bootstrap
npm install jquery

Importez dans vos composants en utilisant ce chemin de fichier exact:

import 'jquery/src/jquery'; //for bootstrap.min.js
//bootstrap-theme file for bootstrap 3 only
import 'bootstrap/dist/css/bootstrap-theme.min.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';
0
HoosierCoder

J'essaie avec instruction:

npm install bootstrap
npm install jquery popper.js

puis dans src/index.js:

import 'bootstrap/dist/css/bootstrap.min.css';
import $ from 'jquery';
import Popper from 'popper.js';
import 'bootstrap/dist/js/bootstrap.bundle.min';
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<Dropdown />, document.getElementById('root'));
registerServiceWorker();
0
Morteza Fathnia