Configuring your React Application

In this tutorial, we will set up our project to use Reactstrap (a package supporting easy to use React based Bootstrap 4 components). We will then introduce our first reactstrap component into our application. At the end of this tutorial, you will be able to:

• Configure your React project to use reactstrap.
• Start using reactstrap components in your application.

1. Configure your React Project to use Reactstrap

• To configure your project to use reactstrap, type the following at the prompt to install reactstrap, and Bootstrap 4:
$ npm install bootstrap reactstrap react-popper --save

2. Configure to use Bootstrap 4

• Open index.js file in the src folder and add the following line into the imports:

3. Adding a Navigation Bar:

• Open App.js in the src folder and update it as follows:

(source: Front-End Web Development with React on Coursera)