Reactstrap is a version Bootstrap made for React.

It’s a set of React components that have Boostrap styles.

In this article, we’ll look at how to get started with Reactstrap and display alerts.

Getting started

We can install Reactstrap by running:

npm install --save reactstrap

Then we can import the components we need.

We also need to install Bootstrap since the Bootstrap CSS isn’t included.

So we can write:

npm install --save bootstrap

Then we can import it by writing:

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

Alerts

We can add alerts with the Alert component.

For instance, we can write:

import React from "react";
import { Alert } from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <div className="App">
      <Alert color="primary">
        <a href="#" className="alert-link">
          link
        </a>{" "}
        message
      </Alert>
      <Alert color="secondary">
        <a href="#" className="alert-link">
          link
        </a>{" "}
        message
      </Alert>
      <Alert color="success">
        <a href="#" className="alert-link">
          link
        </a>{" "}
        message
      </Alert>
      <Alert color="danger">
        <a href="#" className="alert-link">
          link
        </a>{" "}
        message
      </Alert>
      <Alert color="warning">
        <a href="#" className="alert-link">
          link
        </a>{" "}
        message
      </Alert>
      <Alert color="info">
        <a href="#" className="alert-link">
          link
        </a>{" "}
        message
      </Alert>
      <Alert color="light">
        <a href="#" className="alert-link">
          link
        </a>{" "}
        message
      </Alert>
      <Alert color="dark">
        <a href="#" className="alert-link">
          link
        </a>{" "}
        message
      </Alert>
    </div>
  );
}

We have the Alert component with the color prop to set the color.

className has the color for the link.

#technology #web-development #software-development #javascript #programming