React-bootstrap code not rendering

Question

I have installed react-bootstrap with npm (npm install react-bootstrap --save) but my code is not rendering on the browser. The page is just blank. I use webpack for builds and babel for transpilation. Below is my react code.

import React from 'react'
import ReactDOM from 'react-dom'
import ReactBootstrap from 'react-bootstrap'

const buttonsInstance = (
  <ButtonToolbar>
    <Button bsStyle="primary" bsSize="large" active>Primary button</Button>
    <Button bsSize="large" active>Button</Button>
  </ButtonToolbar>
);

ReactDOM.render(buttonsInstance, document.getElementById('root'));

Thanks!

Kunal · Accepted Answer · 2017-06-04 20:27:50Z

3

Import the controls you'll use explicitly:

import React from 'react'
import ReactDOM from 'react-dom'
import {ButtonToolbar, Button} from 'react-bootstrap' // define individual controls to import    
const buttonsInstance = (
  <ButtonToolbar>
    <Button bsStyle="primary" bsSize="large" active>Primary button</Button>
    <Button bsSize="large" active>Button</Button>
  </ButtonToolbar>
);

ReactDOM.render(buttonsInstance, document.getElementById('root'));

edited Jun 4, 2017 at 20:27

answered Feb 27, 2017 at 12:09

Kunal

1,2962 gold badges12 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Kunal Over a year ago

Good job Johnny. If you're unfamiliar with import syntax here (i.e. using curly brackets {} ) then checkout Destructuring.

JohnnyDevv Over a year ago

How exactly will i apply that??

Kunal Over a year ago

Well it's just FYI - ES6 destructuring if you want to understand what {Button} actually means. It won't affect your example but might make you a better dev!

JohnnyDevv Over a year ago

Tried something like this: import {ButtonToolbar: BtnBar, Button: Btn} from 'react-bootstrap' and substituted them in their respective tags but did not work. Maybe i am not doing it properly.

Kunal Over a year ago

Try `import { Button as Btn } from 'react-bootstrap'. Your syntax is correct for es6 objects in general but when importing try the aforementioned if you want to use aliases. Checkout mdn

Collectives™ on Stack Overflow

React-bootstrap code not rendering

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related