Until now, we have covered how we can create a DOM element and how DOM interacts with a React component. As we have seen, every framework has a different way to interact with DOM elements, whereas React uses a fast, internal synthetic DOM to perform diffs and computes the most efficient DOM mutation for you where your component actually lives.
In this chapter, we'll take a look at how jQuery Bootstrap components work in React virtual DOM. We are also going to cover the following topics:
- Component life cycle methods
- Component integration
- Bootstrap modal
- Examples with details
This will give you a better understanding of dealing with jQuery Bootstrap components with React.
In Bootstrap we have lots of reusable components that makes a developer's life easy. In Chapter 1, Getting Started with React and Bootstrap and Chapter 2, Lets Build a Responsive Theme with React-Bootstrap and React, we explained the integration of Bootstrap. So let us start with a small component to integrate in React.
In Bootstrap we have the alert component to show the messages in the UI as per the user action that makes your component more interactive.
First of all, we need to enfold a text in the .alert class that contains the close button.
Bootstrap also provides the contextual classes that represent the different colors according to the messages:
.alert-success.alert-info.alert-warning.alert-error
Bootstrap gives us the predefined structure of the alert component that makes it easy to include it in our project:
<div class="alert alert-info alert-dismissible fade in" role="alert">
<button type="button" class="close" data-dismiss="alert"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
When we are using the close button as a child of the wrapper tag where we have declared the alert class, we need to add the .alert-dismissible class to that element as shown in the preceding example code.
Adding the custom attribute, data-dismiss="alert", will give us the close functionality in alert.