Comment inclure bootstrap css et js dans reactjs application?

Je suis newb à reactjs, je veux inclure bootstrap dans mon réagir application

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

Maintenant, voulez charger bootstrap css et js dans mon réagir app.

Je suis en utilisant 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;

Ma question est "comment inclure bootstrap css et js dans reactjs application de node_modules?" Comment le programme d'installation de bootstrap à inclure dans mon réagir app?

Êtes-vous à l'aide de Node.js sur le backend?
Il suffit d'importer des fichiers d'Amorçage dans votre page HTML
Non, je ne suis pas à l'aide de Node.js.
Êtes-vous en utilisant le moins la version de bootstrap ou tout simplement la plaine css? Pour ces derniers, il suffit d'inclure le css à l'aide de la version CAN et nous réagir bootstrap pour la partie JavaScript.
J'ai utilisé de la plaine css. Je ne veux pas de CA. Je veux utiliser bootstrap à partir de node_modules.
Quel est le but de l'utilisation du mécanisme national de prévention de la version? Si vous utilisez Node.js, vous pouvez créer une route statique pointant vers le répertoire node_modules. Si non, vous pouvez pour vous d'assembler quelque chose avec webpack css-loader mais le fait que vous êtes coincé pour une tâche qui vous prennent 5s si vous il suffit de télécharger le css et le placer dans votre projet, devrait vous dire quelque chose. Dans tous les cas: utilisation de réagir-bootstrap pour la partie JavaScript.
pour rendre la réponse la plus claire possible: utiliser les réagissent-bootstrap! Cordialement
J'ai trouvé cet article, reactstrap.github.io

InformationsquelleAutor Mehul Mali | 2016-10-14

166

Si vous êtes nouveau à Réagir et à l'aide de créez-réagir-application de la cli de l'installation. Exécutez ensuite le dessous de MNP commande pour inclure la dernière version de bootstrap.
```
 npm install --save bootstrap
```
ou
```
npm install --save bootstrap@4.0.0-alpha.6 
```
Puis ajouter l'instruction import pour index.js fichier
```
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 (réagir utilise className comme attribut au lieu de classe)
- Si vous souhaitez utiliser Bootstrap 4 utilisez la commande suivante: npm install [email protected] -enregistrer (en maintenant la commande d'installation ci-dessus sera d'installer la dernière version stable de Bootstrap, qui est 3.3.7)
- Relative imports outside of src/ are not supported.
- Je n'obtiens pourquoi ne pas tout simplement un lien dans le modèle html
- Je suppose que vous faites référence à CDN liens... je pense que cela aide stackoverflow.com/questions/26192897/...
- La Solution est décrite ici: github.com/facebook/create-react-app/issues/301
- qu'en js fichiers? jquery bootstrap.js
- Si j'ai plusieurs fichiers qui contient un composant chaque, ai-je besoin d'importer des css dans chaque fichier ?
- Je crois que l'importation de CSS, JS fichiers permet uniquement ce fichier JS pour accéder aux classes CSS (via className attribut). Si je veux accéder à ces classes dans d'autres composants (où chaque composant est défini dans un seprate fichier JS), alors je vais avoir à importer le même fichier CSS dans tous ces endroits. C'est vraiment mauvais!
- dans ma solution, je ne suis pas l'importation sur chaque fichier js. Je suis en gardant cela à l'index.js fichier. c'est le point de départ de Réagir application et chargé qu'une seule fois. j'espère que votre doute est désactivée.
- Je sais que vous êtes juste de l'importation de bootstrap css dans index.js fichier, mais alors comment les autres js fichiers (fichiers de composant) être en mesure d'accéder à bootstrap classes? Comme à l'importation dans un fichier js est locale pour ce fichier.Bootstrap classes sont communes et sont tenus par la quasi-totalité de Réagir composants.
- J'ai trouvé cet article et il pourrait être utile blog.logrocket.com/how-to-use-bootstrap-with-react-a354715d1121
- juste un avis, qui sera le résultat dans la console d'avertissement comme des balises d'en-tête ne doit pas être mis à l'intérieur de balises div dans le composant Réagir
InformationsquelleAutor Praveen M P
29

Vous ne pouvez pas utiliser Bootstrap, Jquery base de composants Javascript à Réagir application, comme tout ce qui tente de manipuler le DOM à l'extérieur de Réagir est considéré comme une mauvaise pratique. Ici vous pouvez lire plus d'infos à ce sujet.

Comment inclure de Bootstrap dans votre Réagissent application:

1) Recommandé. Vous pouvez inclure raw fichiers CSS de Bootstrap comme les autres réponses spécifier.

2) jetez un oeil à réagir-bootstrap de la bibliothèque. Il est exclusivement écrit pour Réagir.

3) Pour Bootstrap 4 il est reactstrap

Bonus

Ces jours j'en général d'éviter de Bootstrap bibliothèques qui fournissent des prêts à utiliser des composants (mentionnés ci-dessus réagir-bootstrap ou reactstrap et ainsi de suite). Comme vous devenez dépendant sur les accessoires qu'ils prennent (vous ne pouvez pas ajouter des comportements à l'intérieur d'eux) et vous perdez le contrôle de DOM que ces éléments produisent.

Alors utilisez uniquement Bootstrap CSS ou laisser Bootstrap out. Une règle générale est: Si vous n'êtes pas sûr de savoir si vous en avez besoin, vous n'en avez pas besoin. J'ai vu beaucoup d'applications qui incluent Bootstrap, mais en utilisant seulement une petite quantité de CSS de et, parfois, la plupart de cette CSS est remplacée par des styles personnalisés.
- Avec l'option 1), comment intégrez-vous de Bootstrap, Javascript (et jquery)? Ou vous n'avez pas?
- Malheureusement, ni réagir-bootstrap ou reactstrap soutien Bootstrap 4 encore.
- "laissez-bootstrap" est une jolie option viable. De très bons conseils.
InformationsquelleAutor Shota
24

Via mnp, vous devez exécuter ce qui suit
```
npm install bootstrap jquery --save
npm install css-loader style-loader --save-dev
```
Si bootstrap 4, ajoutez aussi popper.js
```
npm install popper.js --save
```
Ajoutez le code suivant (comme un nouvel objet) de votre webpack config loaders: [ tableau
```
{
  test: /\.css$/,
  loader: 'style-loader!css-loader'
}
```
Ajouter les éléments suivants à votre indice, ou disposition
```
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/js/bootstrap.js';
```
- L'un des parfait jusqu'à ce jour de réponse +1
InformationsquelleAutor blamb
14

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

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 ajouter de la police chargeurs ainsi, sinon vous obtiendrez une erreur.
- Merci, pour la réponse. Besoin mnp modules pour le style du chargeur et du css-loader?
- Oui utiliser style-loader css-loader chargeurs
- Ok, maintenant, pour voir ce qu'il est webpack (a peu de chose, comme inclure quelque chose et utiliser, il est devenu en un horrible un autre js-chose à apprendre), ny aspirationw a été d'utiliser un bootstrap3 style de bouton dans mon tutoriel app.... maintenant je ne le ferais pas
- si vous utilisez Facebook du créer-réagir-app il va mettre en place webpack avec style-loader pour vous.
InformationsquelleAutor Thaadikkaaran

Veuillez suivre au-dessous lien à utiliser bootstrap à Réagir.
https://react-bootstrap.github.io/

Pour l'installation :

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

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

Mettre Bootstrap CA pour CSS dans la balise de index.html fichier de réagir et Bootstrap $ pour les Js dans la balise de index.html fichier. L'utilisation d'un nom de classe au lieu de la classe
suivez 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>

Le lien que vous avez fourni est mort
Hey David, Mis Bootstrap CA pour CSS dans <head> tag de index.js fichier de réagir et Bootstrap $ pour les Js dans <body> tag de index.js fichier. L'utilisation d'un nom de classe instrad de classe.
mise à jour de Réponse.

InformationsquelleAutor Aditya Parmar

3
```
npm install --save bootstrap 
```
et ajouter cette instruction import dans votre index.js fichier
```
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
```
ou Vous pouvez simplement ajouter CA dans votre index.html fichier.
- ce propos de jquery?
- pour ajouter jquery pour votre projet: mnp je jquery --enregistrer, puis sur importer $ de 'jquery'
InformationsquelleAutor Nikhil
3

Espère que cela est utile 😉

Étape 1: à l'aide de NPM install ce soufflet de commande
```
npm install --save reactstrap@next react react-dom
```
Étape 2: exemple index.js script principal d'importation soufflet de commande
```
import 'bootstrap/dist/css/bootstrap.min.css';
```
Étape 3: composants de l'INTERFACE utilisateur reportez-vous à soufflet site
reactstrap.github.io

InformationsquelleAutor Vidhyapathi Kandhasamy
1

vous pouvez l'installer dirctly via
```
$ npm install --save react react-dom
$ npm install --save react-bootstrap
```
ensuite importer ce que vous avez vraiment besoin de le bootstrap comme :
```
import Button from 'react-bootstrap/lib/Button';
```
//ou
```
import  Button  from 'react-bootstrap';
```
et également vous pouvez installer :
```
npm install --save reactstrap@next react react-dom
```
vérifier cela cliquez ici .

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

lire ici

InformationsquelleAutor Majed HORIA

Juste au cas où si vous pouvez utiliser yarn qui est recommandé pour Réagir apps,

que vous pouvez faire,

yarn add bootstrap@4.1.1 //this is to add bootstrap with a specific  version

Cela va ajouter le bootstrap comme une dépendance à votre package.json ainsi.

{
  "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, il suffit d'importer bootstrap dans votre index.js fichier.

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

InformationsquelleAutor prime

0

Après l'installation de bootstrap dans votre projet "npm install --enregistrer [email protected]"
vous devez vous déplacer à la index.js fichier dans le projet le dossier SRC et l'importation de bootstrap à partir de nœud paquet de module.

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

Si vous le souhaitez, vous pouvez obtenir de l'aide de cette vidéo, sûr que ça va vous aider beaucoup.

Importer Des Fichiers D'Amorce À Réagir Projet

InformationsquelleAutor Yousuf Shaikh
0

Depuis Bootstrap/Reactstrap a publié leur version la plus récente c'est à dire Bootstrap 4 vous pouvez l'utiliser en suivant ces étapes
1. Accédez à votre projet
2. Ouvrez le terminal
3. Je suppose mnp est déjà installé, puis tapez la commande suivante
  
  npm install --save reactstrap react react-dom
Cela permettra d'installer Reactstrap comme une dépendance dans votre projet.

Voici le code pour un bouton créé à l'aide Reactstrap

JS:
```
import React from 'react';
import { Button } from 'reactstrap';

export default (props) => {
  return (
    <Button color="danger">Danger!</Button>
  );
};
```
Vous pouvez vérifier l'Reactstrap par la visite de leurs officiel page

InformationsquelleAutor Hadi Mir
0

En quelque sorte accepté la réponse est seulement en parler, y compris le fichier css de bootstrap.

Mais je pense que cette question est liée à l'ici -
Bootstrap Déroulant ne fonctionne pas à Réagir

Il y a plusieurs réponses qui peuvent aider -
1. https://stackoverflow.com/a/52251319/4266842
2. https://stackoverflow.com/a/54188034/4266842
InformationsquelleAutor Vikram Gulia
0

Si vous utilisez de l'ARC(créer-réagir-app) dans votre projet, vous pouvez ajouter ceci:
```
npm install react-bootstrap bootstrap
```
Si vous utiliser bootstrap dans votre application et si ça ne fonctionne pas, puis de les utiliser dans index.html :
```
<link
  rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
  integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
  crossorigin="anonymous"
/>
```
Je l'ai fait ci-dessus pour résoudre le même problème. Espérons que cela est utile pour vous 🙂

InformationsquelleAutor Mohamad Ali

Plein de réponse à vous donner, jquery et bootstrap depuis jquery est une exigence pour bootstrap.js:

Installer jquery et bootstrap en node_modules:

npm install bootstrap
npm install jquery

Importer dans vos composants à l'aide de ce chemin d'accès:

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

InformationsquelleAutor HoosierCoder

J'ai essayer avec l'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();

InformationsquelleAutor Morteza Fathnia

0

Je veux juste ajouter que l'installation et l'importation de bootstrap dans votre index.js le fichier ne sera pas suffisant pour l'utilisation de bootstrap composants.
Chaque fois que vous voulez utiliser un composant, vous devez l'importer, comme:
J'ai besoin d'utiliser un récipient et une ligne
```
    <Container>
        <Row>
        <Col sm={4}> Test </Col>
        <Col sm={8}> Test </Col>
        </Row>
</Container>
```
Vous devez l'importer dans votre fichier js
```
import {Container, Row, Col} from 'react-bootstrap';
```
InformationsquelleAutor ElKaygi

Vous devez vous connecter pour publier un commentaire.

Comment inclure de Bootstrap dans votre Réagissent application:

Bonus