React-Bootstrap Help Getting Started

Hey everyone, I am just starting to use React-Bootstrap and having issues getting any of the components in this framework to render to the screen. Here is a simple example of rendering a component and my codepen link:

var Button = ReactBootstrap.Button;
class App extends React.Component{
  
  render(){
    return(
      <div>
        <div>This Renders</div>
        <Button>This Doesn't</Button>
      </div>
    )
  }
}

ReactDOM.render(
<App/>,
  document.getElementById("app")
)

https://codepen.io/InfiniteSet/pen/xLNLox

Any help would be much appreciated, thank you!

If you have worked in JavaScript before, you will remember the console will show errors if there are any. In Chome use Ctrl+Shft+I to access the developer tools and view the console.

You are getting the following 2 errors in the console:

Uncaught TypeError: Cannot read property ‘propTypes’ of undefined
at Object.r [as default] (react-bootstrap.min.js:13)
at Object. (react-bootstrap.min.js:6)
at t (react-bootstrap.min.js:1)
at Object.t.exports (react-bootstrap.min.js:1)
at t (react-bootstrap.min.js:1)
at react-bootstrap.min.js:1
at react-bootstrap.min.js:1
at react-bootstrap.min.js:1
at react-bootstrap.min.js:1
pen.js:9

Uncaught ReferenceError: ReactBootstrap is not defined at pen.js:9

Honestly don’t know why it doesn’t work in your pen. I forked your pen, changed version of react-bootstrap to 0.30.5 and now it works fine.
https://codepen.io/prokhorova_ann26/pen/xLNXYE

1 Like

I guess I will be using this version of React-Bootstrap for the time being, thank you!