Add Reactstrap Components In ReactJS

In this article, we will learn how to integrate Bootstrap 4 and reactstrap in a React application.

Introduction

 
Reactstrap is a compoent library for reactjs.Its provides inbuilt Bootstrap components that make easy to create UI with its self-contained components thats provide flexibility and inbuilt validations.Reactstrap is similar to Bootstrap, but its have self-contained components.Its easy to use and support 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/ 
 
Add Reactstrap Components In ReactJS
 
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, intsall it. 
 
Step 1
 
Let's create a new react project by using the following command,
 
npx create-react-app forms 
 
Add Reactstrap Components In ReactJS
 
It will take some time to create a new project.
 
Add Reactstrap Components In ReactJS
 
Step 2 - Install Bootstrap
 
Reactstrap not include Bootstrap CSS ,to use bootstrap css we need to add bootstrap,use 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,
  1. npm install --save bootstrap  
Add Reactstrap Components In ReactJS
 
Install Reactstrap by using following command,
  1. npm install --save reactstrap react react-dom  
Add Reactstrap Components In ReactJS
 
Step 3
 
Now open index.js file and import Bootstrap css.
  1. import 'bootstrap/dist/css/bootstrap.min.css';  
Add Reactstrap Components In ReactJS
 
Step 4
 
Now open App.js file and Import required reactstrap components,In this artricle i will create a form using reactstrap components.so lets import required components.Add following code in App.js file 
  1. import React from 'react';  
  2. import './App.css';  
  3. import { Container, Col, Form, Row, FormGroup, Label, Input, Button } from 'reactstrap';  
  4.   
  5. function App() {  
  6.   
  7.   return (  
  8.     <Container className="App">  
  9.   
  10.       <h2 className="PageHeading">Demo Form Using Reactstrap</h2>  
  11.       <Form className="form">  
  12.         <Col>  
  13.           <FormGroup row>  
  14.             <Label for="name" sm={2}>Name</Label>  
  15.             <Col sm={10}>  
  16.               <Input type="text" id="name" placeholder="Enter a name" />  
  17.             </Col>  
  18.           </FormGroup>  
  19.           <FormGroup row>  
  20.             <Label for="address" sm={2}>Address</Label>  
  21.             <Col sm={10}>  
  22.               <Input type="text" id="Address" placeholder="Enter Addrress" />  
  23.             </Col>  
  24.           </FormGroup>  
  25.           <FormGroup row>  
  26.             <Label for="Password" sm={2}>Password</Label>  
  27.             <Col sm={10}>  
  28.               <Input type="Password" id="Password" placeholder="Enter Password" />  
  29.             </Col>  
  30.           </FormGroup>  
  31.         </Col>  
  32.         <Col>  
  33.           <FormGroup row>  
  34.             <Col sm={5}>  
  35.             </Col>  
  36.             <Col sm={1}>  
  37.               <Button color="success">Save</Button>{' '}  
  38.             </Col>  
  39.             <Col sm={1}>  
  40.               <Button color="success">Cancel</Button>{' '}  
  41.             </Col>  
  42.             <Col sm={5}>  
  43.             </Col>  
  44.           </FormGroup>  
  45.         </Col>  
  46.       </Form>  
  47.     </Container>  
  48.   );  
  49. }  
  50.   
  51.   
  52. export default App;  
Now open App.css file and add following css classes,
  1. .App {  
  2.   text-aligncenter;  
  3. }  
  4. .PageHeading  
  5. {  
  6.   color:blue;  
  7.   background-color: lightgreen;  
  8.   margin-top20px;  
  9. }  
Now run the project by using following command and check result,
 
npm start
 
Add Reactstrap Components In ReactJS

Summary

 
In this article we learned how to use reactstrap components to create UI. Reactstrap is a compoent 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.