How to Use Bootstrap 4 With ReactJS

This article will help take you to the basics of React and Bootstrap and how you can get started with both of them to create a stunning, interactive website.

Working with Bootstrap and React requires you to have good knowledge of HTML, CSS, and JavaScript.

React.js is one of the popular javascript libraries used to create stateful and reusable UI components. It was developed in Facebook. It is an open-source JavaScript library that handles the view layer of the data rendered as HTML in web applications.

One of the advantages of using react is that it uses virtual DOM which improves the performance of the web application since virtual DOM is much faster than the regular DOM.

Bootstrap is the world’s most popular front-end development framework. Bootstrap is the leading HTML, CSS, and JavaScript framework for creating mobile-first, responsive websites and web application.

Also Read: Why Should You Use Bootstrap?

Bootstrap help you get started with creating a project quickly and easily. Instead of starting from scratch Bootstrap can help getting a website up and running quickly by reducing the time spent for the front end development.

Getting Started with Bootstrap

There are multiple ways to install Bootstrap. You can visit the Bootstrap website and download the precompiled version or the source code. You can also download Bootstrap using package managers.

To stay organized, let’s create a project folder and name it ‘bootstrap-with-react’. Keep the Bootstrap CSS and JavaScript files in the folders called CSS and JS in the ‘bootstrap-with-react’ folderIn the command prompt, change directory to your project folder, when using package managers.

To download Bootstrap using Node, use the following command.

This will also download Tether and jQuery as dependencies in the folder node_modules.

After Bootstrap has been installed in work folder, include the Bootstrap CSS and JavaScript files into the HTML file. The CSS is included in the <head> tags and the JavaScript, jQuery and Tether files are included just before the closing </body> tag, with the <script> tags.

The HTML template looks like this.

This will print a ‘Hello World!’ message on the browser. So we are set up with bootstrap.

Getting Started with React

Download React into the project ‘bootstrap-with-react’. To install React to the project run the following command using npm.

This will install React in the node_modules. We need only two files – react.min.js and react-dom.min.js. Include the following scripts in the HTML file that we already created and included Bootstrap CSS and JS in.

Working with React is more productive by using JSX and ES6. But they are not supported by all browsers. Hence we need to download Babel – A javascript compiler that converts these codes into a format supported by the browsers. We can either install Babel using npm command as following:

Or, you can use CDN to include Babel.

Note: Babel-Standalone is an in-browser transformer and has fairly limited use-cases. So, in production, you need to pre-compile the scripts on the server-side.

Now, let’s see how to start coding with React. React’s basic building block is a component. So let’s start creating one using reactDOM.render()

Add the React code using <script> tag

The first argument in the method ReactDOM.render() is the component that we want to render. The component to be rendered should be mounted to a DOM element. The second argument specifies the DOM node the component should mount to.

Bootstrap and React

Let’s print the simple “Hello World” example combining everything we have learned till now.

The entire HTML code will look like this.

The browser will output a “Hello World” message as shown.

hello world using Bootstrap and React

Static Webpage Using Bootstrap and React

In an HTML file, add the Bootstrap stylesheets and all the required JavaScript file for Bootstrap and React.

When using React JSX, within the <script> tags, for regular HTML tags, the attribute className is used instead of class and the attribute htmlFor is used instead of for attribute because these are reserved words in Javascript.

Also Read: How to Use Bootstrap With HTML

Let’s add a simple Bootstrap component into the web page. Let’s add a Jumbotron. I have taken a code template for Bootstrap and included in the script. Remember to change the class attribute to className attribute.  The entire code HTML code is given below.

Inside the <script> tag create an object jumbotronHTML and assign the HTML code to the variable. This makes it possible to pass the object instead of HTML in the ReactDom.render() method.

One of the most common errors that occur is that all the tags must be closed. Here the example, The <hr> tag when not closed worked perfectly without React but caused an error when React is used.

The entire code is as shown below.

The output for the code looks like this.

Jumbotron using Bootstrap and React

React-Bootstrap

React-Bootstrap is a library with a complete re-implementation of Bootstrap components using React. It has no dependency on bootstrap.js or jQuery.

Using React Bootstrap lets you use Bootstrap’s components and styles, But with less and cleaner code via React. React-Bootstrap reduces the repetitiveness in the code when using plain Bootstrap.

For example, let’s say to create a button with Bootstrap you will need the following code:

With React-Bootstrap you will need to add the following code:

Installation

Use the following commands to install React-Bootstrap using npm.

If you are using Bower as a package manager use the following code.

Summary

In this article, we got started with how to use React with Bootstrap beginning with a simple ‘Hello World’ example and then adding a simple Bootstrap component using React. Now, the possibilities of the two frameworks are much more than that. We can create an entire website, with very attractive and interactive user interface.

And finally, we have React-Bootstrap, a library of reusable UI components. When creating a full-fledged website with a lot of transitions and animations, React-Bootstrap can prove to be life-saver for developers.

BootstrapDash believes in providing the best, efficient and quality free and premium bootstrap admin dashboard template to get your web application up and running easily and quickly. Visit our website to get to know more about our products. Want to create a stunning website of your own? Start learning