ฉันใหม่เพื่อตอบสนองฉันต้องการรวม bootstrap ในแอพตอบโต้ของฉัน

ฉันติดตั้ง bootstrap โดย npm install bootstrap --save

ตอนนี้ต้องการโหลด bootstrap css และ js ในแอพ react ของฉัน

ฉันใช้ 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;

ปัญหาของฉันคือ "วิธีรวม bootstrap css และ js ในแอป reactjs จาก node_modules?" จะติดตั้ง bootstrap เพื่อรวมไว้ในแอพ react ของฉันได้อย่างไร?

หากคุณยังใหม่ต่อcreate-react-appการโต้ตอบและใช้การตั้งค่า cli ให้เรียกใช้คำสั่งnpmด้านล่างเพื่อรวม bootstrap เวอร์ชันล่าสุด

npm install --save bootstrap

หรือ

npm install --save bootstrap@latest

จากนั้นเพิ่มคำสั่งการนำเข้าต่อไปนี้ไปยังindex.jsไฟล์ ( https://getbootstrap.com/docs/4.4/getting-started/webpack/#importing-compiled-css )

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

หรือ

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

อย่าลืมใช้classNameเป็นแอตทริบิวต์ในองค์ประกอบเป้าหมาย (ตอบกลับใช้classNameเป็นแอตทริบิวต์แทนclass)

Via NPMคุณจะวิ่ง folowing

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

หาก bootstrap 4 ให้เพิ่ม popper.js

npm install popper.js --save

เพิ่มรายการต่อไปนี้ (เป็นวัตถุใหม่) ลงในอาร์เรย์การกำหนดค่าwebpack ของคุณloaders: [

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

เพิ่มสิ่งต่อไปนี้ในของคุณ ดัชนีหรือเลย์เอาต์ของคุณ

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

คุณไม่สามารถใช้ส่วนประกอบ Javascript ที่ใช้ Bootstrap Jquery ในแอป React เพราะสิ่งใดก็ตามที่พยายามจัดการ DOM นอก React นั้นถือว่าเป็นการปฏิบัติที่ไม่ดี คุณสามารถอ่านข้อมูลเพิ่มเติมเกี่ยวกับมันได้ที่นี่นี่

วิธีรวม Bootstrap ในแอป React ของคุณ:

1) ได้รับการแนะนำ คุณสามารถรวมไฟล์ CSS ดิบของ Bootstrap ตามที่ระบุคำตอบอื่น ๆ

2) ลองดูที่ห้องสมุดreact-bootstrap มันถูกเขียนขึ้นสำหรับ React โดยเฉพาะ

3) สำหรับ Bootstrap 4 มีreactstrap

โบนัส

ทุกวันนี้ฉันมักจะหลีกเลี่ยงไลบรารี Bootstrap ที่เตรียมใช้งานส่วนประกอบ (ดังกล่าวข้างต้น react-bootstrap หรือ reactstrap เป็นต้น) ในขณะที่คุณกำลังพึ่งพาอุปกรณ์ประกอบฉากที่พวกเขาทำ (คุณไม่สามารถเพิ่มพฤติกรรมที่กำหนดเองภายในพวกเขาได้) และคุณสูญเสียการควบคุม DOM ที่ส่วนประกอบเหล่านี้ผลิต

ดังนั้นควรใช้เฉพาะ Bootstrap CSS หรือปล่อย Bootstrap ออกมา กฎทั่วไปคือ: ถ้าไม่แน่ใจว่าคุณต้องการคุณไม่ต้องการมัน ฉันเคยเห็นแอปพลิเคชั่นมากมายซึ่งรวมถึง Bootstrap แต่การใช้ CSS เพียงเล็กน้อยเท่านั้นและบางครั้ง CSS ส่วนใหญ่นี้ถูกแทนที่ด้วยสไตล์ที่กำหนดเอง

