Responsive User Interfaces With Bootstrap and ReactJS

Learn How to Combine Bootstrap With ReactJS to Create Responsive User Interfaces

Posted by Heikki Kupiainen/Oppikone on 04.01.2017 06:56:20

I wrote earlier a blog post about creating a simple app with ReactJS. ReactJS is a template engine with some candy that pretends to be something much greater than that. But just like with any template engine, at the end of the day you'll have some generated html code and a heavy burden on your shoulders because you must also make it look fashionable. And you are still just another engineer with some candy like ReactJS skill, nothing much greater. But no need to worry because that's the point when Bootstrap steps in and takes away this burden from your shoulders!

But before we start, please note that this is not an article about a certain "React-Bootstrap library" that someone has written. There is absolutely no need to use any additional library or hocus-pocus to incorporate Bootstrap with ReactJS. There is a strong wind of over-engineering and wheel-reinvention in the ReactJS community. It just makes simple things appear complicated - just like ReactJS itself is just a new fashion of a template engine with a bunch of new buzzwords for age old concepts. But let's not worry about it for now.

When you generate the base for ReactJS app the template index file becomes available in public folder. Let's tweak that file and add Bootstrap layout:

Now you are good to go adding Bootstrap to your ReactJS app. Remember that in Bootstrap, everything must be inside a container div. And remember that when you are writing ReactJS virtual DOM objects, you'll be using className attributes instead of class attributes. Remember that when formatting a list in Bootsrap, you must add list-group class to the ul-element and list-group-item class to each li-element. That's all, pretty much. A Bootstrap-enabled ReactJS component will look like this:

If you want to check all of the source code take a look at my GitHub repo. Our tweaks will result in a ReactJS app with nice Bootstrap layouts:

The example is also available here. Note that I used ES6 syntax for writing this example. But for many developers, it might be more intuitive to enter ReactJS taking a somewhat more conventional approach that I show in my blog post about minimal ReactJS configuration.