programing

reactjs 앱에 부트스트랩 css 및 js를 포함하려면 어떻게 해야 합니까?

testmans 2023. 3. 16. 21:13

reactjs 앱에 부트스트랩 css 및 js를 포함하려면 어떻게 해야 합니까?

React JS는 처음이라 부트스트랩을 React 앱에 포함시키고 싶다.

은 「」에 의해서 .npm install bootstrap --save

이제 React 앱에 부트스트랩 CSS와 JS를 로드합니다.

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

webpack.config.syslog

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;

문제는 "노드 모듈의 ReactJS 앱에 부트스트랩 CSS와 JS를 포함시키는 방법"입니다.React 앱에 포함하도록 부트스트랩을 설정하는 방법

React 를 처음 사용하는 경우 다음 npm 명령을 실행하여 최신 버전의 부트스트랩을 포함합니다.

npm install --save bootstrap

또는

npm install --save bootstrap@latest

그런 다음 다음 Import 문을 파일에 추가합니다.(https://getbootstrap.com/docs/4.4/getting-started/webpack/ #syslog-css)

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

또는

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

타겟 요소의 어트리뷰트로 사용하는 것을 잊지 말아 주세요(대신 어트리뷰트로 사용됩니다).

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

리액트 앱에서는 Bootstrap Jquery 기반의 Javascript 컴포넌트를 사용할 수 없습니다.리액트 외부에서 DOM을 조작하려고 하는 것은 모두 나쁜 관행으로 간주되기 때문입니다.자세한 내용은 여기를 참조하십시오.

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

1) 권장.다른 답변에 따라 부트스트랩의 원시 CSS 파일을 포함할 수 있습니다.

2) react-bootstrap 라이브러리를 확인합니다.리액트 전용으로 쓰여져 있습니다.

3) 부트스트랩4에는 리액트스트랩이 있습니다.

보너스

현재 저는 일반적으로 즉시 사용할 수 있는 컴포넌트(상기 리액트 부트스트랩 또는 리액트스트랩 등)를 제공하는 부트스트랩 라이브러리를 피하고 있습니다.고객이 사용하는 소품에 의존하게 되면(소품 내부에 커스텀 동작을 추가할 수 없음), 이러한 컴포넌트가 생성하는 DOM을 제어할 수 없게 됩니다.

따라서 부트스트랩 CSS만을 사용하거나 부트스트랩은 제외합니다.일반적인 경험의 법칙은 다음과 같습니다.필요한지 확실하지 않으면 필요 없습니다.부트스트랩을 포함한 어플리케이션은 많이 있습니다만, 그 중 소량의 CSS만 사용하고, 이 CSS의 대부분은 커스텀 스타일에 의해 덮어쓰기도 합니다.

★★★★★★★★★★★★★★★★★★★★★★.importcss를 사용하다필요에 따라 로더를 설정한 경우 웹 팩은 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'

class 대신 className 속성을 사용하는 것을 언급한 저자는 거의 없습니다만, 제 경우는 둘 다 다음과 같이 동작하고 있었습니다.그러나 클래스를 사용하고 브라우저의 개발자 도구에서 콘솔을 보면 클래스 사용에 대한 오류가 나타납니다.className을 대신 사용합니다.

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

또한 부트스트랩과의 경합을 피하기 위해 기본 CSS Import를 삭제하는 것도 잊지 마십시오.

도움이 되었으면 좋겠네요, 해피 코딩!!!

React에서 부트스트랩을 사용하려면 아래 링크를 클릭하십시오.https://react-bootstrap.github.io/

인스톨의 경우:

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

-----------------------------------------------------------------------

리액트의 index.html 파일 태그에 CSS용 부트스트랩 CDN을 넣고 index.html 파일 태그에 Js용 부트스트랩 CDN을 넣습니다.아래 index.html 뒤에 class 대신 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와 부트스트랩을 제공하는 완전한 답변입니다.

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

부트스트랩 5 (업데이트 2021)

부트스트랩5는 모듈러형으로 jQuery가 필요 없게 되었습니다.따라서 부트스트랩 컴포넌트를 Import하여 에서 직접 참조할 수 있습니다.bootstrap즉, 다음과 같은 서드파티 라이브러리가 필요 없게 됩니다.react-bootstrap ★★★★★★★★★★★★★★★★★」reactstrap.

React + Bootstrap 5를 사용하려면:

1_ 부트스트랩을 설치하고 package.json에 추가합니다...

npm install 'bootstrap' --save

2_ 부트스트랩 및/또는 특정 컴포넌트 Import...

import { Collapse, Popover, Toast, Tooltip, Alert, Modal, Dropdown } from bootstrap

3_ 부트스트랩 컴포넌트를 사용합니다.예를 들어 드롭다운이 있습니다.

// component
const DropdownDemo = () => {
    const ddRef = useRef()  

    useEffect(() => {
        var dd = new Dropdown(ddRef.current, {})
    })
    
    return (
        <div className="py-2">
            <div className="dropdown">
              <button className="btn btn-secondary dropdown-toggle" type="button" ref={ddRef} aria-expanded="false">
                Dropdown button
              </button>
              <ul className="dropdown-menu" aria-labelledby="dropdown1">
                <li><a className="dropdown-item" href="#">Action</a></li>
                <li><a className="dropdown-item" href="#">Another action</a></li>
                <li><a className="dropdown-item" href="#">Something else here</a></li>
              </ul>
            </div>
        </div>
    )
}

// React app
function App() {
  const [mounted, setMounted] = useState(true);

  return (
    <div>
        {mounted &&
            <div>
                <DropdownDemo />
            </div>
        }
    </div>
  )
}

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

