programing tip

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

itbloger 2020. 8. 3. 08:41

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

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-app cli 설정을 사용하는 경우. 그런 다음 아래 NPM 명령을 실행하여 최신 버전의 부트 스트랩을 포함하십시오.

 npm install --save bootstrap

또는

npm install --save bootstrap@4.0.0-alpha.6

그런 다음 index.js 파일에 다음 import 문을 추가 하십시오.

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

또는

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

className 을 속성 으로 사용하는 것을 잊지 마십시오 (react는 class 대신 className 을 속성으로 사용합니다 )

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' }]

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

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>

npm install --save bootstrap

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

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

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

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

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

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

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

그런 다음 부트 스트랩에서 실제로 필요한 것을 가져옵니다.

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

// 또는

import  Button  from 'react-bootstrap';

and also you can install :

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

check this out click here .

and for the CSS you can read this link also carfuly

read here

Full answer to give you jquery and bootstrap since jquery is a requirement for bootstrap.js:

Install jquery and bootstrap into node_modules:

npm install bootstrap
npm install jquery

Import in your components using this exact filepath:

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

Just in case if you can use yarn which is recommended for React apps,

you can do,

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

This will add the bootstrap as a dependency to your package.json as well.

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

After that just import bootstrap in your index.js file.

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

After installing bootstrap in your project "npm install --save bootstrap@3.3.7" you have to move to the index.js file in the project SRC folder and import bootstrap from node module package.

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

If you like you can get help from this video, sure it will help you a lot.

Import Bootstrap In React Project

Since Bootstrap/Reactstrap has released their latest version i.e. Bootstrap 4 you can use this by following these steps

Navigate to your project
Open the terminal
I assume npm is already installed and then type the following command

npm install --save reactstrap react react-dom

This will install Reactstrap as a dependency in your project.

Here is the code for a button created using Reactstrap

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

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

You can check the Reactstrap by visiting their offical page

Somehow the accepted answer is only talking about including css file from bootstrap.

But I think this question is related to the one here - Bootstrap Dropdown not working in React

There are couple of answers that can help -

If you use CRA(create-react-app) in your project, you can add this:

npm install react-bootstrap bootstrap

If you use bootstrap in your app and if it's not working, then use this in index.html :

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

I did the above to solve similar problem. Hopefully this is useful to you :-)

I just want to add that installing and importing bootstrap in your index.js file won't be enough for using bootstrap components. Every time you want to use a component you should import it, like: I need to use a container and a row

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

You should import in your js file

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

I try with instruction:

npm install bootstrap
npm install jquery popper.js

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

참고URL : https://stackoverflow.com/questions/40037657/how-to-include-bootstrap-css-and-js-in-reactjs-app

'programing tip' 카테고리의 다른 글

Java로 현재 작업 디렉토리를 얻는 방법? (0)	2020.08.03
Foundation에서 요일을 어떻게 알 수 있습니까? (0)	2020.08.03
HTTP를 통해 안전하게 비밀번호를 보내는 방법은 무엇입니까? (0)	2020.08.02
메이븐 빌드에서 junit 테스트를 병렬로 실행합니까? (0)	2020.08.02
스칼라 배우 : 수신 대 반응 (0)	2020.08.02

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

itbloger

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

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

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

보너스

'programing tip' 카테고리의 다른 글

'programing tip'의 다른글

티스토리툴바

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

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

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

보너스

'programing tip' 카테고리의 다른 글

'programing tip'의 다른글

관련글

티스토리툴바