Je suis nouveau sur reactjs, je souhaite inclure bootstrap dans mon application react

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

Maintenant, je veux charger bootstrap css et js 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 bootstrap css et js dans l'application reactjs à partir de node_modules?" Comment configurer le bootstrap à inclure dans mon application React?

Si vous êtes nouveau sur React et que vous utilisez le programme d' create-react-appinstallation de cli, exécutez la commande npm ci-dessous pour inclure la dernière version de bootstrap.

npm install --save bootstrap

ou

npm install --save bootstrap@latest

Ajoutez ensuite l'instruction d'importation suivante au index.jsfichier. ( 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 classNamecomme attribut sur les éléments cibles (react utilise classNamecomme attribut au lieu de class).

Via npm , vous exécuteriez 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

Ajouter ce qui suit (comme un nouvel objet) à votre config webpack loaders: [ tableau

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

Ajoutez ce qui suit à votre index ou mise en page

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

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 œil à la bibliothèque react-bootstrap . Il est exclusivement écrit pour React.

3) Pour Bootstrap 4, il y a reactstrap

Prime

Ces jours-ci, j'évite généralement les bibliothèques Bootstrap qui fournissent des composants prêts à l'emploi (react-bootstrap ou reactstrap 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 que vous perdez le contrôle du DOM produit par ces composants.

Donc, utilisez uniquement Bootstrap CSS ou laissez Bootstrap. 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 l'utilisation de la seule petite quantité de CSS et parfois la plupart de ces CSS sont remplacées par des styles personnalisés.

Vous pouvez simplement importle fichier css où vous le souhaitez. Webpack prendra soin de regrouper le css si vous avez configuré le chargeur comme requis.

Quelque chose comme,

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

Et la configuration du webpack comme,

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

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

J'ai moi aussi eu un scénario similaire. Ma configuration était comme indiqué ci-dessous

npm install create-react-app

Cela vous fournira une configuration du code de la plaque chauffante pour commencer. Jouez avec le fichier App.js pour la logique principale.

Plus tard, vous pouvez utiliser le CDN bootstrap dans index.html créé par l'outil CLI. ou

npm install bootstrap popper jquery

puis incluez simplement ceci dans le fichier App.js.

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

Peu d'auteurs ont mentionné l'utilisation de l'attribut className au lieu de class, mais dans mon cas, les deux fonctionnaient comme ci-dessous. Mais si vous utilisez la classe et regardez la console dans les outils de développement sur le navigateur, vous verrez une erreur d'utilisation de la classe. Utilisez donc className à la place.

    <div className="App" class = "container"> //dont use class attribute

Et n'oubliez pas de supprimer les importations CSS par défaut pour éviter les conflits avec le bootstrap.

J'espère que cela aide, bon codage !!!

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 react et Bootstrap CDN for Js dans la balise du fichier index.html. Utilisez className au lieu de class follow ci-dessous 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>

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

Installez jquery et bootstrap dans node_modules:

npm install bootstrap
npm install jquery

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

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.

J'espère que cela vous sera 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 principale d'importation du script 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-dessous reactstrap.github.io

vous pouvez l'installer directement via

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

puis importez ce dont vous avez vraiment besoin depuis le bootstrap comme:

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

// ou

import  Button  from 'react-bootstrap';

et vous pouvez également installer:

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

Vérifiez ceci cliquez ici .

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

lire ici

Après avoir installé bootstrap dans votre projet "npm install --save [email protected]", vous devez vous déplacer vers le fichier index.js dans le dossier SRC du projet et importer le bootstrap à partir du package du module de nœud.

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

Si vous le souhaitez, vous pouvez obtenir de l'aide grâce à cette vidéo, bien sûr qu'elle vous aidera beaucoup.

Importer Bootstrap dans React Project

J'essaye 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();

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

tu peux faire,

yarn add bootstrap@4.1.1 // 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 bootstrapdans votre index.jsfichier.

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

Depuis Bootstrap / Reactstrap a publié sa dernière version, à savoir Bootstrap 4, vous pouvez l'utiliser en suivant ces étapes

1. Accédez à votre projet
2. Ouvrez 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 d'un bouton créé avec Reactstrap

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

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

Vous pouvez consulter le Reactstrap en visitant leur page officielle

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

Mais je pense que cette question est liée à celle ici - 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

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. J'espère que cela vous sera utile :-)

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, comme: j'ai besoin d'utiliser un conteneur et une ligne

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

Vous devez importer dans votre fichier js

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

Voici comment inclure le dernier bootstrap
https://react-bootstrap.github.io/getting-started/introduction

1. installer

npm installer bootstrap de réaction-bootstrap

2. puis importez dans App.js importez 'bootstrap / dist / css / bootstrap.min.css';

3. Ensuite, vous devez importer les composants que vous utilisez dans votre application, exemple Si vous utilisez la barre de navigation, la navigation, le bouton, le formulaire, le contrôle de formulaire, importez tous ces éléments comme ci-dessous:

import Navbar from 'react-bootstrap/Navbar'
import Nav from 'react-bootstrap/Nav'
import Form from 'react-bootstrap/Form'
import FormControl from 'react-bootstrap/FormControl'
import Button from 'react-bootstrap/Button'


// or less ideally
import { Button } from 'react-bootstrap';