1단계: NPM을 사용하여 이 bellow 명령을 설치합니다.

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

스텝 2: index.js 메인스크립트 Import bellow 명령어 예시

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

3단계: UI 컴포넌트는 아래 웹 사이트를 참조합니다. 리액트스트랩.github.이오

npm install --save bootstrap

이 Import 스테이트먼트를 index.filename 파일에 추가합니다.

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

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

지시에 따라 시도합니다.

npm install bootstrap
npm install jquery popper.js

src/index.disc:

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

이것은 나에게 효과가 있었다.bootstrap 4npm

jquery , popper.js, bootstrap(패키지)

npm install jquery popper.js bootstrap --save

다음 Import로 index.js를 업데이트합니다.

import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap.js";

, 「」를 경우는,sass스타일에 는, 「」를 인스톨 할수.sass

npm install sass --save

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

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

그런 다음 부트스트랩에서 다음과 같이 실제로 필요한 것을 Import합니다.

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

// 또는

import  Button  from 'react-bootstrap';

또, 인스톨 할 수도 있습니다.

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

여기를 클릭해 주세요.

CSS의 경우 이 링크도 쉽게 읽을 수 있습니다.

여기서 읽다

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

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

만약 당신이 이 비디오에서 도움을 받을 수 있다면, 그것은 당신에게 많은 도움이 될 것입니다.

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

심플 솔루션(2020)은 다음과 같습니다.

npm install --save jquery popper.js
npm install --save bootstrap
npm install --save style-loader css-loader
update webpack.config.js.webpack에 부트스트랩 CSS 파일 처리 방법을 지시해야 합니다.따라서 다음과 같은 규칙을 추가해야 합니다.

React 응용 프로그램의 시작점에 Import를 추가하고(일반적으로 index.js), 순서를 변경하지 않도록 맨 위에 배치합니다.

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

import $ from "jquery";

import Popper from "popper.js";

import "bootstrap/dist/js/bootstrap.bundle.min";

이러한 절차를 밟으면 도움이 될 것입니다.문제가 있으면 코멘트를 주세요.

★★★★★★★★★★★★★★★★★★★★★★★★★★★.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.jsfilename을 클릭합니다.

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

Bootstrap/Reactstrap이 최신 버전을 출시했기 때문에,Bootstrap 4 다음 단계를 수행하여 이 기능을 사용할 수 있습니다.

프로젝트로 이동
터미널을 엽니다.
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은 공식 페이지를 방문하여 확인할 수 있습니다.

어떤 식으로든 받아들여지는 답변은 부트스트랩에서 css 파일을 포함시키는 것 뿐입니다.

하지만 이 질문은 여기 있는 것과 관련이 있다고 생각합니다.- Bootstrap Dropdown은 React에서 작동하지 않습니다.

도움이 되는 답변이 몇 가지 있습니다.

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

저는 비슷한 문제를 해결하기 위해 위와 같이 했습니다.이것이 당신에게 도움이 되기를 바랍니다:-)

index.js 파일에 부트스트랩을 설치하고 Import하는 것만으로는 부트스트랩 컴포넌트를 사용할 수 없습니다.컴포넌트를 사용하려면 다음과 같이 컴포넌트를 Import해야 합니다.컨테이너와 열을 사용해야 합니다.

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

js 파일을 Import해야 합니다.

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

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

1. 설치

npm install react-bootstrap 부트스트랩

그런 다음 App.js로 Import 'bootstrap/dist/css/bootstrap.min.css';
그런 다음 앱에서 사용하는 구성 요소를 가져와야 합니다. 예: navbar, nav, button, form, form control을 사용하는 경우 다음과 같이 모두 가져옵니다.

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

Visual Studio 터미널을 사용하여 부트스트랩을 추가할 수 있습니다.your Application Name >npm install bootstrap@4.1.1

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

'programing' 카테고리의 다른 글

Node.js 웹 응용 프로그램에서 MongoDB 연결을 관리하는 방법은 무엇입니까? (0)	2023.03.16
봄 MVC의 ModelAndView 모델이란? (0)	2023.03.16
TypeScript 캐스트 연산자 "as"의 ESlint 구문 분석 오류 "예상하지 않은 토큰" (0)	2023.03.16
API 액션에 대한 Rails 4의 protect_from_forgy 건너뛰기 (0)	2023.03.16
jQuery에서 이 JSON 개체를 반복하려면 어떻게 해야 합니까? (0)	2023.03.16

현재글reactjs 앱에 부트스트랩 css 및 js를 포함하려면 어떻게 해야 합니까?

각종 프로그래밍 정보를 다루는 블로그입니다.

sql-server, mongodb, C, CSS, ASP.NET, mysql, iphone, JQuery, spring-boot, Python, oracle, reactjs, typescript, AJAX, JSON, mariaDB, AngularJS, Excel, git, Wordpress,

Today :
Yesterday :

일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

testman

reactjs 앱에 부트스트랩 css 및 js를 포함하려면 어떻게 해야 합니까?

reactjs 앱에 부트스트랩 css 및 js를 포함하려면 어떻게 해야 합니까?

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

보너스

'programing' 카테고리의 다른 글

'programing'의 다른글

티스토리툴바

reactjs 앱에 부트스트랩 css 및 js를 포함하려면 어떻게 해야 합니까?

reactjs 앱에 부트스트랩 css 및 js를 포함하려면 어떻게 해야 합니까?

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

보너스

'programing' 카테고리의 다른 글

'programing'의 다른글

관련글

티스토리툴바