Bootstrap Navbar Collapse in ReactJS

Bootstrap is an amazing library and works wonders with ReactJS. Unfortunately, you can’t (or really shouldn’t) use Bootstrap.js with React because bootstrap directly manipulates the DOM; which could break React’s nice rendering flow. This becomes a big problem if you wanted to implement a Navbar using plain bootstrap. Take the following for example from Bootstrap’s documentation:   You could directly take this code and put it in ReactJS (but change class _to _className) and you will have a working Navbar.

Navigate in ReactJS using React V4 Router

If you are building a large single page application, there might come a time when you will need to add routes to different pages. Unlike traditional routes, adding routes in ReactJS does not trigger a page reload. This makes your SPA extremely fast and feels more like an actual application rather than a simple website. To navigate in ReactJS we will be using the React v4 router. Setting Up React V4 Router Begin by installing the React V4 Router from npm: