react js-tutorial

React Bootstrap

We used and adored Bootstrap, the most well-known CSS framework, when we created web pages with jQuery, Popper.js, and Vanilla JavaScript. We were able to start something really rapidly and present prototypes to our stakeholders more swiftly.

We can create responsive web pages with special built-in tools using Bootstrap.

With the introduction of React, we needed to find a solution that would behave similarly to Bootstrap but allow us to write directly to the Virtual DOM rather than the Real DOM. Introducing React Bootstrap. React Bootstrap will be explained to you today, along with how to create a website.

The three most common ways to add Bootstrap to your React app are:

  • Using the Bootstrap CDN
  • Importing Bootstrap in React as a dependency
  • Installing a React Bootstrap package such as react-bootstrap or reactstrap

Let’s go over each of these in more detail.

React Bootstrap: Why Use It?

Making responsive, quick React apps without needless dependencies and downloads is made possible with React Bootstrap. Because Bootstrap was specifically created for React, it feels almost “native.” Let’s examine some of the major justifications for utilising React Bootstrap in your apps.

Add React Bootstrap to your app

There are two ways to get started with React Bootstrap.

1. Package Manager

Use npm or yarn to add the package to your project. In the root of your React application, in your terminal, use the following command for whichever package manager you are using:

npm install --save react-bootstrap bootstrap // npm

yarn add react-bootstrap bootstrap // yarn


2. CDN

Copy and paste this CDN into the index.html file in your public folder. This script will go just above your closing body tag in your HTML.

<script src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js" crossorigin>

Style & Bootstrap Stylesheet

React Bootstrap does not come with any CSS. You will need to include some sort of stylesheet for your components to appear as they should on the screen. As with adding the package to your project you can do this one of two ways.

1. Import Stylesheet

Add the import statement to your index.js file or your App.js file

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

2. Link Stylesheet

Use the latest Bootstrap CDN to get the latest stylesheet and add it to the head of your index.html document, located in the public folder.

<link
 rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
 crossorigin="anonymous"
/>

If you chose to use a package manager for adding the react-bootstrap and Bootstrap package, make sure you use the import statement to add the stylesheet. If you choose to use the CDN in the first step, choose to use the CDN for adding the stylesheet.

Using SASS?

If you are using SASS, create an App.scss file and import Bootstrap’s SASS file to this file instead.

@import "~bootstrap/scss/bootstrap";

In your App.js file, you will instead import ./App.scss instead.

Customization of Styles

If you would like to customize styles for your application, it is recommended to use SASS to do so. Create a custom.scss file to include your changes and then import the bootstrap stylesheet below your changes. Let’s look at an example of customization below.

// make your customizations
$theme-colors: (
   "info": pink,
   "danger": teal,
   "primary": purple
);
// import bootstrap stylesheet
@import "~bootstrap/scss/bootstrap";

Once you’ve made your customizations, you can import your custom.scss to the main SASS file.

@import "custom";

React Bootstrap Installation

Let us create a new React app using the create-react-app command as follows

$ npx create-react-app react-bootstrap-app  

After creating the React app, the best way to install Bootstrap is via the npm package. To install Bootstrap, navigate to the React app folder, and run the following command.

$ npm install react-bootstrap bootstrap --save  

Importing Bootstrap

Now, open the src/index.js file and add the following code to import the Bootstrap file.

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

We can also import individual components like import { SplitButton, Dropdown } from ‘react-bootstrap’; instead of the entire library. It provides the specific components which we need to use, and can significantly reduce the amount of code.

In the React app, create a new file named ThemeSwitcher.js in the src directory and put the following code.

import React, { Component } from 'react';  
import { SplitButton, Dropdown } from 'react-bootstrap';  
  
class ThemeSwitcher extends Component {  
  
  state = { theme: null }  
    
  chooseTheme = (theme, evt) => {  
    evt.preventDefault();  
    if (theme.toLowerCase() === 'reset') { theme = null }  
    this.setState({ theme });  
  }  
    
  render() {  
    const { theme } = this.state;  
    const themeClass = theme ? theme.toLowerCase() : 'default';  
      
    const parentContainerStyles = {  
      position: 'absolute',  
      height: '100%',  
      width: '100%',  
      display: 'table'  
    };  
      
    const subContainerStyles = {  
      position: 'relative',  
      height: '100%',  
      width: '100%',  
      display: 'table-cell',  
    };  
      
    return (  
      <div style={parentContainerStyles}>  
        <div style={subContainerStyles}>  
          
          <span className={`h1 center-block text-center text-${theme ? themeClass : 'muted'}`} style={{ marginBottom: 25 }}>{theme || 'Default'}</span>  
            
          <div className="center-block text-center">  
            <SplitButton bsSize="large" bsStyle={themeClass} title={`${theme || 'Default Block'} Theme`}>  
              <Dropdown.Item eventKey="Primary Block" onSelect={this.chooseTheme}>Primary Theme</Dropdown.Item>  
              <Dropdown.Item eventKey="Danger Block" onSelect={this.chooseTheme}>Danger Theme</Dropdown.Item>  
              <Dropdown.Item eventKey="Success Block" onSelect={this.chooseTheme}>Success Theme</Dropdown.Item>  
              <Dropdown.Item divider />  
              <Dropdown.Item eventKey="Reset Block" onSelect={this.chooseTheme}>Default Theme</Dropdown.Item>  
            </SplitButton>  
          </div>    
        </div>  
      </div>  
    );   
  }   
}  
export default ThemeSwitcher;  

Now, update the src/index.js file with the following snippet.

Index.js

import 'bootstrap/dist/css/bootstrap.min.css';  
import React from 'react';  
import ReactDOM from 'react-dom';  
import App from './App.js';  
import './index.css';  
import ThemeSwitcher from './ThemeSwitcher';  
  
ReactDOM.render(<ThemeSwitcher />, document.getElementById('root'));  

Output

When we execute the React app, we should get the output as below.

Click on the dropdown menu. We will get the following screen.

Now, if we choose the Success Theme, we will get the below screen.

RECOMMENDED ARTICLES





Leave a Reply

Your email address will not be published.