Jestem nowy w responsjs, chcę dołączyć bootstrap do mojej aplikacji React

Zainstalowałem bootstrap przez npm install bootstrap --save

Teraz chcę załadować bootstrap css i js w mojej aplikacji React.

Używam WebPacka.

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;

Mój problem to „jak dołączyć bootstrap css i js do aplikacji awarejs z node_modules?” Jak skonfigurować bootstrap do uwzględnienia w mojej aplikacji React?

Jeśli jesteś nowym użytkownikiem React i korzystasz z create-react-appkonfiguracji cli, uruchom poniższą komendę npm, aby dołączyć najnowszą wersję bootstrap.

npm install --save bootstrap

lub

npm install --save bootstrap@latest

Następnie dodaj do index.jspliku następującą instrukcję importu . ( https://getbootstrap.com/docs/4.4/getting-started/webpack/#importing-compiled-css )

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

lub

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

nie zapomnij użyć classNamejako atrybutu na elementach docelowych ( classNamezamiast tego zareaguj na użycie jako atrybut class).

Za pośrednictwem npm wykonasz następujące czynności

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

Jeśli bootstrap 4, dodaj także zależność popper.js

npm install popper.js --save

Dodaj następujące elementy (jako nowy obiekt) do konfiguracji pakietu internetowego

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

Dodaj następujące elementy do swojego indeksu lub układu

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

Nie możesz używać komponentów JavaScript opartych na Bootstrap Jquery w aplikacji React, ponieważ wszystko, co próbuje manipulować DOM poza Reactem, jest uważane za złą praktykę. Tutaj możesz przeczytać więcej informacji na ten temat .

Jak dołączyć Bootstrap do swojej aplikacji React:

1) Zalecane . Możesz dołączyć nieprzetworzone pliki CSS programu Bootstrap, zgodnie z innymi odpowiedziami.

2) Spójrz na bibliotekę React-bootstrap . Jest napisany wyłącznie dla Reacta.

3) W przypadku Bootstrap 4 istnieje Reactstrap

Premia

W dzisiejszych czasach generalnie unikam bibliotek Bootstrap, które dostarczają gotowe do użycia komponenty (wspomniane wyżej react-bootstrap lub reactstrap i tak dalej). Kiedy stajesz się zależny od rekwizytów, które biorą (nie możesz dodać do nich niestandardowego zachowania) i tracisz kontrolę nad DOM, który te komponenty wytwarzają.

Więc albo użyj tylko Bootstrap CSS, albo zostaw Bootstrap na zewnątrz. Ogólna praktyczna zasada brzmi: jeśli nie jesteś pewien, czy tego potrzebujesz, nie potrzebujesz tego. Widziałem wiele aplikacji, które zawierają Bootstrap, ale używają tylko niewielkiej ilości CSS, a czasami większość tego CSS jest zastępowana przez niestandardowe style.

Możesz po prostu importplik css, gdziekolwiek chcesz. Webpack zajmie się pakowaniem css, jeśli skonfigurowałeś program ładujący zgodnie z wymaganiami.

Coś jak,

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

A konfiguracja webpacka taka jak:

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

Uwaga: Musisz także dodać programy ładujące czcionki, w przeciwnym razie wystąpiłby błąd.

Ja też miałem podobny scenariusz. Moja konfiguracja była taka, jak wskazano poniżej

npm install create-react-app

Pozwoli to rozpocząć konfigurację kodu płyty kotłowej. Pobaw się z plikiem App.js dla głównej logiki.

Później możesz użyć bootstrap CDN w pliku index.html utworzonym przez narzędzie CLI. lub

npm install bootstrap popper jquery

a następnie po prostu umieść to w pliku App.js.

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

Niewielu autorów wspomniało o używaniu atrybutu className zamiast class, ale w moim przypadku oba działały jak poniżej. Ale jeśli użyjesz klasy i spojrzysz na konsolę w narzędziach programistycznych w przeglądarce, zobaczysz błąd podczas używania klasy, więc zamiast tego użyj className.

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

I nie zapomnij usunąć domyślnych importów CSS, aby uniknąć konfliktów z bootstrapem.

Mam nadzieję, że to pomoże. Miłego kodowania !!!

Użyj poniższego linku, aby użyć bootstrap z Reactem. https://react-bootstrap.github.io/

Do montażu:

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

------------------------------------LUB------------- ------------------------

Umieść Bootstrap CDN dla CSS w tagu pliku index.html w Reag, a Bootstrap CDN dla Js w tagu pliku index.html. Użyj className zamiast class zgodnie z 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>

Pełna odpowiedź, aby dać ci jquery i bootstrap, ponieważ jquery jest wymaganiem dla bootstrap.js:

