Reactjs konusunda yeniyim, react uygulamama bootstrap eklemek istiyorum

Bootstrap'i şu şekilde yükledim: npm install bootstrap --save

Şimdi, react uygulamamda bootstrap css ve js'yi yüklemek istiyorum.

Web paketi kullanıyorum.

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;

Benim sorunum "node_modules'deki reactjs uygulamasına bootstrap css ve js'yi nasıl dahil edebilirim?" React uygulamama dahil edilecek önyükleme için nasıl kurulur?

React'te yeniyseniz ve create-react-appcli kurulumunu kullanıyorsanız , bootstrap'in en son sürümünü eklemek için aşağıdaki npm komutunu çalıştırın .

npm install --save bootstrap

veya

npm install --save bootstrap@latest

Ardından aşağıdaki import ifadesini index.jsdosyaya ekleyin . ( https://getbootstrap.com/docs/4.4/getting-started/webpack/#importing-compiled-css )

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

veya

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

classNamehedef elemanlarda öznitelik olarak kullanmayı unutmayın (react, classNameöznitelik yerine öznitelik olarak kullanır class).

Via NPM , folowing aday olacağını

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

Bootstrap 4 ise popper.js'yi de ekleyin

npm install popper.js --save

Aşağıdakileri (yeni bir nesne olarak) web paketi yapılandırma loaders: [ dizinize ekleyin

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

Aşağıdakileri dizine veya düzeninize ekleyin

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

React dışında DOM'u değiştirmeye çalışan her şey kötü uygulama olarak kabul edildiğinden, Bootstrap Jquery tabanlı Javascript bileşenlerini React uygulamasında kullanamazsınız. Burada bununla ilgili daha fazla bilgi okuyabilirsiniz .

React uygulamanıza Bootstrap nasıl dahil edilir:

1) Önerilir . Diğer yanıtların belirttiği gibi Bootstrap'in ham CSS dosyalarını dahil edebilirsiniz.

2) react-bootstrap kitaplığına bir göz atın . Yalnızca React için yazılmıştır.

3) Bootstrap 4 için reactstrap var

Bonus

Bu günlerde genellikle kullanıma hazır bileşenler sağlayan Bootstrap kitaplıklarından kaçınıyorum (yukarıda bahsedilen react-bootstrap veya reactstrap vb.). Aldıkları nesnelere bağımlı hale geldikçe (içlerine özel davranış ekleyemezsiniz) ve bu bileşenlerin ürettiği DOM üzerindeki kontrolünüzü kaybedersiniz.

Yani ya sadece Bootstrap CSS kullanın ya da Bootstrap'i devre dışı bırakın. Genel bir kural şudur: İhtiyaç duyup duymadığınızdan emin değilseniz, ihtiyacınız yoktur. Bootstrap içeren birçok uygulama gördüm, ancak bunun sadece küçük bir miktar CSS kullanıyor ve bazen bu CSS'nin çoğu özel stiller tarafından geçersiz kılınıyor.

Sadece importcss dosyasını istediğiniz yerde yapabilirsiniz . Yükleyiciyi gerektiği gibi yapılandırdıysanız, Webpack css'yi paketlemeye özen gösterecektir.

Gibi bir şey,

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

Ve web paketi yapılandırması,

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

Not: Yazı tipi yükleyicileri de eklemeniz gerekir, aksi takdirde hata alırsınız.

Benim de benzer bir senaryom vardı. Kurulumum aşağıda belirtildiği gibiydi

npm install create-react-app

Bu, başlamak için size bir kazan plakası kodu kurulumu sağlayacaktır. Ana mantık için App.js dosyasıyla oynayın.

Daha sonra, CLI aracı tarafından oluşturulan index.html'de bootstrap CDN'yi kullanabilirsiniz. veya

npm install bootstrap popper jquery

ve sonra bunu App.js dosyasına ekleyin.

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

Çok az yazar class yerine className özniteliğini kullandığından bahsetti, ancak benim durumumda her ikisi de aşağıdaki gibi çalışıyordu. Ancak sınıf kullanırsanız ve tarayıcıdaki geliştirici araçlarında konsola bakarsanız, sınıf kullanımında hata görürsünüz, bunun yerine sınıfAdı kullanın.

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

Bootstrap ile çakışmaları önlemek için varsayılan CSS içe aktarımlarını kaldırmayı unutmayın.

Umarım yardımcı olur, Mutlu kodlama !!!

React ile bootstrap kullanmak için lütfen aşağıdaki bağlantıyı izleyin. https://react-bootstrap.github.io/

Kurulum için :

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

------------------------------------VEYA------------- ------------------------

CSS için Bootstrap CDN'yi react'te index.html dosyasının etiketine ve Js için Bootstrap CDN'sini index.html dosyasının etiketine koyun. Sınıf yerine className kullanın aşağıdaki index.html'yi takip edin

<!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.js için bir gereklilik olduğundan size jquery ve bootstrap vermek için tam yanıt:

Jquery ve bootstrap'i node_modules'e yükleyin:

npm install bootstrap
npm install jquery

Tam olarak bu dosya yolunu kullanarak bileşenlerinizi içe aktarın:

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 

ve bu import ifadesini index.js dosyanıza ekleyin

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

veya index.html dosyanıza CDN ekleyebilirsiniz.

Umarım bu yardımcı olur;)

Adım 1: NPM'yi kullanarak bu feryat komutu yükleyin

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

Adım 2: örnek index.js ana komut dosyası içe aktarma bellow komutu

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

3. Adım: UI bileşenleri aşağıdaki reactstrap.github.io web sitesine yönlendirir

üzerinden doğrudan kurabilirsiniz

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

daha sonra gerçekten ihtiyacınız olan şeyi önyüklemeden içe aktarın:

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

// veya

import  Button  from 'react-bootstrap';

ve ayrıca kurabilirsiniz:

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

bunu kontrol edin buraya tıklayın .

CSS için bu bağlantıyı da dikkatlice okuyabilirsiniz.

burayı oku

"Npm install --save bootstrap@3.3.7" projenize bootstrap'i kurduktan sonra, proje SRC klasöründeki index.js dosyasına gitmeniz ve düğüm modül paketinden bootstrap'i içe aktarmanız gerekir.

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

İsterseniz bu videodan yardım alabilirsiniz, emin olun size çok yardımcı olacaktır.

React Projesinde Bootstrap'i İçe Aktar

Talimatla deniyorum:

npm install bootstrap
npm install jquery popper.js

daha sonra src / index.js'de:

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

Her ihtimale karşı kullanabiliyorsanız yarnReact uygulamaları için önerilenleri ,

yapabilirsin,

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

Bu, önyüklemeyi sizin package.jsoniçin de bir bağımlılık olarak ekleyecektir .

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

Bundan sonra sadece içe bootstrapsizin de index.jsdosyaya.

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

Yana Bootstrap / Reactstrap yani en son sürümünü yayımladı Bootstrap 4 adımları izleyerek bu kullanabilirsiniz

1. Projenize gidin
2. Terminali açın

3. Npm'nin zaten kurulu olduğunu varsayıyorum ve ardından aşağıdaki komutu yazıyorum

   npm install --save reactstrap react react-dom

Bu, Reactstrap'i projenize bağımlılık olarak kuracaktır.

İşte Reactstrap kullanılarak oluşturulan bir butonun kodu

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

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

Reactstrap'i resmi sayfalarını ziyaret ederek kontrol edebilirsiniz.

Her nasılsa kabul edilen cevap sadece bootstrap'tan css dosyasını dahil etmekten bahsediyor.

Ancak bu sorunun buradaki soruyla ilgili olduğunu düşünüyorum - Bootstrap Dropdown, React'te çalışmıyor

Yardımcı olabilecek birkaç cevap var -

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

Projenizde CRA (create-react-app) kullanıyorsanız, bunu ekleyebilirsiniz:

npm install react-bootstrap bootstrap

Uygulamanızda bootstrap kullanıyorsanız ve çalışmıyorsa, bunu index.html'de kullanın:

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

Yukarıdakileri benzer sorunu çözmek için yaptım. Umarım bu sizin için yararlıdır :-)

Sadece index.js dosyanıza bootstrap yüklemenin ve içeri aktarmanın bootstrap bileşenlerini kullanmak için yeterli olmayacağını eklemek istiyorum. Bir bileşeni her kullanmak istediğinizde, onu içe aktarmalısınız, örneğin: Bir kap ve bir satır kullanmam gerekiyor

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

Js dosyanıza aktarmalısınız

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

İşte en son önyüklemeyi nasıl ekleyeceğiniz
https://react-bootstrap.github.io/getting-started/introduction

1.Install

npm react-bootstrap bootstrap yüklemek

2. daha sonra App.js'ye içe aktarın 'bootstrap / dist / css / bootstrap.min.css'yi içe aktarın';

3. Ardından, uygulamanızda kullandığınız bileşenleri içe aktarmanız gerekir, örneğin navbar, nav, button, form, formcontrol kullanıyorsanız, bunların tümünü aşağıdaki gibi içe aktarın:

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