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

135

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를 포함시키는 방법"입니다. 반응 형 앱에 부트 스트랩이 포함되도록 설정하는 방법은 무엇입니까?

twitter-bootstrap  reactjs  webpack 
— 메훌 말리
소스
백엔드에서 Node.js를 사용하고 있습니까?
— DanielKhan
HTML 페이지에서 Bootstrap 파일을 가져 오기만하면됩니다.
— Mistalis
@DanielKhan : 아니요, Node.js를 사용하지 않습니다.
— Mehul Mali
적은 버전의 부트 스트랩 또는 일반 CSS를 사용하고 있습니까? 후자는 CDN 버전을 사용하는 CSS를 포함하고 JavaScript 부분에 대한 부트 스트랩을 반응시킵니다.
— DanielKhan
@DanielKhan 나는 일반 CSS를 사용했습니다. CDN하고 싶지 않습니다. node_modules의 부트 스트랩을 사용하고 싶습니다.
— Mehul Mali

답변:

245

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

— 프라 빈 MP
소스
1
Bootstrap 4를 사용하려면 다음 명령을 사용하십시오. npm install bootstrap@4.0.0-alpha.6 --save (현재 위의 설치 명령은 3.3.7 인 마지막 안정 버전의 Bootstrap을 설치합니다)
— lgants
5
Relative imports outside of src/ are not supported.
— riv December
3
html 템플릿으로 링크하지 않는 이유를 알 수 없습니다
— ICanKindOfCode
2
해결책은 여기에 설명되어 있습니다 : github.com/facebook/create-react-app/issues/301
— Enrico Giurin
16
JS 파일은 어떻습니까? jquery bootstrap.js
— molikh
49

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';
— Blamb
소스
4
완벽한 최신 답변 중 하나 +1
— Sushin Pv
33

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의 대부분이 사용자 정의 스타일로 재정의되었습니다.

— 쇼타
소스
1
옵션 1)을 사용하면 Bootstrap Javascript (및 jquery)를 어떻게 포함합니까? 아니면 그렇지 않습니까?
— LordAlpaca
1
불행히도 react-bootstrap이나 reactstrap은 아직 Bootstrap 4를 지원하지 않습니다.
— Zim
1
"부츠 스트랩을 떠나"는 아주 실용적인 옵션입니다. 훌륭한 조언.
@Zim 이제 그들은!
— Marianna S.
17

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

같은 것

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

그리고 웹팩 설정은

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

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

— 타 디카 카란
소스
1
답변 감사합니다. 스타일 로더 및 CSS 로더를위한 npm 모듈이 필요하십니까?
— Mehul Mali
1
그렇습니다 사용 style-loader css-loader로더 사용
— Thaadikkaaran
자, 이제 웹팩 (무엇을 포함하고 그것을 배우는 것이 끔찍한 또 다른 js-thing으로 사용되는 것과 같은 것)이 무엇인지 살펴보기 위해, 욕구는 내 튜토리얼 앱에서 bootstrap3 스타일 버튼을 사용하는 것이 었습니다. 't
— J.Guarin
1
J.Guarin @ 당신이 사용하는 경우 페이스 북의 생성 - - 응용 프로그램 반응 이 설정합니다 webpack으로 style-loader당신을 위해입니다.
— 피터 W
9

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

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 가져 오기를 제거하는 것을 잊지 마십시오.

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

— 덱 시스 아난드
소스
7

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>
— Aditya Parmar
소스
1
당신이 제공 한 링크는 죽었습니다
— David
David 님, 반응식에 index.js 파일의 <head> 태그에 CSS 용 Bootstrap CDN을 넣고 index.js 파일의 <body> 태그에 Js 용 Bootstrap CDN을 넣으십시오. 클래스의 클래스 이름을 사용하십시오.
— Aditya Parmar
5

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';
— 개빈 벨슨
소스
jquery를 가져올 필요가 없었으며 npm으로 만 설치하십시오. 부트 스트랩 자체적으로로드되는 것 같습니다
— Madacol
1
부트 스트랩 3에서는 일부 기능을 위해 jquery를로드해야합니다.
— GavinBelson
부트 스트랩 4.4.1을 사용 popper.js하는 경우에는 참조하는 npm 모듈 도 설치해야합니다 'bootstrap/dist/js/bootstrap.min.js'.
— Binita Bharati
1
좋은 대답은 부트 스트랩 3 에서이 문제에 부딪 import 'jquery/src/jquery'import 'jquery'
— Cipher
3 
npm install --save bootstrap

이 import 문을 index.js 파일에 추가하십시오.

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

또는 index.html 파일에 CDN을 추가 할 수 있습니다.

— 니힐
소스
jquery는 어떻습니까?
— ValRob
프로젝트에 jQuery를 추가하는 @ValRob : npm i jquery- 'jquery'에서 $를 저장
— Nikhil
3

이것이 도움이되기를 바랍니다.)

1 단계 : NPM을 사용하여이 벨로우즈 명령 설치

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

2 단계 : index.js 기본 스크립트 가져 오기 벨로우즈 명령 예

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

3 단계 : UI 구성 요소 참조 웹 사이트 reactstrap.github.io

— 비 디아 파티 칸다 사미
소스
1

통해 직접 설치할 수 있습니다 

$ 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

이것을 확인 하십시오 여기 를 클릭하십시오 .

CSS의 경우이 링크를 읽을 수 있습니다.

여기를 읽으십시오

— 메이지 호 리아
소스
1

프로젝트 "npm install --save bootstrap@3.3.7"에 부트 스트랩을 설치 한 후 프로젝트 SRC 폴더의 index.js 파일로 이동하고 노드 모듈 패키지에서 부트 스트랩을 가져와야합니다.

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

이 비디오를 통해 도움을받을 수 있다면 많은 도움이 될 것입니다.

React 프로젝트에서 가져 오기 부트 스트랩

— 요 수프 샤이 크
소스
1

나는 지시로 시도합니다.

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();
— 모르테 자 파스 니아
소스
0

만약 당신이 사용할 수 있다면 yarnReact 앱에 권장되는 것을 ,

넌 할 수있어,

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';
— 초기
소스
0

이후 부트 스트랩 / Reactstrap는 , 즉 자신의 최신 버전을 출시했습니다 부트 스트랩 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을 확인할 수 있습니다

— 하디 미르
소스
0

프로젝트에서 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"
/>

비슷한 문제를 해결하기 위해 위의 작업을 수행했습니다. 잘하면 이것은 당신에게 유용합니다 :-)

— 모하마드 알리
소스
0

index.js 파일에 부트 스트랩을 설치하고 가져 오는 것으로 부트 스트랩 구성 요소를 사용하기에 충분하지 않다는 것을 추가하고 싶습니다. 구성 요소를 사용할 때마다 다음과 같이 가져와야합니다. 컨테이너와 행을 사용해야합니다

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

js 파일로 가져와야합니다.

import {Container, Row, Col} from 'react-bootstrap';
— 카기 22
소스
문서에서 선호되는 방법은 각 구성 요소를 개별적으로 가져 오는 것입니다. 예를 들어 Row의 경우 'react-bootstrap / Row'에서 Row를 가져옵니다. 출처 : react-bootstrap.github.io/getting-started/…
— Dylan w
0

다음은 최신 부트 스트랩을 포함하는 방법입니다
https://react-bootstrap.github.io/getting-started/introduction

1. 설치

npm install react-bootstrap 부트 스트랩

  1. 그런 다음 App.js로 가져 오기 import 'bootstrap / dist / css / bootstrap.min.css';

  2. 그런 다음 앱에서 사용하는 구성 요소를 가져와야합니다. 예 : 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';
— M 하산 써니
소스
질문은 react-bootstrap에 관한 것이 아닙니다. 부트 스트랩 CSS 프레임 워크에 관한 것입니다. 이것은 이것 ( react-bootstrap.github.io )이 아니라 ( getbootstrap.com )
— Md. Rana
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.