Zainstaluj jquery i załaduj do node_modules:

npm install bootstrap
npm install jquery

Zaimportuj komponenty przy użyciu tej dokładnej ścieżki pliku:

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 

i dodaj tę instrukcję importu do pliku index.js

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

lub Możesz po prostu dodać CDN do pliku index.html.

Mam nadzieję, że to jest pomocne;)

Krok 1: używając NPM zainstaluj poniższe polecenie

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

Krok 2: przykładowe polecenie importu głównego skryptu index.js poniżej

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

Krok 3: Komponenty UI odnoszą się do poniższej strony internetowej restrap.github.io

możesz zainstalować go bezpośrednio przez

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

następnie zaimportuj to, czego naprawdę potrzebujesz z bootstrap, na przykład:

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

// lub

import  Button  from 'react-bootstrap';

a także możesz zainstalować:

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

sprawdź to kliknij tutaj .

a dla CSS możesz przeczytać ten link również ostrożnie

przeczytaj tutaj

Po zainstalowaniu programu bootstrap w projekcie „npm install --save [email protected]” należy przejść do pliku index.js w folderze SRC projektu i zaimportować plik bootstrap z pakietu modułu węzła.

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

Jeśli chcesz, możesz uzyskać pomoc z tego filmu, na pewno bardzo ci pomoże.

Importuj Bootstrap w React Project

Próbuję z instrukcją:

npm install bootstrap
npm install jquery popper.js

następnie w 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();

Na wszelki wypadek, jeśli możesz użyć tego, yarnco jest zalecane dla aplikacji React,

możesz to zrobić,

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

To doda również bootstrap jako zależność do twojego 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"
  }
}

Potem wystarczy zaimportować bootstrapw index.jspliku.

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

Ponieważ Bootstrap / Reactstrap wydał swoją najnowszą wersję, tj. Bootstrap 4 , możesz tego użyć, wykonując następujące kroki

1. Przejdź do swojego projektu
2. Otwórz terminal

3. Zakładam, że npm jest już zainstalowany, a następnie wpisz następujące polecenie

   npm install --save reactstrap react react-dom

Spowoduje to zainstalowanie Reactstrap jako zależności w twoim projekcie.

Oto kod przycisku utworzonego za pomocą Reactstrap

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

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

Możesz sprawdzić Reactstrap, odwiedzając ich oficjalną stronę

W jakiś sposób zaakceptowana odpowiedź mówi tylko o włączeniu pliku css z bootstrapa.

Ale myślę, że to pytanie jest powiązane z tutaj - Bootstrap Dropdown nie działa w React

Jest kilka odpowiedzi, które mogą pomóc -

1. https://stackoverflow.com/a/52251319/4266842
2. https://stackoverflow.com/a/54188034/4266842

Jeśli używasz CRA (create-react-app) w swoim projekcie, możesz dodać to:

npm install react-bootstrap bootstrap

Jeśli używasz bootstrap w swojej aplikacji i jeśli nie działa, użyj tego w index.html:

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

Zrobiłem powyższe, aby rozwiązać podobny problem. Mam nadzieję, że ci się to przyda :-)

Chcę tylko dodać, że instalacja i importowanie bootstrap w twoim pliku index.js nie wystarczy do używania komponentów bootstrap. Za każdym razem, gdy chcesz użyć komponentu, powinieneś go zaimportować, na przykład: Muszę użyć kontenera i wiersza

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

Powinieneś zaimportować do swojego pliku js

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

Oto jak dołączyć najnowszy bootstrap
https://react-bootstrap.github.io/getting-started/introduction

1. zainstalować

npm install respond-bootstrap bootstrap

2. następnie zaimportuj do App.js import „bootstrap / dist / css / bootstrap.min.css”;

3. Następnie musisz zaimportować komponenty, których używasz w swojej aplikacji, przykład Jeśli używasz navbar, nav, button, form, formcontrol, a następnie zaimportuj wszystkie z nich, jak poniżej:

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

Simple Solution (2020) przedstawia się następująco: -

1. npm install --save jquery popper.js
2. npm install --save bootstrap
3. npm install --save style-loader css-loader
4. Zaktualizuj webpack.config.js , musisz powiedzieć webpackowi , jak obsługiwać bootstrapowe pliki CSS, więc musisz dodać kilka reguł, jak pokazano: -

5. Dodaj trochę importu w punkcie wejścia swojej aplikacji React (zwykle jest to index.js), umieść je na górze, upewnij się, że nie zmieniasz kolejności.

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

import $ from "jquery";

import Popper from "popper.js";

import "bootstrap/dist/js/bootstrap.bundle.min";

6. Te kroki powinny ci pomóc. Jeśli wystąpi jakiś problem, prosimy o komentarz .