Reactstrap Components In ReactJS - Part Three

Introduction

 

Reactstrap is a component library for Reactjs. It provides in-built Bootstrap components that provide flexibility and inbuilt validations, making it easy to create a UI. Reactstrap is similar to Bootstrap, but it has self-contained components.

 

You can check my previous articles in which we discussed how we add Reactstrap and basic Reactstrap components in Reactjs applications from the below links.

• Add Reactstrap Components In ReactJS
• Reactstrap Components In ReactJS
• Reactstrap Components In ReactJS Part 2

In this article we will discuss the following Reactstrap components,

• Alerts
• Badge
• Spinners 

Prerequisites

• We should have a basic knowledge of HTML and JavaScript.
• Visual Studio Code be installed
• Node and NPM installed

Let's create a new React project by using the following command,

npx create-react-app reactstrapcomponent

Install Reactstrap by using the following command, 

npm install --save reactstrap react react-dom

Now install Bootstrap in this project by using the following command.

npm install --save bootstrap

 Now, open the index.js file and add import Bootstrap.

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

 Now, in Visual Studio code, go to src folder and create a new folder and inside this folder add 3 new components, 

• SpinnersDemo.js
• AlertsDemo.js
• BadgeDemo.js

Now open SpinnersDemo.js file and add the following code in this component, 

import React, { Component } from 'react'
import { Navbar, Nav, NavItem, NavLink } from 'reactstrap';
import { Spinner } from 'reactstrap';
export class SpinnersDemo extends Component {
        render() {
                return (
                        <div>
                                <Navbar className="btn btn-info" light expand="md">
                                        <Nav color="info" navbar>
                                                <NavItem className="hdr">
                                                        <NavLink style={{ "color": "white" }} >Reactstrap Spinners Components</NavLink>
                                                </NavItem>
                                        </Nav>
                                </Navbar>
                                <div style={{ "marginTop": "10px" }}>
                                        <Spinner color="primary" />
                                        <Spinner color="info" />
                                        <Spinner color="light" />
                                </div>
                                <br></br>
                                <div>
                                        <Spinner type="grow" color="secondary" />
                                        <Spinner type="grow" color="success" />
                                        <Spinner type="grow" color="info" />
                                </div>
                        </div>
                )
        }
}

export default SpinnersDemo

Now open App.js file and add the following code,

import React from 'react';
import logo from './logo.svg';
import './App.css';
import SpinnersDemo from './SpinnersDemo'
function App() {
  return (
    <div className="App">
      <SpinnersDemo></SpinnersDemo>
    </div>
  );
}

export default App;

Run the project by using 'npm start' and check the result.

 

 

Now open BadgeDemo.js file and add the following code in this component

import React, { Component } from 'react'
import { Badge, Button} from 'reactstrap';
import { Navbar, Nav, NavItem, NavLink } from 'reactstrap';
export class BadgeDemo extends Component {
        render() {
                return (
                        <div>
                              <Navbar className="btn btn-info" light expand="md">
                                        <Nav color="info" navbar>
                                                <NavItem className="hdr">
                                                        <NavLink style={{ "color": "white" }} >Reactstrap Badge Components</NavLink>
                                                </NavItem>
                                        </Nav>
                                </Navbar>
                                <div style={{ "marginTop": "10px" }}>
                                <h2>News <Badge color="secondary">New</Badge></h2>
                                <Badge color="danger">Danger</Badge><br></br>
                                <Button color="primary" outline>
                                Update <Badge color="secondary">4</Badge>
                                </Button>
                                </div>
                        </div>
                )
        }
}

export default BadgeDemo

Now open App.js file and add the following code,

import React from 'react';
import logo from './logo.svg';
import './App.css';
import BadgeDemo from './BadgeDemo'
function App() {
  return (
    <div className="App">
      <BadgeDemo></BadgeDemo>
    </div>
  );
}

export default App;

Run the project by using 'npm start' and check the result,

 

Now open AlertsDemo.js file and add the following code in this component.

import React, { useState } from 'react';
import { Alert } from 'reactstrap';
import { Navbar, Nav, NavItem, NavLink } from 'reactstrap';
const AlertsDemo = (props) => {
        const [visible, setVisible] = useState(true);

        const onDismiss = () => setVisible(false);

        return (
                <>
                        <Navbar className="btn btn-info" light expand="md">
                                <Nav color="info" navbar>
                                        <NavItem className="hdr">
                                                <NavLink style={{ "color": "white" }} >Reactstrap Alert Components</NavLink>
                                        </NavItem>
                                </Nav>
                        </Navbar>
                        <Alert color="warning" isOpen={visible} toggle={onDismiss}>
                                Alert Message
                       </Alert>
                       <Alert color="success" isOpen={visible} toggle={onDismiss}>
                                Alert Message
                       </Alert>
                </>
        );
}

export default AlertsDemo;

Now open App.js file and add the following code,

import React from 'react';
import logo from './logo.svg';
import './App.css';
import AlertsDemo from './AlertsDemo'
function App() {
  return (
    <div className="App">
      <AlertsDemo></AlertsDemo>
    </div>
  );
}

export default App;

 Run the project by using 'npm start' and check the result,

 

Summary

 

In this article we learned how to use Alerts, Badge, and Spinners in Reactstrap components. Reactstrap is a component library for ReactJS.