React Tutorial- How To Use Bootstrap 5 Reactstrap In A React Js App

React Bootstrap 5 Tutorial; In this react tutorial, we will learn how to integrate reactstrap with React Js. We will also learn various methods to integrate Bootstrap into React.

Below-given is the table of contents:

  1. Prerequisites
  2. Setting Up React Project
  3. Methods To Include Bootstrap
  4. Using Bootstrap Framework Via CDN In React App
  5. Setting Up Bootstrap In React App Using NPM
  6. Using React-Bootstrap In React Project
  7. Adding Reactstrap Library In React Project
  8. Using Reactstrap Buttons In react App
  9. Reactstrap Navbar In React Project
  10. Implementing Reactstrap Modal In React
  11. Conclusion

 

Step 1- Prerequisite

First of all, we need to install Node.js on our system by using the given command:

node -v
# v10.16.0

 

Step 2- Setting Up New Project

Here, we will create a new React project using CRA. So, we have to run the below command to create the basic React app:

npx create-react-app react-bootstrap-app

Then, we get into the React directory:

cd react-bootstrap-app

Further, we run the given command to start the React app:

npm start

Following will be the React project’s directory structure created by the command we have used above:

├── node_modules
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robot.txt
├── src
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   └── serviceWorker.js
├── .gitignore
├── package-lock.json
├── package.json
├── README.md

 

Step 3- Methods To Include Bootstrap In react App

There are various methods available through which we can implement Bootstrap with React apps; some of the ways are given below:

  • Implementing Bootstrap Using CDN
  • Installing Bootstrap NPM Library From Node Package Manager
  • Installing And Using React-Bootstrap Library In React
  • Integrating Reactstrap Bootstrap Library In React

 

Step 4- Using Bootstrap Framework Via CDN In React App

Now, we will learn how to implement Bootstrap from a CDN (Content Delivery Network) in React app. This approach is straightforward and requires only <link rel=”stylesheet” /> tag to be inserted in public/index.html file:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

Bootstrap requires jQuery, Popper.js and Bootstrap.js to be included in our project to make its JavaScript components work appropriately. We must have the following JavaScript file before the body tag ends in our index.html file in React app:

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

 

Step 5- Setting Up Bootstrap In React App Using NPM

It is also possible to set up Bootstrap in React using NPM in our React app. We have to use the given command:

npm install bootstrap

After we have installed the Bootstrap via NPM package, we need to import Bootstrap CSS into our React project. Then, we go to the src/index.js file and include the following code:

import 'bootstrap/dist/css/bootstrap.min.css';

We are all set to use Bootstrap’s UI component in our React app. But if we want to use JavaScript components, we need to integrate jQuery and Popper.js packages using the following command:

npm install popper.js jquery

Here, we head over to the src/index.js file and include the given code:

import $ from 'jquery';
import Popper from 'popper.js';
import 'bootstrap/dist/js/bootstrap.bundle.min';

Finally, we can easily use Bootstrap UI and JavaScript components in our React app.

 

Step 6- Using React-Bootstrap In React Project

Here, in this React tutorial, we have used the React-Bootstrap framework and its various UI components to build the layout of the React app.

We will learn the following things in the referral tutorial:

  • Installing and setting up React-Bootstrap in React app.
  • Working with grid systems such as Container, Row and Col.
  • Getting started with Nav, Navbar, Forms, Buttons, etc.

 

Step 7- Adding The Reactstrap Library To React Project

Reactstrap is a well-known framework since it supports the latest version of Bootstrap. With its help, we can use various Bootstrap components such as a grid system, navigation, icons, typography, forms, buttons and table.

We will have to run the given command in order to install the Bootstrap and Reactstrap from NPM (Node Package manager). The Reactstrap does not include Bootstrap CSS by default. We will install both libraries separately.

npm install --save bootstrap
npm install --save reactstrap react react-dom

Further, we will include Bootstrap CSS in the src/index.js file:

import 'bootstrap/dist/css/bootstrap.min.css';

 

Step 8- Using Reactstrap Buttons In React App

In this step, we will use Reactstrap buttons in React app for which we have to import the Buttons component in the src/App.js file and include the Buttons code from the Reactstrap site:

import React from 'react';
import { Button } from 'reactstrap';
import './App.css';
function App() {
  return (
    <div className="App">
      <Button color="primary">primary</Button>{' '}
      <Button color="secondary">secondary</Button>{' '}
      <Button color="success">success</Button>{' '}
      <Button color="info">info</Button>{' '}
      <Button color="warning">warning</Button>{' '}
      <Button color="danger">danger</Button>{' '}
      <Button color="link">link</Button>
    </div>
  );
}
export default App;

 

Step 9- Reactstrap Navbar In React Project

The Reactstrap Navbar element includes many small components such as Collapse, Navbar, NavbarToggler, Nav, NavItem, NavLink, DropDownMenu, etc.

So, in this step, we will see how to use Reactstrap Navbar to create navigation in React project.

Now, we add the Reactstrap Navbar services in the src/app.js file as given below:

import React from 'react';
import { Fragment } from 'react';
import {
  Collapse,
  Navbar,
  NavbarToggler,
  NavbarBrand,
  Nav,
  NavItem,
  NavLink,
  UncontrolledDropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem
} from 'reactstrap';
export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.toggle = this.toggle.bind(this);
    this.state = {
      isOpen: false
    };
  }
  toggle() {
    this.setState({
      isOpen: !this.state.isOpen
    });
  }
  render() {
    return <Fragment>
      <Navbar color="light" light expand="md">
        <NavbarBrand href="/">reactstrap</NavbarBrand>
        <NavbarToggler onClick={this.toggle} />
        <Collapse isOpen={this.state.isOpen} navbar>
          <Nav className="ml-auto" navbar>
            <NavItem>
              <NavLink href="/components/">Components</NavLink>
            </NavItem>
            <NavItem>
              <NavLink href="https://github.com/reactstrap/reactstrap">GitHub</NavLink>
            </NavItem>
            <UncontrolledDropdown nav inNavbar>
              <DropdownToggle nav caret>
                Options
                </DropdownToggle>
              <DropdownMenu right>
                <DropdownItem>
                  Option 1
                  </DropdownItem>
                <DropdownItem>
                  Option 2
                  </DropdownItem>
                <DropdownItem divider />
                <DropdownItem>
                  Reset
                  </DropdownItem>
              </DropdownMenu>
            </UncontrolledDropdown>
          </Nav>
        </Collapse>
      </Navbar>
    </Fragment>
  }
}

Now, we have created the responsive and intuitive Navigation Bar in React app.

 

Step 10- Implementing Reactstrap Modal In React

Now, we will see how to implement the Reactstrap modal in React app using Reactstrap API:

import React from 'react';
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      modal: false
    };
    this.toggle = this.toggle.bind(this);
  }
  toggle() {
    this.setState(prevState => ({
      modal: !prevState.modal
    }));
  }
  render() {
    return (
      <div>
        <Button color="danger" onClick={this.toggle}>Open Modal</Button>
        <Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className}>
          <ModalHeader toggle={this.toggle}>Modal title</ModalHeader>
          <ModalBody>
            A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now. When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few stray gleams steal into the inner sanctuary, I throw myself down among the tall grass by the trickling stream; and, as I lie close to the earth, a thousand unknown plants are noticed by me: when I hear the buzz of the little world among the stalks, and grow familiar with the countless indescribable forms of the insects and flies, then I feel the presence of the Almighty.
      </ModalBody>
          <ModalFooter>
            <Button color="primary" onClick={this.toggle}>CTA</Button>
            <Button color="secondary" onClick={this.toggle}>Cancel</Button>
          </ModalFooter>
        </Modal>
      </div>
    )
  }
}

 

Conclusion

We have reached the end of this React tutorial in which we have seen how to use Bootstrap 5 Reactstrap in React JS Application.

 

Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *