I’ve been doing a lot of 9-5 level coding lately and have not been experimenting with the latest and greatest things out there. Since we use our own home-grown react components at work and I haven’t done much coding outside of work, I have not kept up with third-party library components.
Recently I helped someone with their school project and they needed some quick styling. The first thing that came to mind was bootstrap. Bootstrap is quite stable and has been around for quite a while but I was not aware that a component library had been created around the famous library.
So… I decided to give it a try. You can use react-bootstrap like any other module using NPM or yarn. One thing that we were running into trouble with was that although we were using the components we were not getting anything near the desired results.
I had to take a deeper dive and investigate. So here is a quick how to get started with react-bootstrap from the ground up.
Create a React App
The first thing you will want to do if you haven’t already is to create a react app.
You can find the instructions at https://facebook.github.io/create-react-app/docs/getting-started.
Once you have followed the instructions to create a react app you will need to install react-bootstrap. To do that you can do the usual NPM command
npm install --save react-bootstrap
After you successfully add react-bootstrap to your project double-check the package.json file and make sure that it has installed.
After that, you will have to update your index.html file in the public folder and references to bootstrap and to the required js libraries.
Take a look at this tutorial for adding those references https://blog.logrocket.com/how-to-use-bootstrap-with-react-a354715d1121/
After that, you can begin using the react-bootstrap components as you would any other components.
Here is a sample snippet of a card I created with react components.
For the full working code, you can visit this repo and play around with it from https://github.com/fernandozamoraj/react-bootstrap-demo
You can learn about all the components and use what you need from the react-bootstrap library by visiting their site and looking at their code samples. They are pretty easy to follow.
Thanks for reading… until next time.