ReactJS Reactstrap Introduction

Reactstrap is a bootstrap-based React UI library that is used to make good-looking webpages with its seamless and easy-to-use component. Reactstrap does not embed its own style, but it depends upon the Bootstrap CSS framework for its styles and theme.

Prerequisites:

• Good knowledge of react.
• Good knowledge of Bootstrap.

Install Reactstrap: You can install it with npm or yarn by the following the command:

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

Reactstrap currently requires, React 16.8 or higher. Reactstrap is currently compatible with Bootstrap 5.1. If you are using Bootstrap 4, you'll need to use Reactstrap v8.

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

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

Now you can simply import Reactstrap components in your application like

import { Button } from 'reactstrap';

By using CDN: Reactstrap can be included directly in your application's bundle and linked directly to a CDN.

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

Use: To use Reactstrap primarily, we have to create a React app by the following code:

npx create-react-app appname

Change directory to appname by:

cd appname

Now the app structure will look like this:

Example 1: In this example, we are creating a simple alert box using Reactstrap.

import React from "react";
import { Alert } from 'reactstrap';

function App() {
    return (
        <div>
            <Alert color="info">
                Hello, I am an alert 
            </Alert>
        </div>
    )
}

export default App;

Output:

Example 2: In this example, we are creating a simple login for using Reactstrap.

import React from "react";
import { Form, FormGroup, Label, Input, Button } from 'reactstrap';

function App() {
    return (
        <div>
            <Form>
                <FormGroup>
                    <Label for="exampleEmail">
                        Email
                    </Label>
                    <Input
                        id="exampleEmail"
                        name="email"
                        placeholder="Enter Your email"
                        type="email"
                    />
                </FormGroup>
                <FormGroup>
                    <Label for="examplePassword">
                        Password
                    </Label>
                    <Input
                        id="examplePassword"
                        name="password"
                        placeholder="Enter your unique password"
                        type="password"
                    />
                </FormGroup>
                <Button>
                    Submit
                </Button>
            </Form>
        </div>
    )
}

export default App;

Output: