In this guide, we’ll concentrate on the following abilities:
- Using Bootstrap’s style and feel to build UI in a React-based web app.
- Creating a React app for listing contacts with reactstrap.
The most popular JS framework for creating dynamic web apps is React. However, because it is a view library, it does not provide approaches for creating responsive and intuitive designs. We may use Bootstrap, a front-end design framework to solve this problem.
What is Bootstrap in React?
React-bootstrap is a library for creating front-end stylesheets. This library is made up of two libraries, one of which React.Js and then bootstrap. JS to utilize react-bootstrap in this way. Why? Because react-bootstrap includes all of the bootstrap features in our react.
Why Can’t Bootstrap Components Be Used with React?
It’s simple to add an HTML tag like <link rel=”stylesheet”/> to an HTML file like index.html, however, it’s not so simple to add Bootstrap to React. The reason for this is because jQuery is used by Bootstrap to operate specific user interface components. Furthermore, jQuery directly manipulates the DOM, which is in direct opposition to React’s declarative approach. If the requirement is limited to a receptive 12-column grid or components that do not involve jQuery, we can use the plain vanilla Bootstrap CSS for online apps. Otherwise, there are a variety of libraries that allow you to use Bootstrap with React.
We’ll look at both approaches to see which one is ideal for a certain situation. We’ll concentrate on the specifics of combining Bootstrap with a React app.
How to Use React with a Bootstrap Stylesheet
To get started with our React project, we’ll use Create React App CLI. It does not require any setup to get started.
Install Create React App and start the server in development mode using the following commands:
create-react-app my-bootstrap-react-app cd my-bootstrap-react-app npm start
Create React App generates the following directory structure:
The next step is to get the most recent version of the Bootstrap library from the official website. The built and reduced versions of JavaScript and CSS files are included in the downloaded package. For programs that only need to use grids, there is also a grid-specific stylesheet. The next step is to create a new CSS folder in public, copy the bootstrap.min.css file there, and then link it in public/index.html with the needed code.
<head> <link rel="stylesheet" href="css/bootstrap.min.css"> </head>
Another option is to utilize a CDN to obtain the compressed CSS:
<link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
How to Use React with Regular Bootstrap Classes
After the Bootstrap stylesheet has been integrated to a React app, we may use Bootstrap classes with JSX code. We’ll copy some random sample code from the Bootstrap example site to validate this:
import React from "react";
import {render} from "react-dom";
import Forms from "./Forms";
import NavBar from "./NavBar";
const App = () => (
<div>
<NavBar />
<br />
<div className="container">
<div className="row">
<div className=" col-lg-offset-4 col-lg-8">
<Forms />
</div>
</div>
</div>
</div>
);
render(<App />, document.getElementById("root"));
To make the most of React, it would be fantastic if the Bootstrap classes could be imported as React components. Instead of HTML classes, we might use grid, row, and Column components to structure the page, as illustrated below:
<!--Bootstrap Using HTML styles/classes--> <div class="container"> <div class="row"> <div class="col-sm"> Col 1 of 3 </div> <div class="col-sm"> Col 2 of 3 </div> <div class="col-sm"> Col 3 of 3 </div> </div> </div> <!--Bootstrap Using React-based Components--> <Grid> <Row> <Col sm> Col 1 of 3 </Col> <Col sm> Col 2 of 3 </Col> <Col sm> Col 3 of 3 </Col> </Row> </Grid>
Fortunately, we don’t need to create our own library to accomplish this; libraries are already accessible. Let’s take a look at a couple of them.
React and Bootstrap with Third-Party Libraries
Some packages are attempting to create a React-specific Bootstrap implementation that will allow us to use JSX components as well as interact with Bootstrap styles. Some of the most popular Bootstrap modules that may be utilized with React projects are listed below.
React-Bootstrap is one of the most popular libraries for integrating Bootstrap into React projects. But its current implementation is geared for Bootstrap v3 and not the latest version.
Another library that allows us to use Bootstrap components in a React program is reactstrap. Reactstrap, unlike React-Bootstrap, is designed to work with the most recent version of Bootstrap. Forms, buttons, tables, layout grids, and navigation are all included in the reactstrap implementation. It’s still in beta, but it’s a good option to using React and Bootstrap together to create apps.
On GitHub, there are various alternatives such as React-UI and some domain-specific modules such as CoreUI-React and React-bootstrap-table that provide rich facilities for developing attractive UI for React apps.We’ll concentrate on reactstrap in this article because it’s the most popular and uses the most recent Bootstrap version.
How to Install and Configure the Reactstrap Library
To get started, we’ll use npm to install the reactstrap library:
npm install --save reactstrap@next
The module’s relevant components can now be imported as follows:
import { Container, Row, Col} from 'reactstrap';
The library will not work as expected at this time because it does not include Bootstrap CSS. We’ll have to manually add it as stated below:
npm install --save bootstrap
Next, in our src/index.js file, import the Bootstrap CSS:
import 'bootstrap/dist/css/bootstrap.css';
Conclusion
This guide has covered everything we need to know about integrating Bootstrap with React apps. There is a slew of frameworks for integrating Bootstrap with React apps, and we’ve covered a couple of the most well-known. We’ve also worked with reactstrap, which is one of the most widely used libraries.
