Introduction

Reactstrap is a component library for Reactjs. It provides built-in Bootstrap components that provide flexibility and inbuilt validations, making it easy to create a UI. Reactstrap is similar to Bootstrap but has self-contained components.
You can check my previous articles where we discussed how we add Reactstrap and basic Reactstrap components in Reactjs applications from the below links:
In this article, we will discuss the following Reactstrap components:
  • Dropdowns
  • Fade
  • Jumbotron
Prerequisites
  • We should have a basic knowledge of HTML and JavaScript.
  • Visual Studio Code should be installed
  • Node and NPM installed
Let's create a new React project using the following command:
  1. npx create-react-app reactstrapcomponent
Install Reactstrap with the following command:
  1. npm install --save reactstrap react react-dom
Now install Bootstrap in this project using the following command:
  1. npm install --save bootstrap
Now, open the index.js file and add import Bootstrap.
  1. import 'bootstrap/dist/css/bootstrap.min.css';
Now, in Visual Studio code, go to the src folder, create a new folder and inside this folder, add 3 new components,
  • DropdownsDemo.js
  • FadeDemo.js
  • JumbotronDemo.js
Now open the DropdownsDemo.js file and add the following code:
  1. import React, { Component } from 'react'
  2. import { UncontrolledDropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
  3. import { Navbar, Nav, NavItem, NavLink } from 'reactstrap';
  4. export class DropdownsDemo extends Component {
  5. render() {
  6. return (
  7. <div>
  8. <Navbar className="btn btn-warning" light expand="md">
  9. <Nav color="info" navbar>
  10. <NavItem className="hdr">
  11. <NavLink style={{ "color": "white" }} >Reactstrap Dropdowns Components</NavLink>
  12. </NavItem>
  13. </Nav>
  14. </Navbar>
  15. <UncontrolledDropdown>
  16. <DropdownToggle caret>
  17. Dropdown
  18. </DropdownToggle>
  19. <DropdownMenu>
  20. <DropdownItem header>Header</DropdownItem>
  21. <DropdownItem disabled>Action</DropdownItem>
  22. <DropdownItem>Another Action</DropdownItem>
  23. <DropdownItem divider />
  24. <DropdownItem>Another Action</DropdownItem>
  25. </DropdownMenu>
  26. </UncontrolledDropdown>
  28. </div>
  29. )
  30. }
  31. }
  33. export default DropdownsDemo
Now open App.js file and add the following code:
  1. import React from 'react';
  2. import logo from './logo.svg';
  3. import './App.css';
  4. import DropdownsDemo from './DropdownsDemo'
  6. function App() {
  7. return (
  8. <div className="App">
  9. <DropdownsDemo></DropdownsDemo>
  10. </div>
  11. );
  12. }
  14. export default App;
Run the project by using 'npm start' and check the result.
Reactstrap Components In ReactJS
Now open the FadeDemo.js file and add the following code in this component:
  1. import React, { useState } from 'react';
  2. import { Button, Fade } from 'reactstrap';
  3. import { Navbar, Nav, NavItem, NavLink } from 'reactstrap';
  4. const FadeDemo = (props) => {
  5. const [fadeIn, setFadeIn] = useState(true);
  6. const toggle = () => setFadeIn(!fadeIn);
  7. return (
  8. <div>
  9. <Navbar className="btn btn-warning" light expand="md">
  10. <Nav color="info" navbar>
  11. <NavItem className="hdr">
  12. <NavLink style={{ "color": "white" }} >Reactstrap Fade Components</NavLink>
  13. </NavItem>
  14. </Nav>
  15. </Navbar>
  16. <Button color="primary" onClick={toggle}>Toggle Fade</Button>
  17. <Fade in={fadeIn} tag="h5" className="mt-3">
  18. Demo content
  19. </Fade>
  20. </div>
  21. );
  22. }
  23. export default FadeDemo
Now open the App.js file and add the following code:
  1. import React from 'react';
  2. import logo from './logo.svg';
  3. import './App.css';
  4. import FadeDemo from './FadeDemo'
  6. function App() {
  7. return (
  8. <div className="App">
  9. <FadeDemo></FadeDemo>
  10. </div>
  11. );
  12. }
  14. export default App;
Run the project by using 'npm start' and check the result.
Reactstrap Components In ReactJS
Now open JumbotronDemo.js file and add the following code in this component:
  1. import React, { Component } from 'react'
  2. import { Jumbotron, Button } from 'reactstrap';
  3. export class Jumbotrondemo extends Component {
  4. render() {
  5. return (
  6. <div>
  7. <Jumbotron>
  8. <h1 className="display-3">Jumbotron Demo</h1>
  9. <p className="lead">Sample Text</p>
  10. <p className="lead">
  11. <Button color="primary">Learn More</Button>
  12. </p>
  13. </Jumbotron>
  14. </div>
  15. )
  16. }
  17. }
  19. export default Jumbotrondemo
Now open App.js file and add the following code:
  1. import React from 'react';
  2. import logo from './logo.svg';
  3. import './App.css';
  4. import Jumbotrondemo from './Jumbotrondemo'
  6. function App() {
  7. return (
  8. <div className="App">
  9. <Jumbotrondemo></Jumbotrondemo>
  10. </div>
  11. );
  12. }
  14. export default App;
Run the project by using 'npm start' and check the result.
Reactstrap Components In ReactJS

Summary

In this article, we learned how to use Dropdowns, Fade, and Jumbotron in Reactstrap components. Reactstrap is a component library for ReactJS.