在 ReactJs 上使用 Pure Bootstrap v4 不起作用答案

【问题标题】：Use Pure Bootstrap v4 on ReactJs is NOT working在 ReactJs 上使用 Pure Bootstrap v4 不起作用
【发布时间】：2018-02-16 22:07:19
【问题描述】：

我非常想在我的 React.js 应用程序上使用纯 Bootstrap v4。我使用 create-react-app 创建了我的应用程序。所以，我把 Bootstrap 资产放在 index.html 上（在公共文件夹中）。

在第一次尝试时，它运行良好。然后，我添加了一些依赖项，例如 react-router-dom、react-router-config 和 prop-types。突然间，它显示出几乎是一个空白页面。

1) 项目文件夹

2) kodebaru/webpack.config.js

const path = require('path');

module.exports = {
  entry: path.join(__dirname, '/client/src/index.jsx'),

  output: {
    path: path.join(__dirname, '/client/dist/js'),
    filename: 'app.js',
  },

  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        include: path.join(__dirname, '/client/src'),
        loader: 'babel-loader',
        query: {
          presets: ["react", "es2015"]
        }
      }
    ]
  },

  watch: true
};

3) kodebaru/server.js

const express = require('express');
const path = require('path');
const app = express();

app.use(express.static(path.resolve(__dirname, './backend/static/')));
app.use(express.static(path.resolve(__dirname, './client/dist/')));

app.get('*', (req, res) => {
  res.sendFile(path.resolve(__dirname, './backend/static/', 'index.html'));
});

const PORT = process.env.PORT || 3500;

app.listen(PORT, () => {
  console.log(`App listening on port ${PORT}!`);
});

4) kodebaru/backend/static/index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Kodebaru</title>
    <link rel="stylesheet" href="./bootstrap/bootstrap.min.css">
</head>
<body>
    <div id="root"></div>

    <script src="/js/app.js"></script>
</body>
</html>

5) 结果

6) 警告信息

我知道 React 应用程序有一个框架引导程序 (reactstrap)。但是，这次我想知道如何在 react app 中使用纯 bootstrap v4 ？

【问题讨论】：

是否有任何控制台错误？渲染的 html 是什么？
@Panther .. 没什么
如果没有渲染，那么服务器没有发送任何数据？显示一些小提琴或位置来检查！
@Panther .. 我已经添加了详细信息
看起来问题出在 CSS 上。有导航相关的标签，它们不显示。检查并找出它在 UI 上不可见的原因

标签： reactjs express webpack react-router-v4

【解决方案1】：

为时已晚。但是，我认为回答我自己的问题很好，因为没有人。解决方案是使用 npm 安装 bootstrap，在 index.jsx 上导入 bootstrap，在 webpack 配置文件中添加 jQuery、Popper.js 和 css loader。

a) 使用 npm 安装引导程序

npm install bootstrap@4.0.0-beta

b) 在 index.jsx 上导入引导程序

import 'bootstrap';
require('bootstrap/dist/css/bootstrap.css');

c) 在 webpack 上添加 jQuery 和 Popper.js

new webpack.ProvidePlugin({
     $: 'jquery',
     jQuery: 'jquery',
     'window.jQuery': 'jquery',
     Popper: ['popper.js', 'default']
})

d) 在 webpack 上添加 css 加载器

{
   test: /\.css$/,
   use: ['style-loader', 'css-loader']
}

完整的实现如下：

1) index.jsx

import React from 'react';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware, compose } from "redux";
import promise from "redux-promise";
import ReactDOM from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import { renderRoutes } from 'react-router-config';
import routes from './routes.js';
import reducers from './redux/reducers/index.js'
import 'bootstrap';
require('bootstrap/dist/css/bootstrap.css');

const createStoreWithMiddleware = createStore(reducers, {}, compose(applyMiddleware(promise)));

ReactDOM.render(
  <Provider store = {createStoreWithMiddleware}>
    <Router>
      {/* kick it all off with the root route */}
      {renderRoutes(routes)}
    </Router>
  </Provider>,
  document.getElementById('root')
);

if(module.hot) {
  module.hot.accept('./routes.js', function() {
    routes();
  })
}

2) webpack.config.js

const webpack = require('webpack');
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './app/index.js',
    output: {
        filename: 'index_bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                include: path.join(__dirname, '/app'),
                exclude: '/node_modules',
                loader: 'babel-loader',
                query: {
                    presets: ["react", "es2015"],
                    plugins: [
                        "transform-react-pug",
                        "transform-react-jsx",
                        "transform-object-rest-spread"
                    ]
                }
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    'file-loader'
                ]
            }
        ]
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery',
            Popper: ['popper.js', 'default']
        }),
        new CleanWebpackPlugin(['dist']),
        new HtmlWebpackPlugin({
            template: './index.html'
        })
    ],
    devtool: 'cheap-module-eval-source-map',
    watch: true
};

【讨论】：