ReactJS: What is Reactstrap? How to use it?


Reactstrap is a React component library for Bootstrap. Reactstrap is currently compatible with Bootstrap 5.1.


Getting Started

Install Reactstrap
npm install reactstrap react react-dom

Reactstrap currently requires React 16.8 or higher.

Include Bootstrap
Import Bootstrap in your application code:
  1. npm install --save bootstrap
  2. import 'bootstrap/dist/css/bootstrap.min.css';
or include Bootstrap from a CDN URL in your HTML layout:
<head> 
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" /> 
</head>

Import components
import React from 'react'; 
import { Button } from 'reactstrap';
import { Modal, ModalBody, ModalHeader } from 'reactstrap';


Unlike some component libraries, Reactstrap does not embed its own styles, and instead depends on 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.

More detail can be read from this url:

Comments

Post a Comment

Popular posts from this blog

ReactJS: Protected Routes Implementation in ReactJS

Image
Protected Routes are routes that can only be accessed if a condition is met(usually, if user is properly authenticated). It returns a Route that either renders a component or redirects a user to another route based on a set condition. We will use this method if we want to separate between specific user and public user in accessing pages in our website by using ReactJS platform.
Read more

How to Inspect Problems in Your ReactJS Codes

Image
Every web developer needs to validate their codes according to standard formats especially ReactJS Web Developers. When writing JavaScript with an editor such as Visual Studio Code, there are different ways you can ensure your code is syntactically correct and in line with current best practices. You can use a linter to do this. Linters check your code for syntax errors and highlight errors to make sure you can quickly find and fix them.
Read more