Open In App

Difference between reactstrap and react-bootstrap

Improve
Improve
Like Article
Like
Save
Share
Report

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



Last Updated : 25 Oct, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads