Bootstrap is a very popular toolkit used by many to quickly build responsive, mobile friendly apps. Under the hood, Bootstrap relies heavily upon jQuery to perform direct DOM manipulation used to achieve that responsiveness but that runs counter to the way React operates. Fortunately for us there is React-Bootstrap.
In this post I will detail how to setup React-Bootstrap in your React app.
Prerequisites
It is assumed you already have a React App setup and some basic working knowledge of React. View my previous post “Creating a New React App With create-react-app” for instructions on setting up a new React app.
Install React-Bootstrap
Run this command to add React-Bootstrap to your app.
Setting the Theme
Do a quick web search for “Bootstrap Theme” and you will get back a vast array of results. Many of the results are labeled as premium and require purchase, but there are several free options out there too.
For my current project I’m using a free theme from bootswatch.com. The theme is delivered as a single, minified css file.
To include the theme in your project:
- Place the file in the project’s “src” folder
Place the Bootstrap theme in the project’s src folder
- Add this line to App.js after all other existing css imports
This is what my App.js’s import section looks like after adding the bootstrap theme
Adding Components
React-Bootstrap encapsulates all the Bootstrap elements into components so adding a Bootstrap element to your React component is as simple as importing the component you want from React-Bootstrap and adding it to your component’s render method.
The below example adds a button which will show an alert when clicked.
Initial Page Load
On Button Click
These are just two of the many components included in the React-Bootstrap library. The React-Bootstrap site has excellent documentation detailing all the components available in the library and includes several examples of each one.
React-Bootstrap vs Vanilla Bootstrap
It is possible to create the above example without using React-Bootstrap, but it is nowhere as clean in my opinion.
An argument you could make for using vanilla Bootstrap over React-Bootstrap is you have full control over everything rather than depending on a 3rd party. My rebuttal to that would be why are you using Bootstrap in the first place if you want full control?
Am I Cheating By Using Bootstrap
Some would argue that if you’re a real coder, you should roll your own styles like my father did and his father before him! They may also say that all Bootstrap sites look and feel the same and if you use it you’re just a another cog in the machine.
My counter argument to both of these is most of the time I just want to build an app for its function and I want to build it quickly, but I also want it to look decently styled. In those cases, spending 30 min picking out a bootstrap theme and wiring it up will be all the time I need to spend on site styling so I can devote the rest of my precious development time on the meat of the application.
