We'll go through how to use React and Bootstrap, and how to integrate Bootstrap to a React project. We’ll also be discussing how to install React Bootstrap packages like react-bootstrap (with examples), and outlining how to develop a React app using Bootstrap in this PPT. To know more visit at https://www.zenesys.com/blog/how-to-use-bootstrap-with-react

1. How To Use
Bootstrap With
React?

3. How to Use
Bootstrap in
React
The following are the three most typical approaches to
include Bootstrap in React:
 Make use of BootstrapCDN.
 Import Bootstrap as a dependency in React.
 Install a package for React Bootstrap (such as
bootstrap-react or reactstrap)

4. 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.

5. 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.

6. 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.

7. 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:

8. With Bootstrap, You Can Make a React App
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.

9. CONTACT US
Web: www.zenesys.com
Address: 2591 Dallas Parkway, Suite 300 Frisco, USA
Email: sales@zenesys.com
Phone: +1 (323) 565-1141