Tôi là người mới tham gia Reacjs, tôi muốn đưa bootstrap vào ứng dụng phản ứng của mình

Tôi đã cài đặt bootstrap bởi npm install bootstrap --save

Bây giờ, muốn tải bootstrap css và js trong ứng dụng phản ứng của tôi.

Tôi đang sử dụng 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;

Vấn đề của tôi là "làm thế nào để bao gồm bootstrap css và js trong ứng dụng Reacjs từ node_modules?" Làm cách nào để thiết lập bootstrap để đưa vào ứng dụng phản ứng của tôi?

Nếu bạn chưa quen với React và sử dụng create-react-appcli setup, hãy chạy lệnh npm bên dưới để đưa vào phiên bản bootstrap mới nhất.

npm install --save bootstrap

hoặc là

npm install --save bootstrap@latest

Sau đó thêm câu lệnh nhập sau vào index.jstệp. ( https://getbootstrap.com/docs/4.4/getting-started/webpack/#importing-compiled-css )

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

hoặc là

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

đừng quên sử dụng classNamelàm thuộc tính trên các thành phần đích (phản ứng sử dụng classNamelàm thuộc tính thay vì class).

Qua npm , bạn sẽ chạy folowing

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

Nếu bootstrap 4, cũng thêm popper.js

npm install popper.js --save

Thêm phần sau (dưới dạng đối tượng mới) vào mảng cấu hình webpack của bạnloaders: [

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

Thêm phần sau vào chỉ mục hoặc bố cục của bạn

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

Bạn không thể sử dụng các thành phần Javascript dựa trên Bootstrap Jquery trong ứng dụng React, vì bất kỳ điều gì cố gắng thao túng DOM bên ngoài React đều bị coi là thực hành xấu. Ở đây bạn có thể đọc thêm thông tin về nó .

Cách đưa Bootstrap vào ứng dụng React của bạn:

1) Khuyến nghị . Bạn có thể bao gồm các tệp CSS thô của Bootstrap như các câu trả lời khác chỉ định.

2) Hãy xem thư viện Reac-bootstrap . Nó được viết riêng cho React.

3) Đối với Bootstrap 4, có Reacstrap

Tặng kem

Ngày nay, tôi thường tránh các thư viện Bootstrap cung cấp các thành phần sẵn sàng để sử dụng (Reacstrap hoặc Reacstrap đã đề cập ở trên). Khi bạn trở nên phụ thuộc vào đạo cụ họ thực hiện (bạn không thể thêm hành vi tùy chỉnh bên trong chúng) và bạn mất quyền kiểm soát DOM mà các thành phần này tạo ra.

Vì vậy, chỉ sử dụng CSS Bootstrap hoặc bỏ Bootstrap. Một nguyên tắc chung là: Nếu không chắc bạn có cần hay không, bạn không cần. Tôi đã thấy rất nhiều ứng dụng bao gồm Bootstrap, nhưng chỉ sử dụng một lượng nhỏ CSS của nó và đôi khi phần lớn CSS này bị ghi đè bởi các kiểu tùy chỉnh.

Bạn chỉ có thể importtập tin css bất cứ nơi nào bạn muốn. Webpack sẽ cẩn thận để đóng gói css nếu bạn định cấu hình trình tải theo yêu cầu.

Cái gì đó như,

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

Và cấu hình webpack như,

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

Lưu ý: Bạn cũng phải thêm trình tải phông chữ, nếu không bạn sẽ gặp lỗi.

Tôi cũng có một kịch bản tương tự. Thiết lập của tôi được chỉ định dưới đây

npm install create-react-app

Điều này sẽ cung cấp cho bạn một thiết lập mã nồi hơi để bắt đầu. Chơi xung quanh với tệp App.js cho logic chính.

Sau này, bạn có thể sử dụng CDN bootstrap trong index.html được tạo bởi công cụ CLI. hoặc là

npm install bootstrap popper jquery

và sau đó chỉ cần bao gồm điều này trong tệp App.js.

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

Rất ít tác giả đã đề cập đến việc sử dụng thuộc tính className thay vì class, nhưng trong trường hợp của tôi, cả hai đều hoạt động như dưới đây. Nhưng nếu bạn sử dụng lớp và nhìn vào bảng điều khiển trong các công cụ dành cho nhà phát triển trên trình duyệt, bạn sẽ thấy lỗi khi sử dụng class. Thay vào đó, hãy sử dụng className.

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

Và đừng quên xóa nhập CSS mặc định để tránh xung đột với bootstrap.

Hy vọng rằng sẽ giúp, mã hóa hạnh phúc !!!

Vui lòng theo liên kết dưới đây để sử dụng bootstrap với React. https://react-bootstrap.github.io/

Để cài đặt :

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

------------------------------------HOẶC LÀ------------- ------------------------

Đặt Bootstrap CDN cho CSS vào thẻ của tệp index.html trong phản ứng và Bootstrap CDN cho Js trong thẻ của tệp index.html. Sử dụng className thay vì class theo bên dưới 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>

Câu trả lời đầy đủ để cung cấp cho bạn jquery và bootstrap vì jquery là một yêu cầu cho bootstrap.js:

Cài đặt jquery và bootstrap vào node_modules:

npm install bootstrap
npm install jquery

Nhập vào các thành phần của bạn bằng cách sử dụng filepath chính xác này:

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 

và thêm câu lệnh nhập này vào tệp index.js của bạn

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

hoặc Bạn chỉ có thể thêm CDN vào tệp index.html của mình.

Hy vọng điều này là hữu ích;)

Bước 1: sử dụng NPM cài đặt lệnh dưới đây

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

Bước 2: ví dụ lệnh nhập lệnh script.js chính

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

Bước 3: Các thành phần UI tham khảo trang web dưới đây Reacstrap.github.io

bạn có thể cài đặt nó dirctly qua

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

sau đó nhập những gì bạn thực sự cần từ bootstrap như:

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

// hoặc là

import  Button  from 'react-bootstrap';

và bạn cũng có thể cài đặt:

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

kiểm tra này bấm vào đây .

và đối với CSS, bạn có thể đọc liên kết này một cách cẩn thận

đọc ở đây

Sau khi cài đặt bootstrap trong dự án của bạn "npm install --save bootstrap@3.3.7", bạn phải di chuyển đến tệp index.js trong thư mục SRC của dự án và nhập bootstrap từ gói mô-đun nút.

nhập 'bootstrap / dist / css / bootstrap.min.css';

Nếu bạn thích bạn có thể nhận trợ giúp từ video này, chắc chắn nó sẽ giúp bạn rất nhiều.

Nhập Bootstrap trong dự án React

Tôi cố gắng với hướng dẫn:

npm install bootstrap
npm install jquery popper.js

sau đó trong 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();

Chỉ trong trường hợp nếu bạn có thể sử dụng yarnđược khuyến nghị cho các ứng dụng React,

bạn có thể làm,

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

Điều này sẽ thêm bootstrap như là một phụ thuộc vào bạn 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"
  }
}

Sau đó chỉ cần nhập bootstrapvào index.jstập tin của bạn .

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

Vì Bootstrap / Reactstrap đã phát hành phiên bản mới nhất của họ, tức là Bootstrap 4, bạn có thể sử dụng điều này bằng cách làm theo các bước sau

1. Điều hướng đến dự án của bạn
2. Mở thiết bị đầu cuối

3. Tôi giả sử npm đã được cài đặt và sau đó gõ lệnh sau

   npm install --save reactstrap react react-dom

Điều này sẽ cài đặt Reactstrap như một phụ thuộc trong dự án của bạn.

Đây là mã cho một nút được tạo bằng Reactstrap

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

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

Bạn có thể kiểm tra Reactstrap bằng cách truy cập trang chính thức của họ

Bằng cách nào đó, câu trả lời được chấp nhận chỉ nói về việc bao gồm tệp css từ bootstrap.

Nhưng tôi nghĩ câu hỏi này có liên quan đến câu hỏi ở đây - Bootstrap Dropdown không hoạt động trong React

Có một vài câu trả lời có thể giúp -

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

Nếu bạn sử dụng CRA (tạo ứng dụng phản ứng) trong dự án của mình, bạn có thể thêm điều này:

npm install react-bootstrap bootstrap

Nếu bạn sử dụng bootstrap trong ứng dụng của mình và nếu nó không hoạt động, thì hãy sử dụng cái này trong index.html:

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

Tôi đã làm như trên để giải quyết vấn đề tương tự. Hy vọng điều này hữu ích với bạn :-)

Tôi chỉ muốn thêm rằng việc cài đặt và nhập bootstrap trong tệp index.js của bạn sẽ không đủ để sử dụng các thành phần bootstrap. Mỗi khi bạn muốn sử dụng một thành phần bạn nên nhập nó, như: Tôi cần sử dụng một container và một hàng

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

Bạn nên nhập vào tập tin js của bạn

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

Dưới đây là cách bao gồm bootstrap mới nhất https://react-bootstrap.github.io/getting-started/int sinhtion

1.Cài đặt

npm cài đặt Reac-bootstrap bootstrap

2. sau đó nhập vào App.js nhập 'bootstrap / dist / css / bootstrap.min.css';

3. Sau đó, bạn cần nhập các thành phần mà bạn sử dụng tại ứng dụng của mình, ví dụ Nếu bạn sử dụng thanh điều hướng, nút điều hướng, nút, biểu mẫu, biểu mẫu, sau đó nhập tất cả các mục như sau:

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