如何包括引导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应用程序?

当前回答

npm install --save bootstrap

并将此import语句添加到index.js文件中

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

或者你可以简单地在index.html文件中添加CDN。

2018-03-09 11:31:19

其他回答

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

因为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

你可以使用visual studio终端添加bootstrap: YourApplicationName> npm install bootstrap@4.1.1

2021-06-17 11:37:30

我也有过类似的经历。我的设置如下所示

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'

很少有作者提到使用className属性而不是class，但在我的例子中，两者都像下面这样工作。但是如果你使用class并在浏览器的开发工具中查看控制台，你会看到使用class的错误。所以改用className。

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

不要忘记删除默认的CSS导入，以避免与引导程序冲突。

希望能有所帮助，编码愉快!!

2020-02-16 10:18:06

这里是如何包括最新的引导 https://react-bootstrap.github.io/getting-started/introduction

1.安装

NPM安装react-bootstrap

然后导入到App.js 导入“引导/ dist / css / bootstrap.min.css”; 然后你需要导入你在应用程序中使用的组件，例如如果你使用导航条，导航，按钮，表单，表单控件，然后导入所有这些如下所示:

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

2020-02-22 23:36:41

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

推荐文章

最新文章

标签