Saya pemula untuk bereaksi, saya ingin memasukkan bootstrap di aplikasi reaksi saya

Saya telah menginstal bootstrap oleh npm install bootstrap --save

Sekarang, ingin memuat bootstrap css dan js di aplikasi reaksi saya.

Saya menggunakan paket web.

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;

Masalah saya adalah "bagaimana cara memasukkan bootstrap css dan js dalam aplikasi reactjs dari node_modules?" Bagaimana cara mengatur bootstrap untuk dimasukkan dalam aplikasi reaksi saya?

Jika Anda baru untuk Bereaksi dan menggunakan create-react-apppengaturan cli, jalankan perintah npm di bawah ini untuk memasukkan versi terbaru dari bootstrap.

npm install --save bootstrap

atau

npm install --save bootstrap@latest

Kemudian tambahkan pernyataan impor berikut ke index.jsfile. ( https://getbootstrap.com/docs/4.4/getting-started/webpack/#importing-compiled-css )

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

atau

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

jangan lupa untuk menggunakan classNamesebagai atribut pada elemen target (bereaksi gunakan classNamesebagai atribut alih-alih class).

Melalui npm , Anda akan menjalankan mengikuti

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

Jika bootstrap 4, tambahkan juga popper.js

npm install popper.js --save

Tambahkan berikut ini (sebagai objek baru) ke array konfigurasi webpack Andaloaders: [

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

Tambahkan berikut ini ke indeks Anda , atau tata letak

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

Anda tidak dapat menggunakan komponen Javascript berbasis Bootstrap Jquery di aplikasi Bereaksi, karena apa pun yang mencoba memanipulasi DOM di luar Bereaksi dianggap praktik buruk. Di sini Anda dapat membaca lebih banyak info tentangnya .

Cara memasukkan Bootstrap di aplikasi Bereaksi Anda:

1) Direkomendasikan . Anda dapat memasukkan file CSS mentah dari Bootstrap seperti yang ditentukan oleh jawaban lain.

2) Lihatlah perpustakaan react-bootstrap . Ini secara khusus ditulis untuk Bereaksi.

3) Untuk Bootstrap 4 ada reactstrap

Bonus

Saat ini saya biasanya menghindari pustaka Bootstrap yang menyediakan komponen siap pakai (react-bootstrap atau reactstrap yang disebutkan di atas dan seterusnya). Ketika Anda menjadi tergantung pada alat peraga yang mereka ambil (Anda tidak dapat menambahkan perilaku khusus di dalamnya) dan Anda kehilangan kendali atas DOM yang dihasilkan komponen ini.

Jadi gunakan hanya Bootstrap CSS atau biarkan Bootstrap keluar. Aturan praktis yang umum adalah: Jika tidak yakin apakah Anda membutuhkannya, Anda tidak membutuhkannya. Saya telah melihat banyak aplikasi yang menyertakan Bootstrap, tetapi hanya menggunakan sedikit CSS dan terkadang sebagian besar CSS ini ditimpa oleh gaya khusus.

Anda bisa saja import file css di mana pun Anda inginkan. Webpack akan berhati-hati untuk membundel css jika Anda mengkonfigurasi loader sesuai kebutuhan.

Sesuatu seperti,

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

Dan konfigurasi webpack seperti,

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

Catatan: Anda harus menambahkan pemuat font juga, kalau tidak Anda akan mendapatkan kesalahan.

Saya juga punya skenario yang sama. Setup saya seperti yang ditunjukkan di bawah ini

npm install create-react-app

Ini akan memberi Anda pengaturan kode boiler-plate untuk memulai. Mainkan-main dengan file App.js untuk logika utama.

Kemudian Anda dapat menggunakan bootstrap CDN di index.html yang dibuat oleh alat CLI. atau

npm install bootstrap popper jquery

dan kemudian cukup sertakan ini dalam file App.js.

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

Beberapa penulis telah menyebutkan menggunakan atribut className alih-alih kelas, tetapi dalam kasus saya, keduanya bekerja seperti di bawah ini. Tetapi jika Anda menggunakan kelas dan melihat konsol di alat pengembang di browser, Anda akan melihat kesalahan untuk menggunakan class. Jadi gunakan className sebagai gantinya.

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

Dan jangan lupa untuk menghapus impor CSS default untuk menghindari konflik dengan bootstrap.

Semoga itu bisa membantu, Selamat coding !!!

Ikuti tautan di bawah ini untuk menggunakan bootstrap dengan Bereaksi. https://react-bootstrap.github.io/

Untuk instalasi:

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

------------------------------------ATAU------------- ------------------------

Masukkan Bootstrap CDN untuk CSS di tag file index.html sebagai reaksi dan Bootstrap CDN untuk Js di tag file index.html. Gunakan className alih-alih kelas ikuti di bawah ini 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>

Jawaban lengkap untuk memberi Anda jquery dan bootstrap karena jquery adalah persyaratan untuk bootstrap.js:

Instal jquery dan bootstrap ke node_modules:

npm install bootstrap
npm install jquery

Impor komponen Anda menggunakan filepath yang tepat ini:

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 

dan tambahkan pernyataan impor ini ke file index.js Anda

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

atau Anda cukup menambahkan CDN di file index.html Anda.

Semoga ini bermanfaat;)

Langkah 1: menggunakan NPM, instal perintah di bawah ini

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

Langkah 2: contoh perintah utama index.js impor di bawah ini

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

Langkah 3: Komponen UI merujuk ke bawah situs web reactstrap.github.io

Anda dapat menginstalnya secara langsung melalui

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

kemudian impor apa yang benar-benar Anda butuhkan dari bootstrap seperti:

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

// atau

import  Button  from 'react-bootstrap';

dan juga Anda dapat menginstal:

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

lihat ini klik di sini .

dan untuk CSS Anda dapat membaca tautan ini juga carfuly

baca disini

Setelah menginstal bootstrap di proyek Anda "install npm - save [email protected]" Anda harus pindah ke file index.js di folder SRC proyek dan mengimpor bootstrap dari paket modul node.

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

Jika Anda suka, Anda bisa mendapatkan bantuan dari video ini, pasti itu akan banyak membantu Anda.

Impor Bootstrap Dalam Proyek Bereaksi

Saya coba dengan instruksi:

npm install bootstrap
npm install jquery popper.js

lalu di 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();

Untuk jaga-jaga jika Anda dapat menggunakan yarn yang direkomendasikan untuk Bereaksi aplikasi,

Anda dapat melakukan,

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

Ini akan menambahkan bootstrap sebagai ketergantungan Anda package.jsonjuga.

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

Setelah itu baru impor bootstrapdi index.jsfile Anda .

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

Karena Bootstrap / Reactstrap telah merilis versi terbarunya yaitu Bootstrap 4 Anda dapat menggunakan ini dengan mengikuti langkah-langkah ini

1. Arahkan ke proyek Anda
2. Buka terminal

3. Saya menganggap npm sudah diinstal dan kemudian ketik perintah berikut

   npm install --save reactstrap react react-dom

Ini akan menginstal Reactstrap sebagai ketergantungan dalam proyek Anda.

Berikut adalah kode untuk tombol yang dibuat menggunakan Reactstrap

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

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

Anda dapat memeriksa Reactstrap dengan mengunjungi halaman resmi mereka

Entah bagaimana jawaban yang diterima hanya berbicara tentang memasukkan file css dari bootstrap.

Tapi saya pikir pertanyaan ini terkait dengan yang ada di sini - Bootstrap Dropdown tidak berfungsi di React

Ada beberapa jawaban yang dapat membantu -

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

Jika Anda menggunakan CRA (buat-reaksi-aplikasi) di proyek Anda, Anda dapat menambahkan ini:

npm install react-bootstrap bootstrap

Jika Anda menggunakan bootstrap di aplikasi Anda dan jika itu tidak berfungsi, gunakan ini di index.html:

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

Saya melakukan hal di atas untuk menyelesaikan masalah serupa. Semoga ini bermanfaat bagi Anda :-)

Saya hanya ingin menambahkan bahwa menginstal dan mengimpor bootstrap di file index.js Anda tidak akan cukup untuk menggunakan komponen bootstrap. Setiap kali Anda ingin menggunakan komponen, Anda harus mengimpornya, seperti: Saya perlu menggunakan wadah dan baris

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

Anda harus mengimpor dalam file js Anda

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

Ini adalah cara memasukkan bootstrap terbaru
https://react-bootstrap.github.io/getting-started/introduction

1. Pasang

npm instal react-bootstrap bootstrap

2. kemudian impor ke App.js impor 'bootstrap / dist / css / bootstrap.min.css';

3. Maka Anda perlu mengimpor komponen yang Anda gunakan di aplikasi Anda, contoh Jika Anda menggunakan navbar, nav, tombol, form, formcontrol kemudian impor semua ini seperti di bawah ini:

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