Reactstrap vs react-bootstrap

Many of you might have already known about react-bootstrap. Bootstrap components like HTML, CSS and JavaScript have additional dependencies like JQuery which is hard to use in React Applications. To overcome this we have react-bootstrap and reactstrap libraries. Both have a similar approach but there are some minor differences. Let’s see them through simple examples. Here is an example of creating a simple react-bootstrap application. 

npm install -g create-react-app
create-react-app my_app
cd my_app/
npm start

To open this app type “http://localhost:3000/” in your browser. Then add bootstrap using npm.

npm install react-bootstrap bootstrap

In the src folder inside myapp directory open App.js file and write the following code.

// 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


Type the following code into the index file which is in the same folder.

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();


The output will display a modal that shows Welcome To React-Bootstrap and a click here button.

Now create an application using reactstrap.

npm install -g create-react-app
create-react-app myapp
cd myapp/
npm start

Then add the following Bootstraps.

npm i bootstrap
npm i reactstrap react react-dom

Then write the following code in the App.js file in the src folder inside myapp directory.

// 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;


Then type the following code in index.js file.

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();


The outputs are similar for both.