Reactjs ऐप में बूटस्ट्रैप सीएसएस और जेएस कैसे शामिल करें?

Question

मैं Reactjs के लिए newb हूं, मैं अपनी प्रतिक्रिया ऐप में बूटस्ट्रैप शामिल करना चाहता हूं

मैंने बूटस्ट्रैप द्वारा स्थापित किया है npm install bootstrap --save

अब, अपने प्रतिक्रिया एप में बूटस्ट्रैप सीएसएस और जेएस लोड करना चाहता हूं।

मैं वेबपैक का उपयोग कर रहा हूं।

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;

मेरा मुद्दा है "नोड_मॉड्यूल्स से बूटस्ट्रैप सीएसएस और जेएस को रिएक्जेज ऐप में कैसे शामिल किया जाए?" मेरी प्रतिक्रिया ऐप में शामिल करने के लिए बूटस्ट्रैप के लिए सेटअप कैसे करें?

Comments

क्या आप बैकएंड पर Node.js का उपयोग कर रहे हैं?

— डैनियल किचन

बस अपने HTML पेज में बूटस्ट्रैप फाइलें आयात करें

— मिस्टालिस

@DanielKhan: नहीं, मैं Node.js. का उपयोग नहीं कर रहा हूँ

— मेहुल माली

क्या आप बूटस्ट्रैप के कम संस्करण या सिर्फ सादे सीएसएस का उपयोग कर रहे हैं? बाद के लिए सीडीएन संस्करण का उपयोग करके सीएसएस को शामिल करें और हम जावास्क्रिप्ट भाग के लिए बूटस्ट्रैप पर प्रतिक्रिया करें।

— डैनियल किचन

@DanielKhan मैंने सादे सीएसएस का उपयोग किया है। मुझे CDN नहीं चाहिए। मैं नोड_मॉडल से बूटस्ट्रैप का उपयोग करना चाहता हूं।

— मेहुल माली

Answer 1

यदि आप प्रतिक्रिया करने के लिए नए हैं और create-react-appक्लि सेटअप का उपयोग कर रहे हैं , तो बूटस्ट्रैप के नवीनतम संस्करण को शामिल करने के लिए नीचे npm कमांड चलाएं ।

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)।

Comments

यदि आप बूटस्ट्रैप 4 का उपयोग करना चाहते हैं, तो निम्न कमांड का उपयोग करें: npm install bootstrap@4.0.0-alpha.6 --save (अब ऊपर की स्थापना कमांड बूटस्ट्रैप का अंतिम स्थिर संस्करण स्थापित करेगा, जो 3.3.7 है)

— lgants

Relative imports outside of src/ are not supported.

— riv

मुझे

— समझ

समाधान यहाँ वर्णित है: github.com/facebook/create-react-app/issues/301

— एनरिको ज्यूरिन

js फ़ाइलों के बारे में क्या? jquery bootstrap.js

— मोलिख

Answer 2

के जरिए Npm के , आप फ़ॉउलिंग चला रहे होंगे

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

यदि बूटस्ट्रैप 4 है, तो popper.js भी जोड़ें

npm install popper.js --save

निम्नलिखित (एक नई वस्तु के रूप में) को अपने वेबपैक विन्यास में जोड़ें loaders: [ सरणी में जोड़ें

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

अपने सूचकांक , या लेआउट में निम्नलिखित जोड़ें

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

Comments

तिथि के उत्तर में से एक सही उत्तर

— 9 पर सुशील Pv

Answer 3

आप प्रतिक्रिया ऐप में बूटस्ट्रैप जक्वेरी आधारित जावास्क्रिप्ट घटकों का उपयोग नहीं कर सकते हैं, क्योंकि रिएक्ट के बाहर डोम को हेरफेर करने की कोशिश करने वाली किसी भी चीज को बुरा अभ्यास माना जाता है। यहाँ आप इसके बारे में अधिक जानकारी पढ़ सकते हैं ।

अपने रिएक्ट ऐप में बूटस्ट्रैप कैसे शामिल करें:

1) की सिफारिश की । आप बूटस्ट्रैप की कच्ची सीएसएस फाइलें शामिल कर सकते हैं जैसा कि अन्य उत्तर निर्दिष्ट करते हैं।

2) प्रतिक्रिया-बूटस्ट्रैप लाइब्रेरी पर एक नज़र डालें । यह विशेष रूप से रिएक्ट के लिए लिखा गया है।

3) बूटस्ट्रैप 4 के लिए रिएस्ट्रैप है

बक्शीश

इन दिनों मैं आमतौर पर बूटस्ट्रैप पुस्तकालयों से बचता हूं जो घटकों का उपयोग करने के लिए तैयार हैं (उपर्युक्त प्रतिक्रिया-बूटस्ट्रैप या रिएस्ट्रैप और इसी तरह)। जैसा कि आप उन प्रॉप्स पर निर्भर होते जा रहे हैं जो आप लेते हैं (आप उनके अंदर कस्टम व्यवहार नहीं जोड़ सकते हैं) और आप डोम पर नियंत्रण खो देते हैं जो इन घटकों का उत्पादन करते हैं।

इसलिए या तो केवल बूटस्ट्रैप सीएसएस का उपयोग करें या बूटस्ट्रैप को बाहर छोड़ दें। अंगूठे का एक सामान्य नियम है: यदि आप सुनिश्चित नहीं हैं कि आपको इसकी आवश्यकता है, तो आपको इसकी आवश्यकता नहीं है। मैंने बहुत सारे एप्लिकेशन देखे हैं जिसमें बूटस्ट्रैप शामिल है, लेकिन इसकी सीएसएस की एकमात्र छोटी मात्रा का उपयोग करना और कभी-कभी इस सीएसएस का अधिकांश कस्टम शैलियों द्वारा ओवरराइड किया जाता है।

Comments

विकल्प 1 के साथ), आप बूटस्ट्रैप जावास्क्रिप्ट (और jquery) को कैसे शामिल करते हैं? या तुम नहीं?

— लॉर्डअल्पका

दुर्भाग्यवश न तो प्रतिक्रिया-बूटस्ट्रैप या प्रतिक्रियास्ट्रैप समर्थन बूटस्ट्रैप 4 अभी तक।

— Zim

"छोड़ दो बूटस्ट्रैप" एक बहुत व्यवहार्य विकल्प है। अच्छी सलाह।

@Zim अब वे करते हैं!

— मरिअना एस।

Answer 4

आप importजहां चाहें बस सीएसएस फाइल कर सकते हैं। यदि आपने लोडर को आवश्यक रूप से कॉन्फ़िगर किया है, तो वेब पैक सीएसएस को बंडल करने के लिए ध्यान रखेगा।

कुछ इस तरह,

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

और जैसे webpack config,

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

नोट: आपको फ़ॉन्ट लोडर भी जोड़ना होगा, अन्यथा आपको त्रुटि मिल जाएगी।

Comments

जवाब के लिए धन्यवाद। स्टाइल-लोडर और सीएसएस-लोडर के लिए किसी भी एनपीएम मॉड्यूल की आवश्यकता है?

— मेहुल माली

हां उपयोग style-loader css-loaderलोडर का उपयोग करें

— थाडिक्करन

ठीक है, अब देखना है कि वेबपैक क्या है (एक छोटी सी चीज जैसे किसी चीज़ को शामिल करना और उसका उपयोग करना एक और भयानक js-thing में बदल गया), ny एस्पिरेशन को मेरे ट्यूटोरियल ऐप में बूटस्ट्रैव स्टाइल बटन का उपयोग करना था .... अब मैं करूँगा

— जे.गुरिन

@ J.Guarin आप उपयोग कर रहे हैं फेसबुक के बनाने प्रतिक्रिया एप्लिकेशन के तहत यह स्थापित करेगा webpackसाथ style-loaderआप के लिए।

— पीटर डब्ल्यू

Answer 5

मेरा भी कुछ ऐसा ही नजारा था। मेरा सेटअप नीचे इंगित किया गया था

npm install create-react-app

यह आपको शुरू करने के लिए बॉयलर-प्लेट कोड सेटअप प्रदान करेगा। मुख्य तर्क के लिए App.js फ़ाइल के साथ खेलें।

बाद में आप CLI टूल द्वारा बनाए गए index.html में बूटस्ट्रैप CDN का उपयोग कर सकते हैं। या

npm install bootstrap popper jquery

और फिर इसे App.js फ़ाइल में शामिल करें।

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

कुछ लेखकों ने कक्षा के बजाय क्लासनाम विशेषता का उपयोग करने का उल्लेख किया है, लेकिन मेरे मामले में, दोनों नीचे की तरह काम कर रहे थे। लेकिन यदि आप क्लास का उपयोग करते हैं और ब्राउज़र पर डेवलपर टूल में कंसोल देखते हैं, तो आपको क्लास का उपयोग करने के लिए त्रुटि दिखाई देगी। इसके बजाय क्लासनेम का उपयोग करें।

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

और बूटस्ट्रैप के साथ संघर्ष से बचने के लिए डिफ़ॉल्ट सीएसएस आयात को हटाने के लिए मत भूलना।

आशा है कि मदद करता है, खुश कोडिंग !!!

Answer 6

प्रतिक्रिया के साथ बूटस्ट्रैप का उपयोग करने के लिए कृपया नीचे दिए गए लिंक का अनुसरण करें। https://react-bootstrap.github.io/

स्थापना के लिए:

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

------------------------------------ या ------------- ------------------------

CSS के लिए bootstrap CDN को index.html फ़ाइल के टैग में प्रतिक्रिया के लिए और bootstrap CDN को index के लिए index.html फ़ाइल के टैग में रखें। Index.html के नीचे class follow के बजाय className का उपयोग करें

<!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>

Comments

आपके द्वारा प्रदत्त लिंक मृत है

— डेविड

हे डेविड, सीएसएस के लिए बूटस्ट्रैप सीडीएन को <head> index.js फ़ाइल में टैग करें और प्रतिक्रिया के लिए बूटस्ट्रैप CDN <body> js फ़ाइल के टैग में <body> टैग के लिए रखें। वर्ग के वर्गनाम का उपयोग करें।

— आदित्य परमार

Answer 7

आपको jquery और बूटस्ट्रैप देने के लिए पूर्ण उत्तर क्योंकि 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';

Comments

मुझे jquery आयात करने की आवश्यकता नहीं थी, केवल इसे npm के साथ स्थापित करें। मुझे लगता है कि बूटस्ट्रैप इसे खुद से लोड करता है

— मैडाकोल

बूटस्ट्रैप 3 में, आपको कुछ कार्यक्षमता के लिए लोड किए गए jquery की आवश्यकता है

— GavinBelson

यदि आप बूटस्ट्रैप 4.4.1 का उपयोग कर रहे हैं, तो आपको popper.jsएनपीएम मॉड्यूल भी स्थापित करना होगा जो इसके द्वारा संदर्भित है 'bootstrap/dist/js/bootstrap.min.js'।

— बिनीता भारती

अच्छा जवाब, बूटस्ट्रैप 3 के साथ इस समस्या में भाग गया और इसे तय import 'jquery/src/jquery'करने के बजाय उपयोग किया import 'jquery'गया

— सिफर

Answer 8

npm install --save bootstrap 

और इस आयात विवरण को अपनी index.js फ़ाइल में जोड़ें

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

या आप अपनी index.html फ़ाइल में बस CDN जोड़ सकते हैं।

Comments

jquery के बारे में क्या?

— वल्रोब जूल

@ValRob अपने प्रोजेक्ट में jquery जोड़ने के लिए: npm i jquery --save फिर 'jquery' से $ $ आयात करें

— निखिल

Answer 9

आशा है कि यह उपयोगी है;)

चरण 1: एनपीएम का उपयोग करके इस bellow कमांड को स्थापित करें

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

चरण 2: उदाहरण index.js मुख्य स्क्रिप्ट आयात bellow कमांड

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

चरण 3: यूआई घटक bellow वेबसाइट reactstrap.github.io को संदर्भित करते हैं

Answer 10

आप इसे dirctly के माध्यम से स्थापित कर सकते हैं

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

फिर आयात करें कि आपको वास्तव में बूटस्ट्रैप से क्या चाहिए:

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

// या

import  Button  from 'react-bootstrap';

और भी आप स्थापित कर सकते हैं:

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

इसे देखें यहां क्लिक करें ।

और सीएसएस के लिए आप भी इस लिंक को हिंडोला पढ़ सकते हैं

यहाँ पढ़ें

Answer 11

अपने प्रोजेक्ट में बूटस्ट्रैप स्थापित करने के बाद "npm install --save bootstrap@3.3.7" आपको प्रोजेक्ट SRC फ़ोल्डर में index.js फ़ाइल पर जाना होगा और नोड मॉड्यूल पैकेज से बूटस्ट्रैप आयात करना होगा।

