Add Reactstrap Components In ReactJS

Introduction

Reactstrap is a component library for reactjs. It provides inbuilt Bootstrap components that make it easy to create UI with its self-contained components that provide flexibility and inbuilt validations. Reactstrap is similar to Bootstrap, but it has self-contained components. It's easy to use and supports Bootstrap 4.

Prerequisites

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

First of all, let's check Node is installed in your system if not installed , first install Nodejs, Open this link for installing Node.js.

https://nodejs.org/en/download/

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.

Step 1. Let's create a new react project by using the following command,

npx create-react-app forms

Command

It will take some time to create a new project.

Create a new project

Step 2. Install Bootstrap

Reactstrap not include Bootstrap CSS, to use bootstrap css we need to add Bootstrap and 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,

npm install --save bootstrap

Install

Install Reactstrap by using the following command,

npm install --save reactstrap react react-dom

Reactstrap

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

import 'bootstrap/dist/css/bootstrap.min.css';

Import Bootstrap

Step 4. Now open the App.js file and Import the required Reactstrap components, In this article, I will create a form using Reactstrap components. so let's import the required components. Add the following code in the App.js file.

import React from 'react';
import './App.css';
import { Container, Col, Form, Row, FormGroup, Label, Input, Button } from 'reactstrap';

function App() {

  return (
    <Container className="App">

      <h2 className="PageHeading">Demo Form Using Reactstrap</h2>
      <Form className="form">
        <Col>
          <FormGroup row>
            <Label for="name" sm={2}>Name</Label>
            <Col sm={10}>
              <Input type="text" id="name" placeholder="Enter a name" />
            </Col>
          </FormGroup>
          <FormGroup row>
            <Label for="address" sm={2}>Address</Label>
            <Col sm={10}>
              <Input type="text" id="Address" placeholder="Enter Addrress" />
            </Col>
          </FormGroup>
          <FormGroup row>
            <Label for="Password" sm={2}>Password</Label>
            <Col sm={10}>
              <Input type="Password" id="Password" placeholder="Enter Password" />
            </Col>
          </FormGroup>
        </Col>
        <Col>
          <FormGroup row>
            <Col sm={5}>
            </Col>
            <Col sm={1}>
              <Button color="success">Save</Button>{' '}
            </Col>
            <Col sm={1}>
              <Button color="success">Cancel</Button>{' '}
            </Col>
            <Col sm={5}>
            </Col>
          </FormGroup>
        </Col>
      </Form>
    </Container>
  );
}
export default App;

Now open the App.css file and add the following CSS classes,

.App {
  text-align: center;
}

.PageHeading {
  color: blue;
  background-color: lightgreen;
  margin-top: 20px;
}

Now run the project by using the following command and check the result,

npm start

Result

Summary

In this article, we learned how to use Reactstrap components to create UI. Reactstrap is a component library for React.

In case you’re interested, a while ago I wrote a separate blog post on how to perform CRUD operations against MongoDB using the C# driver. To use the repository implementation, you’ll need.