{{announcement.body}}
{{announcement.title}}

Add Reactstrap Components In ReactJS

DZone 's Guide to

Add Reactstrap Components In ReactJS

In this article, we discus how to use Reactstrap, a Bootstrap component library, for building UIs with reusable components.

· Web Dev Zone ·
Free Resource

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,

Shell


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:

Shell


Install Reactstrap by using the following command:

Shell


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

JavaScript


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:

JavaScript


Add the following code in this component:

JavaScript


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

JavaScript


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:

JavaScript


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

JavaScript


Now run the project and check the result

Collapsed panel with Reactstrap

Collapsed panel with Reactstrap


Uncollapsed panel with Reactstrap

Uncollapsed panel with Reactstrap
Topics:
bootstrap, javascript, react, reactstrap, web dev

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}