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.
Javascript
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.
Javascript
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:
