Rendering Bootstrap Carousel in a React Application

Hello All! This article will cover how to setup and use bootstrap in your React application.

We will use Bootstrap's carousel component in our react component to render the books.

As you know, carousels are slideshows, cycling through images or slides of texts.

We will be creating a carousel of books, displaying book images with title over the slides. We will also add our custom CSS to the slides as we have seen earlier.

Bootstrap has dependency on jQuery and popper.js which it uses internally for rendering the components.

There are 2 ways to use bootstrap in your react application:

• Using pre-compiled, minified, production-ready CDN (Content delivery network) versions of bootstrap, jQuery and popper.js

• Using npm modules

Lets get started!

Using CDN Approach

• As you might have used earlier, CDN versions are ready, minified versions of production ready libraries and frameworks.

• We will import these files in our index.html file

• We will use below CDN versions:

• Bootstrap.css

• import this file in the head section

• 
  

     https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css

  
  

• jQuery

• import this file in the body section, preferably before closing </body> tag

• 
  

     https://code.jquery.com/jquery-3.2.1.slim.min.js

     

• popper.js

• import this file in the body section, preferably before closing </body> tag

• 
  

      https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js

     

• Bootstrap.js

• import this file in the body section, preferably before closing </body> tag

•    

      https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js

  
  

• Please note that you need to request files in the above specified order to avoid any unwanted dependency issues.

• JavaScript Changes

• Add carousel component of bootstrap in your JavaScript file.

• The moment you add it, react will throw errors. There are multiple reasons for those errors, such as:

• By default, <img> does not have a closing tag associated with it
• as per react standards, all attributes need to follow camel case structures. Also, class attribute needs to be replaced by className across the component.
• Also, we will render collection of books using component collection technique we have seen before.
• We will leverage id attribute of book objects wherever required for children elements. Please note that key has to be unique within the specific component tree of which that child is part of unlike across the DOM.
• We will use books list rendering to setup our indicators.
• Our Carousel.js file will now look like:
• We will also leverage techniques we have seen while using CSS classes for styling components and conditional application of CSS classes.

• Also note that while writing inline CSS styles, the CSS attributes with dash/hyphen need to follow camel case by removing hyphen and making next letter capital and suffixing to first letter.
• For ex., CSS attribute max-height to be referred as maxHeight

• This is how our Carousel JSX will look like:

• Carousel.js
• 
  

      import React from "react";

      import ReactDOM from "react-dom";

  
  

      class MyCarousel extends React.Component {

      render({ books } = this.props) {

          return (

          <>

              <div className="row">

              <div className="col-md-4"></div>

              <div

                  className="col-md-4 add-column-margin"

                  //adding inline style, note the change in attributes

                  style={{ marginTop: 30, maxHeight: 250 }}

              >

                  <div

                  id="myCarousel"

                  className="carousel slide"

                  data-ride="carousel"

                  >

                  <ol className="carousel-indicators">

                      {books.map((book, index) => {

                      return (

                          <li

                          key={index}

                          data-target="#myCarousel"

                          data-slide-to={index}

                          className={index === 0 ? "active" : ""}

                          ></li>

                      );

                      })}

                  </ol>

                  <div className="carousel-inner">

                      {books.map((book, index) => {

                      return (

                          <div

                          key={index}

                          className={

                              index === 0 ? "carousel-item active" : "carousel-item"

                          }

                          >

                          <img

                              className="d-block w-100"

                              src={book.coverImage}

                              alt="First slide"

                          ></img>

                          <div class="carousel-caption d-none d-md-block">

                              <h5

                              style={{

                                  color: "white",

                                  backgroundColor: "rgba(0, 0, 0, 0.6)",

                              }}

                              >

                              {book.title}

                              </h5>

                          </div>

                          </div>

                      );

                      })}

                  </div>

                  <a

                      className="carousel-control-prev"

                      href="#myCarousel"

                      role="button"

                      data-slide="prev"

                  >

                      <span

                      className="carousel-control-prev-icon"

                      aria-hidden="true"

                      ></span>

                      <span className="sr-only">Previous</span>

                  </a>

                  <a

                      className="carousel-control-next"

                      href="#myCarousel"

                      role="button"

                      data-slide="next"

                  >

                      <span

                      className="carousel-control-next-icon"

                      aria-hidden="true"

                      ></span>

                      <span className="sr-only">Next</span>

                  </a>

                  </div>

              </div>

              </div>

          </>

          );

      }

      }

  
  

      export default MyCarousel;

  
  

Using NPM Modules

• If we want to use npm modules, there are few things we need to make sure:

• The dependent jQuery, popper.js, bootstrap.css and bootstrap.js are part of your module bundler so that they will be available on the hosting environment

• As per the standard procedure, we need to include these modules in our JavaScript files, preferably at the root component so other components will automatically have access to it and they need not have to re-include them again.

• Execute following command in VS Code terminal or command prompt:

• 
  

      npm install jquery@3.2.1 popper.js@1.13.0-next bootstrap@4.0.0

  
  

• Post install, as discussed earlier, include the dependencies in your root component, ex., index.js file

• 
  

    import jquery from "jquery";

    import Popper from "popper.js";

    import "../node_modules/bootstrap/dist/css/bootstrap.css";

    import "../node_modules/bootstrap/dist/js/bootstrap.bundle.js";

  
  

• Follow the steps discussed earlier in the JavaScript changes step earlier while using the bootstrap CDNs.
• Apart from these, there is no change is required.
• Run your application and voila! You will notice that your carousel is working as expected: