One of the things we need to do with our application is bring in support for Bootstrap. This is not something that is provided out of the box with React, so we need to add this capacity using other packages:
- Install Bootstrap as follows:
npm install --save bootstrap
- With this in place, we are now free to use a React-ready Bootstrap component. We are going to use the reactstrap package because this package targets Bootstrap 4 in a React-friendly fashion:
npm install --save reactstrap react react-dom
- reactstrap is not a TypeScript component, so we need to install the DefinitelyTyped definition for this and for Bootstrap:
npm install --save @types/reactstrap
npm install --save @types/bootstrap
- With this in place, we can now add the Bootstrap CSS files. To do this, we are going to update the index.tsx file by adding a reference to our locally installed Bootstrap CSS file, by adding the following import to the very top of the file:
import "bootstrap/dist/css/bootstrap.min.css";
Here, we are using the local Bootstrap file for convenience. As we discussed in Chapter 1, Advanced TypeScript Features, we want to change this to use a CDN source for the production version of this application.
- To tidy up, remove the following line from src/index.tsx and then remove the matching .css file from the disk:
import './index.css'