Я новичок в reactjs, я хочу включить bootstrap в свое приложение для реакции

Я установил бутстрап npm install bootstrap --save

Теперь я хочу загрузить загрузочные css и js в мое приложение для реагирования.

Я использую webpack.

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;

Моя проблема в том, «как включить загрузочные css и js в приложение reactjs из node_modules?» Как настроить загрузку для включения в мое приложение реакции?

Если вы новичок в React и используете create-react-appустановку cli, выполните команду npm ниже, чтобы включить последнюю версию начальной загрузки.

npm install --save bootstrap

или

npm install --save bootstrap@latest

Затем добавьте следующий оператор импорта в 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атрибут as для целевых элементов ( classNameвместо атрибута response используется атрибут as class).

Через npm вы запустите следующее

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

Если bootstrap 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';

Вы не можете использовать компоненты Javascript на основе Bootstrap Jquery в приложении React, поскольку все, что пытается манипулировать DOM вне React, считается плохой практикой. Здесь вы можете прочитать об этом подробнее .

Как включить Bootstrap в ваше приложение React:

1) Рекомендуется . Вы можете включить необработанные файлы CSS Bootstrap, как указано в других ответах.

2) Взгляните на библиотеку response-bootstrap . Он написан исключительно для React.

3) Для Bootstrap 4 есть reactstrap

бонус

В наши дни я обычно избегаю библиотек Bootstrap, которые предоставляют готовые к использованию компоненты (упомянутые выше react-bootstrap или responsestrap и т. Д.). По мере того, как вы становитесь зависимыми от свойств, которые они принимают (вы не можете добавлять в них настраиваемое поведение), вы теряете контроль над 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, чтобы найти основную логику.

Позже вы можете использовать загрузочный CDN в index.html, созданном с помощью инструмента CLI. или

npm install bootstrap popper jquery

а затем просто включите это в файл App.js.

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

Некоторые авторы упомянули об использовании атрибута className вместо class, но в моем случае оба работали, как показано ниже. Но если вы используете класс и посмотрите на консоль в инструментах разработчика в браузере, вы увидите ошибку при использовании класса, поэтому используйте вместо этого 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

------------------------------------ИЛИ------------- ------------------------

Поместите Bootstrap CDN для CSS в тег файла index.html в react и Bootstrap CDN для Js в тег файла index.html. Используйте className вместо class, следуя ниже index.html

<!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, поскольку jquery является требованием для bootstrap.js:

Установите jquery и bootstrap в 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';

npm install --save bootstrap 

и добавьте этот оператор импорта в свой файл index.js

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

или вы можете просто добавить CDN в свой файл index.html.

Надеюсь, это будет полезно;)

Шаг 1: с помощью NPM установите эту команду ниже

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

Шаг 2: пример команды импорта основного скрипта index.js ниже

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

Шаг 3. Компоненты пользовательского интерфейса см. Ниже на веб-сайте responsestrap.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';

а также вы можете установить:

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

проверьте это нажмите здесь .

а для CSS вы также можете прочитать эту ссылку.

читать здесь

После установки начальной загрузки в вашем проекте «npm install --save bootstrap@3.3.7» вам необходимо перейти к файлу index.js в папке проекта SRC и импортировать загрузочную программу из пакета модуля узла.

импортировать 'bootstrap / dist / css / bootstrap.min.css';

Если хотите, вы можете получить помощь из этого видео, конечно, оно вам очень поможет.

Импортировать Bootstrap в React Project

Пробую с инструкцией:

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

На всякий случай, если вы можете использовать то, yarnчто рекомендуется для приложений React,

ты можешь сделать,

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

Поскольку Bootstrap / Reactstrap выпустил свою последнюю версию, то есть Bootstrap 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, посетив их официальную страницу

Как-то в принятом ответе говорится только о включении файла css из начальной загрузки.

Но я думаю, что этот вопрос связан с тем, который здесь - Bootstrap Dropdown не работает в React

Есть пара ответов, которые могут помочь -

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

Если вы используете в своем проекте CRA (create-response-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 будет недостаточно для использования компонентов начальной загрузки. Каждый раз, когда вы хотите использовать компонент, вы должны импортировать его, например: Мне нужно использовать контейнер и строку

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

Вы должны импортировать в свой файл js

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

Вот как включить последнюю загрузку
https://react-bootstrap.github.io/getting-started/introduction

1.Install

npm установить bootstrap реакции-начальной загрузки

2. затем импортируйте в App.js import 'bootstrap / dist / css / bootstrap.min.css';

3. Затем вам нужно импортировать компоненты, которые вы используете в своем приложении, например, если вы используете панель навигации, навигацию, кнопку, форму, 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';