Monday, August 15, 2022
HomeSoftware DevelopmentReactJS Reactstrap Introduction - GeeksforGeeks

ReactJS Reactstrap Introduction – GeeksforGeeks

[ad_1]

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

Stipulations:

  • Good information of react.
  • Good information of Bootstrap.

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

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

Reactstrap presently requires, React 16.8 or larger. Reactstrap is presently suitable with Bootstrap 5.1. If you’re 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 will be included instantly 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.

Javascript

import React from "react";

import { Alert } from 'reactstrap';

  

operate App() {

    return (

        <div>

            <Alert shade="data">

                Hiya, I'm an alert 

            </Alert>

        </div>

    )

}

  

export default App;

Output:

 

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

Javascript

import React from "react";

import { Kind, FormGroup, Label, Enter, Button } from 'reactstrap';

  

operate App() {

    return (

        <div>

            <Kind>

                <FormGroup>

                    <Label for="exampleEmail">

                        Electronic mail

                    </Label>

                    <Enter

                        id="exampleEmail"

                        title="e mail"

                        placeholder="Enter Your e mail"

                        sort="e mail"

                    />

                </FormGroup>

                <FormGroup>

                    <Label for="examplePassword">

                        Password

                    </Label>

                    <Enter

                        id="examplePassword"

                        title="password"

                        placeholder="Enter your distinctive password"

                        sort="password"

                    />

                </FormGroup>

                <Button>

                    Submit

                </Button>

            </Kind>

        </div>

    )

}

  

export default App;

Output:

 

[ad_2]

RELATED ARTICLES

Most Popular

Recent Comments