คุณสามารถเพียงimportไฟล์ css ทุกที่ที่คุณต้องการ Webpack จะดูแลชุด CSS หากคุณกำหนดค่าตัวโหลดตามที่ต้องการ

สิ่งที่ต้องการ,

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

และ webpack config ชอบ

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

หมายเหตุ: คุณต้องเพิ่มตัวโหลดฟอนต์ด้วยมิฉะนั้นคุณจะได้รับข้อผิดพลาด

ฉันก็มีสถานการณ์คล้ายกัน การตั้งค่าของฉันตามที่ระบุไว้ด้านล่าง

npm install create-react-app

สิ่งนี้จะช่วยให้คุณมีการตั้งค่ารหัสแผ่นหม้อน้ำเพื่อเริ่มต้น เล่นกับไฟล์ App.js สำหรับตรรกะหลัก

หลังจากนั้นคุณสามารถใช้ bootstrap CDN ใน index.html ที่สร้างโดยเครื่องมือ CLI หรือ

npm install bootstrap popper jquery

จากนั้นก็รวมสิ่งนี้ไว้ในไฟล์ App.js

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

มีผู้เขียนเพียงไม่กี่คนที่กล่าวถึงโดยใช้แอตทริบิวต์ className แทนคลาส แต่ในกรณีของฉันทั้งคู่ทำงานเหมือนด้านล่าง แต่ถ้าคุณใช้คลาสและดูที่คอนโซลในเครื่องมือสำหรับนักพัฒนาบนเบราว์เซอร์คุณจะเห็นข้อผิดพลาดในการใช้คลาสดังนั้นใช้ className แทน

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

และอย่าลืมลบการนำเข้า CSS เริ่มต้นเพื่อหลีกเลี่ยงความขัดแย้งกับ bootstrap

หวังว่าจะช่วยได้มีความสุขการเข้ารหัส !!!

โปรดทำตามลิงค์ด้านล่างเพื่อใช้ bootstrap กับ React https://react-bootstrap.github.io/

สำหรับการติดตั้ง:

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

------------------------------------หรือ------------- ------------------------

ใส่ Bootstrap CDN สำหรับ CSS ในแท็กของไฟล์ index.html ในการตอบสนองและ Bootstrap CDN สำหรับ Js ในแท็กของไฟล์ index.html ใช้ className แทนคลาสตามด้านล่าง 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>

คำตอบแบบเต็มเพื่อให้ jQuery และ bootstrap ตั้งแต่ jquery เป็นข้อกำหนดสำหรับ bootstrap.js:

ติดตั้ง jquery และ bootstrap ไปที่ node_modules:

npm install bootstrap
npm install jquery

นำเข้าส่วนประกอบของคุณโดยใช้ไฟล์พา ธ ที่แน่นอนนี้:

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 

และเพิ่มคำสั่งนำเข้านี้ลงในไฟล์ index.js ของคุณ

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

หรือคุณสามารถเพิ่ม CDN ในไฟล์ index.html ของคุณ

หวังว่านี่จะเป็นประโยชน์;)

ขั้นตอนที่ 1: ใช้ NPM ติดตั้งคำสั่งร้องนี้

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

ขั้นตอนที่ 2: ตัวอย่างคำสั่งดัชนีหลักสคริปต์นำเข้าร้อง

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

ขั้นตอนที่ 3: องค์ประกอบของ UI อ้างอิงเว็บไซต์ร้องร้อง reactstrap.github.io

คุณสามารถติดตั้งมัน dirctly ผ่านทาง

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

จากนั้นนำเข้าสิ่งที่คุณต้องการจาก bootstrap เช่น:

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

// หรือ

import  Button  from 'react-bootstrap';

และคุณยังสามารถติดตั้ง:

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

ตรวจสอบนี้คลิกที่นี่

และสำหรับ CSS คุณสามารถอ่านลิงค์นี้ได้เช่นกัน

อ่านที่นี่

หลังจากติดตั้ง bootstrap ในโครงการ "npm install --save bootstrap@3.3.7" คุณต้องย้ายไปที่ไฟล์ index.js ในโฟลเดอร์ SRC โครงการและนำเข้า bootstrap จากแพ็คเกจโมดูลโหนด

นำเข้า 'bootstrap / dist / css / bootstrap.min.css';

ถ้าคุณชอบคุณสามารถรับความช่วยเหลือจากวิดีโอนี้ได้แน่นอนว่ามันจะช่วยคุณได้มาก

นำเข้า Bootstrap ในโครงการตอบสนอง

ฉันลองด้วยคำแนะนำ:

npm install bootstrap
npm install jquery popper.js

จากนั้นใน 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();

ในกรณีที่คุณสามารถใช้ yarnสิ่งที่แนะนำสำหรับแอป React

คุณทำได้,

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

สิ่งนี้จะเพิ่ม bootstrap เป็นการพึ่งพาของคุณ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"
  }
}

หลังจากนั้นเพียงนำเข้าไฟล์bootstrapของคุณindex.js

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

ตั้งแต่Bootstrap / Reactstrapได้เปิดตัวเวอร์ชั่นล่าสุดของพวกเขาเช่นBootstrap 4คุณสามารถใช้สิ่งนี้ได้โดยทำตามขั้นตอนเหล่านี้

1. นำทางไปยังโครงการของคุณ
2. เปิดเครื่อง

3. ฉันคิดว่าติดตั้ง NPM แล้วและพิมพ์คำสั่งต่อไป

   npm install --save reactstrap react react-dom

สิ่งนี้จะติดตั้ง Reactstrap เป็นการอ้างอิงในโครงการของคุณ

นี่คือรหัสสำหรับปุ่มที่สร้างขึ้นโดยใช้ Reactstrap

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

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

คุณสามารถตรวจสอบ Reactstrap ได้โดยไปที่หน้าอย่างเป็นทางการของพวกเขา

อย่างใดคำตอบที่ได้รับการยอมรับเป็นเพียงการพูดคุยเกี่ยวกับการรวมไฟล์ css จาก bootstrap

แต่ฉันคิดว่าคำถามนี้เกี่ยวข้องกับคำถามที่นี่ - Bootstrap Dropdown ไม่ทำงานใน React

มีสองคำตอบที่สามารถช่วยได้ -

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

หากคุณใช้ CRA (create-react-app) ในโครงการของคุณคุณสามารถเพิ่มสิ่งนี้:

npm install react-bootstrap bootstrap

หากคุณใช้ bootstrap ในแอพของคุณและถ้ามันไม่ทำงานให้ใช้สิ่งนี้ใน index.html:

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

ฉันทำตามวิธีข้างต้นเพื่อแก้ปัญหาที่คล้ายกัน หวังว่านี่จะเป็นประโยชน์กับคุณ :-)

ฉันแค่ต้องการเพิ่มว่าการติดตั้งและนำเข้า bootstrap ในไฟล์ index.js ของคุณนั้นไม่เพียงพอสำหรับการใช้คอมโพเนนต์ bootstrap ทุกครั้งที่คุณต้องการใช้ส่วนประกอบคุณควรนำเข้าเช่น: ฉันต้องใช้คอนเทนเนอร์และแถว

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

คุณควรนำเข้าไฟล์ js ของคุณ

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

นี่คือวิธีรวม bootstrap ล่าสุด
https://react-bootstrap.github.io/getting-started/introduction

1.Install

npm ติดตั้ง react-bootstrap bootstrap

2. จากนั้นนำเข้าสู่ App.js นำเข้า 'bootstrap / dist / css / bootstrap.min.css';

3. จากนั้นคุณจะต้องนำเข้าส่วนประกอบที่คุณใช้ในแอปของคุณตัวอย่างเช่นหากคุณใช้ navbar, nav, ปุ่ม, แบบฟอร์ม, formcontrol จากนั้นนำเข้าสิ่งเหล่านี้ทั้งหมดด้านล่าง:

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