Eu sou newb para reactjs, quero incluir bootstrap no meu aplicativo react

Eu instalei o bootstrap por npm install bootstrap --save

Agora, deseja carregar o bootstrap css e js no meu aplicativo de reação.

Estou usando o 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;

Meu problema é "como incluir bootstrap css e js no aplicativo reactjs do node_modules?" Como configurar o bootstrap para incluir no meu aplicativo de reação?

Se você é novo no React e usa a create-react-appinstalação cli, execute o comando npm abaixo para incluir a versão mais recente do bootstrap.

npm install --save bootstrap

ou

npm install --save bootstrap@latest

Em seguida, adicione a seguinte declaração de importação ao index.jsarquivo. ( 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ão se esqueça de usar classNamecomo atributo nos elementos de destino (reagir usa classNamecomo atributo em vez de class).

Via npm , você executaria o seguinte

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

Se o bootstrap 4, também adicione popper.js

npm install popper.js --save

Adicione o seguinte (como um novo objeto) ao seu array de configuração do webpack loaders: [

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

Adicione o seguinte ao seu índice ou layout

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

Você não pode usar componentes Javascript baseados em Bootstrap Jquery no aplicativo React, pois qualquer coisa que tente manipular o DOM fora do React é considerada uma prática ruim. Aqui você pode ler mais informações sobre ele .

Como incluir o Bootstrap no seu aplicativo React:

1) Recomendado . Você pode incluir arquivos CSS brutos do Bootstrap, conforme as outras respostas especificam.

2) Dê uma olhada na biblioteca react-bootstrap . Foi escrito exclusivamente para o React.

3) Para o Bootstrap 4, há reação

Bônus

Hoje em dia, geralmente evito as bibliotecas de Bootstrap que fornecem componentes prontos para uso (react-bootstrap ou reacttstrap acima mencionados e assim por diante). À medida que você se torna dependente dos acessórios que eles adotam (não é possível adicionar um comportamento personalizado a eles), você perde o controle sobre o DOM que esses componentes produzem.

Portanto, use apenas o CSS do Bootstrap ou deixe o Bootstrap de fora. Uma regra geral é: Se você não tem certeza se precisa ou não, não precisa. Eu já vi muitos aplicativos que incluem o Bootstrap, mas usando apenas uma pequena quantidade de CSS e, às vezes, a maior parte desse CSS é substituída por estilos personalizados.

Você pode apenas importo arquivo css onde quiser. O Webpack cuidará do pacote css se você configurou o carregador conforme necessário.

Algo como,

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

E a configuração do webpack como,

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

Nota: Você também precisa adicionar carregadores de fontes, caso contrário, você receberá um erro.

Eu também tive um cenário semelhante. Minha configuração foi como indicado abaixo

npm install create-react-app

Isso fornecerá uma configuração de código da placa da caldeira para começar. Brinque com o arquivo App.js para a lógica principal.

Posteriormente, você pode usar o CDN de inicialização no index.html criado pela ferramenta CLI. ou

npm install bootstrap popper jquery

e simplesmente inclua isso no arquivo App.js.

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

Poucos autores mencionaram o uso do atributo className em vez da classe, mas no meu caso, ambos estavam funcionando como abaixo. Mas se você usar a classe e olhar para o console nas ferramentas do desenvolvedor no navegador, verá um erro ao usar a classe.

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

E não esqueça de remover as importações CSS padrão para evitar conflitos com a inicialização.

Espero que ajude, Feliz codificação !!!

Siga o link abaixo para usar o bootstrap com o React. https://react-bootstrap.github.io/

Para instalação:

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

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

Coloque o CDN do Bootstrap para CSS na tag do arquivo index.html em react e o CDN do Bootstrap para Js na tag do arquivo index.html. Use className em vez da classe, siga abaixo 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>

Resposta completa para fornecer o jquery e o bootstrap, já que o jquery é um requisito para o bootstrap.js:

Instale o jquery e o bootstrap no node_modules:

npm install bootstrap
npm install jquery

Importe seus componentes usando este caminho de arquivo exato:

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 

e adicione esta instrução de importação ao seu arquivo index.js

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

ou Você pode simplesmente adicionar a CDN ao seu arquivo index.html.

Espero que isso seja útil;)

Etapa 1: usando o NPM, instale este comando abaixo

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

Etapa 2: exemplo comando principal de importação do script index.js abaixo

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

Etapa 3: Componentes da interface do usuário consulte o site reactstrap.github.io

você pode instalá-lo diretamente via

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

importe o que você realmente precisa do bootstrap, como:

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

// ou

import  Button  from 'react-bootstrap';

e também você pode instalar:

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

confira isso clique aqui .

e para o CSS, você pode ler este link também com cuidado

leia aqui

Depois de instalar o bootstrap no seu projeto "npm install --save [email protected]", você deve mover para o arquivo index.js na pasta SRC do projeto e importar o bootstrap do pacote do módulo node.

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

Se você quiser, pode obter ajuda deste vídeo, com certeza ele o ajudará bastante.

Importar inicialização no projeto React

Eu tento com instruções:

npm install bootstrap
npm install jquery popper.js

em 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();

Caso você possa usar o yarnrecomendado para os aplicativos React,

você pode fazer,

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

Isso adicionará o bootstrap como uma dependência ao seu package.jsontambém.

{
  "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"
  }
}

Depois disso, basta importar bootstrapno seu index.jsarquivo.

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

Como o Bootstrap / Reactstrap lançou sua versão mais recente, ou seja, o Bootstrap 4, você pode usá-lo seguindo estas etapas

1. Navegue para o seu projeto
2. Abra o terminal

3. Presumo que o npm já esteja instalado e digite o seguinte comando

   npm install --save reactstrap react react-dom

Isso instalará o Reactstrap como uma dependência no seu projeto.

Aqui está o código para um botão criado usando o Reactstrap

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

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

Você pode conferir a Reactstrap visitando sua página oficial

De alguma forma, a resposta aceita está apenas falando sobre a inclusão do arquivo css no bootstrap.

Mas acho que essa pergunta está relacionada à pergunta aqui - o menu suspenso de inicialização não está funcionando no React

Existem algumas respostas que podem ajudar -

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

Se você usa o CRA (create-react-app) em seu projeto, você pode adicionar isto:

npm install react-bootstrap bootstrap

Se você usa o bootstrap no seu aplicativo e se não estiver funcionando, use-o no index.html:

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

Eu fiz o acima para resolver um problema semelhante. Espero que isso seja útil para você :-)

Eu só quero acrescentar que a instalação e importação do bootstrap no seu arquivo index.js não será suficiente para o uso de componentes do bootstrap. Toda vez que você quiser usar um componente, importe-o, como: Preciso usar um contêiner e uma linha

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

Você deve importar no seu arquivo js

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

Aqui está como incluir a última inicialização
https://react-bootstrap.github.io/getting-started/introduction

1.Instalar

npm install react-bootstrap bootstrap

2. depois importe para App.js import 'bootstrap / dist / css / bootstrap.min.css';

3. Em seguida, você precisa importar os componentes que você usa no seu aplicativo, por exemplo, se você usa a barra de navegação, navegação, botão, formulário, formulário e controle, importe todos os itens abaixo:

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