Difference between reactstrap and react-bootstrap

Bootstrap is a popular front-end CSS framework used by web developers to design their web applications. Bootstrap components include HTML, CSS, and JavaScript with additional dependencies like jQuery which makes it hard to use in React applications. There are two libraries available which are reactstrap and react-bootstrap that help us overcome this problem. Both libraries have a similar approach to Bootstrap components. However, there exists minor differences between the two libraries that make one preferable over the other as per the requirements.

Let us see a comparison between the two:

PARAMETER	REACT-BOOTSTRAP	REACTSTRAP
Created	Dec 28, 2013	Feb 19, 2016
Description	React-Bootstrap is Bootstrap 4 components built with React	Reactstrap is stateless React Bootstrap 4 components
Last Updated	Oct 19, 2020	Oct 17, 2020
Licenses	MIT	MIT
Versions	155	200
Dependencies	provides own implementation for animations and positioning.	depends on react-transition group and react-popper for animations and positioning of popups.
Exclusion	No more dependencies on Javascript and jquery	It does not include Bootstrap CSS and is not dependent on Javascript or jquery
Stars	18, 456	9594
Open issues	117	224
Downloads	More number of downloads	Lesser number of downloads
Installation	npm install react-bootstrap	npm install reactstrap
Uninstall	npm uninstall react-bootstrap	npm uninstall reactstrap

React-Bootstrap:

The following are the steps to create a simple react-bootstrap application

npm install -g create-react-app

create-react-app my_app

cd my_app/

npm start

Open the application at “http://localhost:3000/” 

Adding Bootstrap:

npm install react-bootstrap bootstrap

In the “myapp” directory, there is an “src” folder that has “index.js” and “App.js” files which are of our interest. Write the following code in each file as follows and view the app at http://localhost:3000/

App.js file: The “App.js” file has the following code.

Javascript

// Importing individual react components
import React from 'react';

import Jumbotron from 'react-bootstrap/Jumbotron';
import Container from 'react-bootstrap/Container';
import Button from 'react-bootstrap/Button';

// App function is created which contains the html
// code that is displayed in the webpage
const App = () => (
  <Container className="p-3">
    <Jumbotron>
      <h1 className="header">Welcome To React-Bootstrap</h1>
      <Button variant="danger">Click here</Button>
    </Jumbotron>
  </Container>
);

export default App;

index.js: The “index.js” file has the following code.

Javascript

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

// Importing the Bootstrap CSS
import 'bootstrap/dist/css/bootstrap.min.css';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// For faster loading and working of app,
// you can change unregister() to register()
// below. Note this comes with some pitfalls.
// Learn more about service workers:
// https://bit.ly/CRA-PWA
serviceWorker.unregister();

Output:

Reactstrap:

The following are the steps to create a simple reactstrap application

npm install -g create-react-app

create-react-app myapp

cd myapp/

npm start

Open “http://localhost:3000/” to see your app.

Adding Bootstrap:

npm i bootstrap

npm i reactstrap react react-dom

In the “myapp” directory, there is a “src” folder that has “index.js” and “App.js” files which are of our interest. Write the following code in each file as follows and view the app at http://localhost:3000/

App.js: The “App.js” file has the following code.

Javascript

// Importing individual react components to
// reduce the code size
import React, { Component } from 'react';
import { Button } from 'reactstrap';
import { Jumbotron } from 'reactstrap';
import { Row } from 'reactstrap';
import { Col } from 'reactstrap';
import { Container } from 'reactstrap';

// This is what is displayed on the webpage
// we create a jumbotron having a message
// and a button
class App extends Component {
    render() {
        return (
            <div>
                <Jumbotron>
                    <Container>
                        <Row>
                            <Col>
                                <h1>Welcome to Reactstrap</h1>
                                <p>
                                    <Button color="danger">
                                        Click Me
                                    </Button>
                                </p>
                            </Col>
                        </Row>
                    </Container>
                </Jumbotron>
            </div>
        );
    }
}

export default App;

index.js: The “index.js” file has the following code.

Javascript

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

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

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want your app to work offline
// and load faster, you can change
// unregister() to register() below.
// Note this comes with some pitfalls.
// Learn more about service workers:
// https://bit.ly/CRA-PWA
serviceWorker.unregister();

Output:

Conclusion:

Reactstrap makes use of class components whereas React-bootstrap makes use of functions and hooks.   Both the codes yield similar output and the only difference is the use of the components. The user may choose either depending on their preferences.