HOW TO USE BOOTSTRAP WITH REACT?

The following are the three most typical approaches to include Bootstrap in React:

1. Make use of BootstrapCDN.

2. Import Bootstrap as a dependency in React.

3. Install a package for React Bootstrap (such as bootstrap-react or reactstrap)

MAKE USE OF BOOTSTRAPCDN

The simplest approach to include Bootstrap in your React app is to use BootstrapCDN. There are no downloads or installations necessary. Simply include a link in the head area of your app, as demonstrated in the example below. If you want to use the JavaScript components that come with Bootstrap, you'll need to add the following Script> tags near the conclusion of your pages, right before the closing /body> tag.

For its JavaScript components, Bootstrap 4 uses jQuery and Popper.js. We utilized the compact version of jQuery in the preceding snippet, but the full version is also available. These code snippets will often be placed on the index page of your React project.

IMPORT BOOTSTRAP AS A DEPENDENCY IN REACT

This is the ideal method for including Bootstrap in your React application if you're using a build tool or a module bundler like webpack. Your app will require Bootstrap to be installed as a dependency. After you've installed Bootstrap, be sure to include it in your app's entry JavaScript framwork code. If anyone is using the create-react-app, src/index.js should be the file. You'll notice that the first dependent is the Bootstrap minified CSS.

Using the built-in Bootstrap classes in our React app components is now possible. However, if jquery and popper.js aren't already installed, you'll need to install them before you can use Bootstrap's JavaScript components in your project. Then, as demonstrated in the following sample, make additional changes to the src/index.js file to add the new dependencies.
 
Imports for $ and Popper were added here. The Bootstrap JavaScript minified bundle file was also imported. In your React app, you can now use Bootstrap JavaScript components.

INSTALL A PACKAGE FOR REACT BOOTSTRAP

The final option for incorporating Bootstrap into a React app is to utilize a package that includes rebuilt Bootstrap components that can be used as React components. The following are the two most popular packages:

1. react-bootstrap

2. reactstrap

 
Both packages are excellent choices for using Bootstrap with React apps, but you don't have to use either of them. They have a lot of the same traits.

By applying the built-in classes to elements and components in your React app like any other class, you may use Bootstrap directly. To show how to use Bootstrap classes and components, let's create a basic theme switcher React component. To construct our theme switcher, use a dropdown component provided in Bootstrap, as illustrated in this sample. The size and color of the dropdown button are likewise controlled by the built-in button classes.

 
Start writing the code for the ThemeSwitcher component and make sure you've already set up a React application. With Bootstrap's dropdown component and a few built-in classes, you can create a simple theme switcher component. Firstly, use a theme attribute to build up the component's state and set it to null.
 
Then, in the component class, you need to implement two click event handlers for picking a theme and resetting the theme, respectively, resetTheme() and chooseTheme(). Render a split button dropdown menu with three themes in the render() method. Primary, Danger, and Success are the three words that come to mind. Each menu item has a click event handler that performs the desired action.
 
Notice how you can acquire the theme color class for both the dropdown buttons and the text by calling the theme to LowerCase(). If no theme is specified, you can use secondary as the default color. Therefore, Bootstrap's built-in classes and components can be utilized easily after being demonstrated in the above example.

 To make the app, you will utilize the create-react-app command-line tool. For this, make sure the create-react-app utility is installed on your computer. Currently, react-bootstrap targets Bootstrap v3. However, work on supporting Bootstrap v4 is still ongoing. SplitButton and MenuItem are two components from the react-bootstrap package that you can refer to.
 
First, we used a theme attribute to build up the component's state and set it to null. Following that, we create a chooseTheme() click event handler for selecting or resetting a theme. We built some container styles in the render() method to help us accomplish horizontal and vertical centering because we're using Bootstrap 3.3.7.
 
The bsSize prop on the SplitButton component is used to specify the button size. Also, note how the themeClass parameter is passed to the bsStyle prop to dynamically modify the button color based on the state theme. Each MenuItem component's eventKey prop receives the theme name. This is also where the onSelect handler is set. chooseTheme() is a function that we defined earlier.

1. Theme property has been set to null.
2. dropdownOpen was set to false by default. This property will be used by reactstrap's ButtonDropdown component to keep the dropdown's toggling state

 
Toggle the open state of the dropdown, as defined by the toggleDropdown() method. The ButtonDropdown component will also use this.

UncontrolledButtonDropdown is an uncontrolled component provided by reactstrap that does not require the is Open or toggle handler props to function. This can be used instead of ButtonDropdown in most circumstances.
 
The DropdownItem component is used to render each item in the dropdown menu. Notice how the size prop is used to specify the button size on the DropdownToggle component. Also observe how on both the Button and DropdownToggle components, the themeClass is sent to the color prop to dynamically change the button color based on the state's theme.
 
You can also use the chooseTheme() and resetTheme() handlers to set the onClick handler on each DropdownItem. Finally, change the src/index file.js. The Bootstrap minified CSS file is first imported. You also render your ThemeSwitcher component to the DOM after importing it. If you launch the app now with a yarn start or npm start, it should work.

Let's take this a step further and make an app with more features. We'll do our best to incorporate as many Bootstrap classes and components as possible. Because reactstrap supports Bootstrap 4, we'll also use it to integrate Bootstrap with Reactjs. To make the app, you'll utilize the create-react-app command-line tool. Make sure the create-react-app utility is installed on your computer.
 
As a dependency, install Axios. Axios is a promise-based HTTP client for Node.js and the browser. We'll be able to get posts from the BaconIpsum JSON API with it. To incorporate the Bootstrap minified CSS file, make a small change to the src/index.js file. Construct a Post component that renders a page post Set the post property to null to start the component's state.
 
When the component is installed, use Axios to get a random four-paragraph post from the BaconIpsum JSON API and change the state's post field. Finally, make changes to the src/App.js file.

Discussed above are a few different approaches to incorporate Bootstrap with your React projects. We have further outlined how to use react-bootstrap and reactstrap, two of the most popular React Bootstrap packages. In this article, a few Bootstrap components like alert, badge, dropdown, navbar, nav, form, button, and card have been taken into consideration. Tables, modals, tooltips, carousel, jumbotron, pagination, tabs, and other Bootstrap components are still available for testing.