In this article, we will discuss what is the Difference between React-Bootstrap and ReactStrap, their installation, working, and differences explained with the help of an easy piece of code written for the Alert component.
Table of Contents
What is Bootstrap?
What is React-Bootstrap?
What is Reactstrap?
Reactstrap is a user-friendly library/package that contains React Bootstrap 4 components that provides prebuilt Bootstrap 4 components that help us design an impressive responsive app with an intuitive user experience.
It also does not depends on Bootstrap JavaScript and JQuery. For using Reactstrap your code should contain React prebuilt component tags, props.children for entering wrapped text inside those tags and passing the built-in props/properties to those tags.
React-Bootstrap vs Reactstrap:
There is not a big difference between them as the underlying engine that powers both are actually the same. Its core difference is that in React-Bootstrap you are supposed to make your own component (which is technically Bootstrap but uses JSX format, camel case naming convention, etc.).
Then you use those components by importing them in App.js. Now, it is created and ready to be used anywhere in App.js. However, Reactstrap contains prebuilt components, which means you do not have to go through the procedure of creating a React component. You can directly import those components.
You are free to use that component. However, if you inspect those newly added components for both React-Bootstrap and Reactstrap you will be able to see that at the back-end compiler reads both as simple Bootstrap as the website or page recognizes Bootstrap syntax.
Prerequisites:
- You should have a basic knowledge of HTML, CSS, JavaScript, and little but exposure to React.
- Install Visual Studio Code, Node, and npm.
Create React project:
npx create-react-app {your app name} Installing Bootstrap:
Step 1: You can install Bootstrap by typing
npm install --save bootstrap Or you can also use yarn instead of npm, depending on which package manager you or using in the Visual code terminal.
You can check that Bootstrap is installed by opening the package.json file. There you will be able to see Bootstrap present right into the dependencies.
Step 2: Once you have installed Bootstrap, import it inside your App.js file by typing
import 'bootstrap/dist/css/bootstrap.min.css'; Using React-Bootstrap:
Step 3: Now import the component into App.js
import Alert from './components/Alert'; import React from 'react'
function Alert(props) {
return (
<div>
<div className={props.className} role="alert">{props.children} </div>
</div>
)
}
export default Alert;
import React, { Component } from 'react';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import Alert from './components/Alert';
class App extends Component {
render (){
return(
<div>
<Alert className="alert alert-secondary">Hello i am a secondary alert ^_^ </Alert>
</div>
);
}
}
export default App;
Using Reactstrap:
INSTALL REACTSTRAP:
npm install --save reactstrap react react-dom Step 2: Once Reactstrap is installed. Import Bootstrap it in index.js by typing:
import 'bootstrap/dist/css/bootstrap.min.css';
Step 3: Import Reactstrap in App.js by typing.
import { Alert } from 'reactstrap'; Step 4: As you are working on the Alert component, that is why you type “import{Alert}” as it depends on the component you want to import.
Now, use the alert component directly on App.js. That is all you have to do.
import React from 'react';
import { Alert } from 'reactstrap';
const App = (props) => {
return (
<div>
<Alert color="secondary">Hello i am a secondary alert ^_^ </Alert>
</div>
);
};
export default App; 
Conclusion:
As it is visible from the code that in React-Bootstrap, you have to make the component yourself and add Bootstrap in it and make it reusable. Whereas Reactstrap provides you with reusable components, you do not have to go through the whole procedure of making a component.
