[twitter-bootstrap] reactjs 앱에 부트 스트랩 CSS와 JS를 포함시키는 방법은 무엇입니까?

Program / 글쓴이

reactjs를 처음 사용하고 반응식 앱에 부트 스트랩을 포함하고 싶습니다.

부트 스트랩을 설치했습니다. npm install bootstrap --save

이제 반응 앱에 부트 스트랩 CSS와 js를로드하려고합니다.

웹팩을 사용하고 있습니다.

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;

내 문제는 “node_modules의 reactjs 앱에 부트 스트랩 CSS와 JS를 포함시키는 방법”입니다. 반응 형 앱에 부트 스트랩이 포함되도록 설정하는 방법은 무엇입니까?

답변

React를 처음 사용하고 create-react-appcli setup을 사용 하는 경우 아래 npm 명령을 실행 하여 최신 버전의 부트 스트랩을 포함하십시오.

npm install --save bootstrap

또는 

npm install --save bootstrap@latest

그런 다음 다음 import 문을 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 ).

답변

npm을 통해 다음을 실행합니다.

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

부트 스트랩 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';

답변

React 외부에서 DOM을 조작하려고 시도하는 것은 나쁜 습관으로 간주되므로 React 앱에서 Bootstrap Jquery 기반 Javascript 구성 요소를 사용할 수 없습니다. 여기서 자세한 정보를 읽을 수 있습니다 .

React 앱에 부트 스트랩을 포함시키는 방법 :

1) 권장 . 다른 답변에서 지정한대로 Bootstrap의 원시 CSS 파일을 포함 할 수 있습니다.

2) react-bootstrap 라이브러리를 살펴보십시오 . React 전용으로 작성되었습니다.

3) 부트 스트랩 4의 경우 반응 스트랩이 있습니다

보너스

요즘에는 일반적으로 구성 요소 (위의 react-bootstrap 또는 reactstrap 등)를 사용할 준비가 된 Bootstrap 라이브러리를 피합니다. 소품에 의존하게됨에 따라 (도구 안에 사용자 정의 동작을 추가 할 수 없음) 이러한 구성 요소가 생성하는 DOM에 대한 제어 권한을 잃게됩니다.

따라서 Bootstrap CSS 만 사용하거나 Bootstrap을 그대로 두십시오. 일반적인 경험 규칙은 다음과 같습니다. 필요한지 확실하지 않으면 필요하지 않습니다. Bootstrap을 포함하는 많은 응용 프로그램을 보았지만 CSS의 작은 양만 사용하고 때로는이 CSS의 대부분이 사용자 정의 스타일로 재정의되었습니다.

답변

원하는 위치 import에 CSS 파일 만 있으면됩니다. 필요에 따라 로더를 구성한 경우 Webpack은 CSS 번들을 관리합니다.

같은 것

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

그리고 웹팩 설정은

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

참고 : 글꼴 로더도 추가해야합니다. 그렇지 않으면 오류가 발생합니다.

답변

나도 비슷한 시나리오를 가지고 있었다. 내 설정은 아래와 같습니다

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'

클래스 대신 className 속성을 사용한다고 언급 한 저자는 거의 없지만 제 경우에는 아래와 같이 작동했습니다. 그러나 클래스를 사용하고 브라우저의 개발자 도구에서 콘솔을 보면 클래스 사용 오류가 표시되므로 className을 대신 사용하십시오.

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

부트 스트랩과의 충돌을 피하기 위해 기본 CSS 가져 오기를 제거하는 것을 잊지 마십시오.

도움이 되길 바랍니다, 행복한 코딩 !!!

답변

React와 함께 부트 스트랩을 사용하려면 아래 링크를 따르십시오.
https://react-bootstrap.github.io/

설치 :

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

————————————또는————- ————————

react.index.html 파일의 태그에 CSS 용 Bootstrap CDN을 넣고 index.html 파일의 태그에 Js 용 Bootstrap CDN을 넣으십시오. 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>

답변

jquery는 bootstrap.js의 요구 사항이므로 jquery와 bootstrap을 제공하는 전체 답변 :

jquery와 부트 스트랩을 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';