आयात 'बूटस्ट्रैप / डिस्ट / css / bootstrap.min.css';

यदि आप चाहें तो इस वीडियो की मदद ले सकते हैं, निश्चित रूप से यह आपकी बहुत मदद करेगा।

आयात बूटस्ट्रैप रिएक्ट प्रोजेक्ट में

Answer 12

मैं निर्देश के साथ कोशिश करता हूं:

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

Answer 13

यदि आप उपयोग कर सकते हैं तो बस yarn जो प्रतिक्रिया क्षुधा के लिए सिफारिश की है,

तुम कर सकते हो,

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

यह बूटस्ट्रैप को आपकी निर्भरता के 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';

Answer 14

चूंकि बूटस्ट्रैप / रिएक्टस्ट्रैप ने अपना नवीनतम संस्करण यानी बूटस्ट्रैप 4 जारी किया है, आप इन चरणों का पालन करके इसका उपयोग कर सकते हैं

1. अपने प्रोजेक्ट पर नेविगेट करें
2. टर्मिनल खोलें

3. मुझे लगता है कि एनपीएम पहले से ही स्थापित है और फिर निम्न कमांड टाइप करें

   npm install --save reactstrap react react-dom

यह आपकी परियोजना में एक निर्भरता के रूप में रिएक्टस्ट्रैप स्थापित करेगा।

यहां रिएक्टस्ट्रैप का उपयोग करके बनाए गए बटन के लिए कोड है

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

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

आप उनके ऑफिशियल पेज पर जाकर रिएक्टस्ट्रैप की जांच कर सकते हैं

Answer 15

किसी तरह स्वीकृत उत्तर केवल बूटस्ट्रैप से सीएसएस फ़ाइल सहित बात कर रहा है।

लेकिन मुझे लगता है कि यह प्रश्न यहां से संबंधित है - बूटस्ट्रैप ड्रॉपडाउन प्रतिक्रिया में काम नहीं कर रहा है

ऐसे कुछ उत्तर हैं जो मदद कर सकते हैं -

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

Answer 16

यदि आप अपने प्रोजेक्ट में CRA (create-react-app) का उपयोग करते हैं, तो आप इसे जोड़ सकते हैं:

npm install react-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"
/>

मैंने इसी तरह की समस्या को हल करने के लिए उपरोक्त किया है। उम्मीद है कि यह आपके लिए उपयोगी है :-)

Answer 17

मैं आपके index.js फ़ाइल में बूटस्ट्रैप को स्थापित करने और आयात करने के लिए जोड़ना चाहता हूँ, बूटस्ट्रैप घटकों का उपयोग करने के लिए पर्याप्त नहीं होगा। हर बार जब आप एक घटक का उपयोग करना चाहते हैं, तो आपको इसे आयात करना चाहिए, जैसे: मुझे एक कंटेनर और एक पंक्ति का उपयोग करने की आवश्यकता है

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

आपको अपनी js फ़ाइल में आयात करना चाहिए

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

Comments

प्रलेखन में पसंदीदा तरीका प्रत्येक घटक को व्यक्तिगत रूप से आयात करना है। उदाहरण के लिए, यह 'प्रतिक्रिया-बूटस्ट्रैप / पंक्ति' से पंक्ति आयात करता है; स्रोत: react-bootstrap.github.io/getting-started/...

— डायलन डब्ल्यू

Answer 18

यहाँ नवीनतम बूटस्ट्रैप को शामिल करने का तरीका बताया गया है
https://react-bootstrap.github.io/getting-start//

1.Install

npm प्रतिक्रिया-बूटस्ट्रैप बूटस्ट्रैप स्थापित करें

2. इसके बाद App.js आयात 'बूटस्ट्रैप / डिस्ट / css / bootstrap.min.css' पर आयात करें;

3. फिर आपको उन घटकों को आयात करने की आवश्यकता है जो आप अपने ऐप पर उपयोग करते हैं, उदाहरण यदि आप navbar, nav, button, form, 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';

Comments

सवाल प्रतिक्रिया-बूटस्ट्रैप के बारे में नहीं है। यह बूटस्ट्रैप सीएसएस फ्रेमवर्क के बारे में है। इसका मतलब है कि नहीं इस ( react-bootstrap.github.io ), लेकिन यह एक ( getbootstrap.com )

— । मोहम्मद राणा