如何包括引导css和js在reactjs应用程序?

我是ReactJS的新手，我想在我的React应用程序中包括引导

我已经通过npm安装bootstrap -save安装了bootstrap

现在，我想在React应用程序中加载引导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应用程序中?”如何设置引导包括在我的React应用程序?

当前回答

完整的答案是给你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';

2019-03-21 19:48:05

其他回答

你可以直接通过

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

然后从bootstrap导入你真正需要的东西，比如:

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

/ /或

import  Button  from 'react-bootstrap';

你还可以安装:

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

点击这里查看。

关于CSS，你也可以仔细阅读这个链接

在这里阅读

2018-04-04 09:05:35

完整的答案是给你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';

2019-03-21 19:48:05

你不能在React应用程序中使用基于Jquery的Bootstrap Javascript组件，因为任何试图在React之外操作DOM的行为都被认为是糟糕的做法。在这里你可以阅读更多关于它的信息。

如何在React应用程序中包含Bootstrap:

1)推荐。您可以包括Bootstrap的原始CSS文件作为其他答案指定。

2)看看react-bootstrap库。它是专门为React编写的。

3) Bootstrap 4有反作用带

奖金

这些天我通常避免使用Bootstrap库，因为它提供了随时可用的组件(上面提到的react-bootstrap或reactstrap等等)。当您变得依赖于它们所采用的道具时(您不能在其中添加自定义行为)，您就失去了对这些组件生成的DOM的控制。

所以要么只使用Bootstrap CSS，要么不使用Bootstrap。一般的经验法则是:如果你不确定你是否需要它，你就不需要它。我见过很多应用程序，其中包括Bootstrap，但只使用少量的CSS，有时大部分CSS被自定义样式覆盖。

2016-10-14 07:46:32

因为Bootstrap/Reactstrap已经发布了他们的最新版本，即Bootstrap 4，你可以按照以下步骤使用它

导航到您的项目打开终端我假设已经安装了npm，然后输入以下命令 NPM install——save react-dom

这将在您的项目中作为依赖项安装Reactstrap。

下面是使用react创建按钮的代码

import React from import {Button} from 'reactstrap'; 导出默认值(props) => { 回报( <按钮颜色= "危险" >危险!< / >按钮）; };

你可以通过访问他们的官方页面来检查Reactstrap

2019-01-08 13:31:07

如果你在项目中使用CRA(create-react-app)，你可以添加这个:

npm install react-bootstrap 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"
/>

我用上面的方法来解决类似的问题。希望这对你有用:-)

2019-02-28 20:47:59

如何包括引导css和js在reactjs应用程序?

推荐文章

最新文章

标签