A very common use case that you'll run into as part of working on a frontend project is integrating some sort of third-party CSS framework. This is something I've had to do on nearly every frontend development project I've ever touched, and there's pretty good odds that you'll need to run through this same process!

We'll stick to one of the most common ones, since it will give you a good introduction to using frameworks in general, so we'll start off by integrating bootstrap into our project! It won't take much for our project to go from sort of ugly to actually kind of decent! As with most other things we've run into as part of our development process with Create React App, this is equally simple for us to implement! We'll start off by adding both bootstrap to our project and reactstrap, which is a pre-made React component that takes full advantage of Twitter Bootstrap!

We'll start by adding bootstrap, and reactstrap, via yarn:

$ yarn add bootstrap@4 [email protected]

We should see a bunch of things get installed in our project folder, but hopefully no errors! After everything is successfully installed, we can then get the baseline bootstrap into our project by opening up src/index.js and adding a single import statement:

import 'bootstrap/dist/css/bootstrap.css';