Using Reactstrap in a React Project

Hi. If you are stumbling upon this, chances are you are trying to use bootstrap or reactstrap for your application. There are plenty of guides of how to convert bootstrap for React but I found less guides on how to use reactstrap. So, we can use this as a bit of an introduction if you decide to use reactstrap in your project.

Reactstrap is a super cool addition to the Bootstrap family. Here is a helpful link for how to install reactstrap. If you haven’t peeked it before, I recommend you follow their guide on installation. Once you have it installed, you’ll begin to see the usage for reactstrap. I really enjoyed the ability to import components to satiate any of your bootstrap needs. If you have used bootstrap in the past, you’ll definitely notice many similarities. Reactstrap converts the simplicity of bootstrap for your react needs. Utilizing standard class names for reactstrap components lets you do some inline styling for each component. Making forms and charts is super easy if you aren’t a CSS wizard. Following the documentation, you can end up making a form like this.

Pretty cool right? All of your styling can be done inline and specifically for each component. I hope this gives you a bit more confidence if you are trying to decide to add it to your project or not. I really enjoyed working with it, I think you will too.