Introduction 

Reactstrap is a component library for React. It provides inbuilt Bootstrap components that make it easy to create UI with self-contained components that provide flexibility and inbuilt validations. Reactstrap is easy to use and supports Bootstrap 4.

Prerequisites

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

First of all, let’s check that Node is installed in your system. If not, check out this link: https://nodejs.org/en/download/ 

Downloading Node

Downloading Node

Download the latest version of Node.js according to the Windows version (64-bit or 32-bit) on your machine. To check the configuration of your machine, right-click on “My Computer”, select Properties, and check the system type. After downloading Node.js, install it. 

Let’s create a new react project by using the following command,

Install Bootstrap

Reactstrap does not include Bootstrap CSS, so to use Bootstrap CSS, we need to add Bootstrap. Use the following command to install two application configuration settings defined — one that stores the name of the MongoDB database and the other that contains the MongoDB connection string (with a placeholder for the database name). You should have something like:

Install Reactstrap by using the following command:

Now open the index.js file and import Bootstrap CSS. 

Now, right-click on src folder and add a new component, named ReactstrapDemo.js.

Now, open ReactstrapDemo.js component and import the required reference. Let’s import the required Reactstrap components:

Add the following code in this component:

Now, open the app.js file and add the following code:

Now, run the project and check the result:

Initial ouput

Initial ouput

Now, add a new component named ReactstrapDemo1.js. Now, open the ReactstrapDemo1.js component:

Now, open the app.js file and add the following code:

Now run the project and check the result

Collapsed panel with Reactstrap

Collapsed panel with Reactstrap

Uncollapsed panel with Reactstrap

Uncollapsed panel with Reactstrap



Source link

Write A Comment