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.
sam smith
16 Apr 2023
I just want the whole world to know about this spell caster I met two weeks ago, I cannot say everything he has done for me my wife left me 3 years ago left with my kids I was going through online when I meant this wonderful man's testimony online I decided to give it a try and my wife is back to me now and we are happily married again cause is too much to put in writing all I can say is thank you very much am very happy Contact him today on oseremenspelltemple@gmail.com or whatsapp him on +2348136482342. www.facebook.com/Dr-odion-spell-temple-110513923938220