React-Bootstrap and / or Bootstrap with Webpack

Question

I find it difficult to understand how to use React download and Webpack build. I would like to use the Bootstrap grid layout and various functions (does the bootstrap reaction seem to offer all the bootstrap functions?) And wonders what is the best way to configure this.

For example, I tried the following with the usual bootstrap method, as well as with the bootstrap reaction components, but they don't seem to work. Also, how would you recommend using css reset to normalize everything? Thank you in advance for your help.

  import React from 'react';
  import mui from 'material-ui';
  import style from './style.scss';
  import Navigation from './Navigation';
  import { Grid, Row, Col } from 'react-bootstrap';

  class App extends React.Component {
    constructor(props) {
      super(props);
    }

    render() {
      return (
        /* normal bootstrap -- doesn't work */
        <div className="container">

          /* react-bootstrap which also doesn't work */
          <Grid>
            <Row className="show-grid">
              <Col md={6} mdPush={6}><code>&lt;{'Col md={6} mdPush={6}'} /&gt;</code></Col>
              <Col md={6} mdPull={6}><code>&lt;{'Col md={6} mdPull={6}'} /&gt;</code></Col>
            </Row>
          </Grid>

          <Navigation />
        </div>
      );
    }
  }

  export default App;

Answer 1

This is how I am currently importing a reaction-bootstrap script on my startup.

app.js( ReactDOM.render):

// Import the CSS reset, which HtmlWebpackPlugin transfers to the build folder
import 'sanitize.css/lib/sanitize.css';
import '!!style-loader!css-loader!./vendor/bootstrap/css/bootstrap.min.css';

, , , -.