How to use React with Bootstrap?

#react #bootstrap #javascript #tutorial

React JS and Bootstrap are popular choices in frontend development, especially for building robust site with reusable UI components, scalable and fast web apps. But, before diving into how to include Bootstrap in a React App, there are things you might want to consider. So, I recommend reading until the end of this article.

React and Bootstrap

React JS is an open source library claiming to be "A JavaScript library for building user interfaces." And they do live up to their claim as they do an amazing job to do just that, building user interface (UI). Notice that React JS is not a framework. they made it clear that they are a JavaScript library and not a framework.

Well, why does it matter? As you come across different libraries and frameworks, you might notice by the "flow." When using a library, you decide how you're gonna use it, as you control the flow of your app. And when using a framework, usually there's already a certain pattern that you must follow, and the framework decide the flow. Usually it is desirable to follow a certain pattern considering that you might want to apply best practices in the language you are using.

Bootstrap is a full-fledged HTML, CSS, and JavaScript Framework, unlike React. Normally, Bootstrap is gonna be enough for you to build a fully functional web application. However, React provides what they called React DOM, which makes React a lot faster. React DOM is different from a normal DOM in HTML. React DOM acts as a place to hold your app's state to see whether there's a change in the app. Unlike HTML DOM which re-renders the app every time a change occurs, React DOM only does it on the specific change on the page and only re-renders on the part that is changing, not the entire app. This is what makes React very fast.

However, if you are like me, who are already comfortable with Bootstrap but also wants the benefit of React DOM, you might not want to choose either, but both. This is already a long introduction, but I just want you to understand why you might want to use them both instead of just one.

Including Bootstrap in a React App

So, this is the long waited tutorial on how to use React with Bootstrap. For convenience, you may want to choose either Bootstrap 4 or 5, because those are the versions I've tested and worked for this tutorial. Assuming you already know how to set up a React application and have a React app running, there are several ways of how you can include Bootstrap in your React App:

1. Including Bootstrap in the HTML file in public folder which serves the root of your React app

This might not be the best way to do this, as this could confuse people who read your code later. But it is worth mentioning since you can even use Bootstrap alone without writing a single CSS nor JavaScript, let alone React.

So, to include Bootstrap in React via HTML file, copy the required tags from Bootstrap official site and choose either a single tag (bundled) one or a complete three tags consisting of Bootstrap CSS link tag, Popper JS script tag, and Bootstrap JS script tag accordingly.

First, include Bootstrap CSS in the <head> tag of the HTML file:

<head>
  ...
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">

</head>

Just a reminder, in case you don't know, you can also use Bootstrap CSS alone without the JavaScript and Popper JS nowadays.

Next, include Bootstrap JS in your code (separated or bundled? you decide):

...
</head>
<body>
  <div id="root"></div>

  <!-- I recommend including it before the body's closing tag -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
</body>

I recommend including the <script> tag at the end of the visible part of your code a. k. a. <body> tag, like the example above.

DONE! Now you have the Bootstrap Framework installed in your React app. \(^,^)/

But wait, we're not done yet. I did say that this is not the best way to do it, right? But why though? The reason is, in React, most people (at least me) are used to working with modules, so less attention would go to the HTML or public files. And it will likely cause confusion to the ones reading your code. But then, how would you approach this? That's what we'll be covering in the next sections.

2. Including Bootstrap CSS and JavaScript tags directly inside JSX

The next method to use Bootstrap in a React app is to include them in your code as JSX tags. Similar to how you include Bootstrap CSS and JavaScript using <link> and <script> tags in HTML, you also have access to the tags in JSX. But, notice that you normally don't have access to the <head> tag in JSX. You can, using some libraries like React Helmet, but the problem is, is it worth installing the entire React Helmet library, when the only thing we want to do is adding a single <link> tag in the <head>? Well, my answer to that is NO, it's not. Adding more libraries means adding more codes. And more codes means more size the browser needs to download to display the page, resulting in a slower page loading.

And my solution to that is using the import or require function. In React, we can treat CSS like a module.

First, add Bootstrap CSS using "import" or "require" function:

import "./bootstrap.min.css"
// or
require("./bootstrap.min.css")

If you've installed your React app using a package like Create React App, the feature to include CSS has already been preconfigured for you. But if not, you can do that manually in your webpack.config.js file or any other bundler you use.

Next, include Bootstrap JS as <script> tag at the end of your JSX wrapper:

...
const App = () => (
    <div>
      ...
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossOrigin="anonymous"></script>
    </div>
)

A little note in case you forget, the tag properties use camelCase as the naming convention, and Bootstrap CSS and JS tags are normally included as HTML tags. So be sure to check the properties and change the property names in camelCase. The one I've found is the "crossorigin" property. It won't break your code, but just in case, be sure to change it into "crossOrigin".

3. Using React Bootstrap Library

The increasing popularity of React and Bootstrap has encouraged developers to find the best way to incorporate both platforms. One of which is React Bootstrap library. React Bootstrap provides a way to include Bootstrap elements into reusable JavaScript functions. So, you might be surprised at how easy it is to use Bootstrap elements using React Bootstrap. You don't need to deal with the non-semantic <div> elements, no more long list of classes, and you can focus on building your apps without the need to track the piled up containers, rows, and other non-semantic elements.

Here's how you can use React Bootstrap library in your React app.

First, add the "react-bootstrap" and "bootstrap" packages into your app:

$ npm install react-bootstrap bootstrap

Or, if you are using Yarn:

$ yarn add react-bootstrap bootstrap

And to use Bootstrap elements from the library, like other modules, you simply import or require them individually as needed.


  import Button from "react-bootstrap/Button"
  // or
  import { Button } from "react-bootstrap"

This is also what I like about this library, you don't have to include the entire library into your code, which makes the app runs faster.

Now you can use them as React elements with fully functional Bootstrap Framework.


  const App = () => (
    <div>
      <Button>Button</Button>
    </div>
  )

And there you have it, 3 methods of including Bootstrap into a React app.

Really hope that you find this article useful. You might find better ways to do it, and you might find faults in this article. I'm totally open for suggestions and critiques.

You can leave a comment below and also find me on Github and Twitter. Thanks for reading. Go and make more amazing stuff. \/(*0*)