Я новачок для reactjs, я хочу включити завантажувальний засіб у свій додаток для реагування

Я встановив завантажувальний програму by 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?" Як налаштувати bootstrap, щоб він включив у свою програму реагування?

Якщо ви новачок у програмі React та використовуєте create-react-appналаштування cli, запустіть команду npm нижче, щоб включити останню версію bootstrap.

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як атрибут цільових елементів (реагуйте на використання classNameяк атрибут замість class).

Через вечірній вечір ти б запустив наступний

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

Ви не можете використовувати компоненти Javascript на основі Bootstrap Jquery в додатку React, оскільки все, що намагається маніпулювати DOM за межами React, вважається поганою практикою. Тут ви можете прочитати більше інформації про нього .

Як включити Bootstrap у додаток React:

1) Рекомендовано . Ви можете включити необроблені файли CSS Bootstrap, як вказано в інших відповідях.

2) Погляньте на бібліотеку react-bootstrap . Це виключно написано для React.

3) Для Bootstrap 4 існує reactstrap

Бонус

У ці дні я, як правило, уникаю бібліотек Bootstrap, які надають готові до використання компоненти (вищезгадані react-bootstrap чи reactstrap тощо). Коли ви стаєте залежними від реквізиту, який вони беруть (ви не можете додати власну поведінку всередині них), і ви втрачаєте контроль над DOM, який виробляють ці компоненти.

Тож використовуйте лише CSS Bootstrap або залиште Bootstrap. Загальне правило: Якщо ви не впевнені, чи потрібен він, він вам не потрібен. Я бачив безліч додатків, які включають Bootstrap, але використання лише невеликої кількості CSS його, а іноді і більшість цього CSS переосмислюється під власні стилі.

Ви можете просто importотримати файл css куди завгодно. Вебпак подбає про комплект пакетів 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 в реакцію, а Bootstrap CDN для Js в тег файла index.html. Використовуйте className замість класу. Дотримуйтесь нижче 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: компоненти інтерфейсу див. Нижче веб-сайт 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';

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

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

перевірте це, натисніть тут .

а для CSS ви можете прочитати це посилання також з точністю

читайте тут

Після установки bootstrap у вашому проекті "npm install --save bootstrap@3.3.7", вам потрібно перейти до файлу index.js у папці SRC проекту та імпортувати bootstrap з пакета модуля вузла.

імпорт 'bootstrap / dist / css / bootstrap.min.css';

Якщо вам подобається, ви можете отримати допомогу в цьому відео, переконайтеся, що воно вам дуже допоможе.

Імпорт завантажувального проекту в реактивний проект

Я намагаюся з інструкцією:

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

    <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.Встановити

npm встановити bootstrap bootstrap

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

3. Тоді вам потрібно імпортувати компоненти, які ви використовуєте у вашій програмі, наприклад, якщо ви використовуєте navbar, nav, button, form, 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';