ReactJS Reactstrap

  • Last Updated : 02 May, 2022

Reactstrap is a React component library for Bootstrap. 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. This allows you to have consistent styles across your React-based components and static parts of your site and allows you to include your own custom Bootstrap theme when needed.

Install Reactstrap: You can install with npm or yarn by 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 component in your application like –

import { Button } from 'reactstrap';

 By 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

Let’s understand the working with the help of examples.

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

npx create-react-app appname

Step 2: change directory to appname by:

cd appname

Project Structure: Now the app structure will look like this.

 

Change the following code in App.js file.

App.js

import React from 'react';
import { Button } from 'reactstrap';

function App() {
  return (
    <div>
      <Button color="primary">
        Click Me
      </Button>
    </div>
  );
};

export default App;

Step to run the application: Open the terminal and type the following command.

npm start

Output:

 

Please write comments if you find anything incorrect, or you want to share more information about the topic discussed above

My Personal Notes arrow_drop_up