ReactJS Reactstrap Introduction – GeeksforGeeks

Reactstrap is a bootstrap-based React UI library that’s used to make handsome webpages with its seamless and easy-to-use part. Reactstrap doesn’t embed its personal model, but it surely relies upon upon the Bootstrap CSS framework for its types and theme.

Stipulations:

• Good data of react.
• Good data of Bootstrap.

Set up Reactstrap: You possibly can set up it with npm or yarn by the next the command:

npm i reactstrap bootstrap --save
// or
yarn add reactstrap

Reactstrap at present requires, React 16.8 or increased. Reactstrap is at present appropriate with Bootstrap 5.1. In case you are utilizing Bootstrap 4, you’ll want to make use of Reactstrap v8.

Import Bootstrap CSS within the src/index.js file:

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

Now you may merely import Reactstrap elements in your utility like

import { Button } from 'reactstrap';

By utilizing CDN: Reactstrap could be included immediately in your utility’s bundle and linked on to a CDN.

https://cdnjs.cloudflare.com/ajax/libs/reactstrap/4.8.0/reactstrap.min.js

Use: To make use of Reactstrap primarily, we now have to create a React app by the next code:

npx create-react-app appname

Change listing to appname by:

cd appname

Now the app construction will appear to be this:

 

Instance 1: On this instance, we’re making a easy alert field utilizing Reactstrap.

Output:

 

Instance 2: On this instance, we’re making a easy login for utilizing Reactstrap.

Output: