How to Integrate Bootstrap with React.js

Integrate Bootstrap with React Js

React.js is an open-source JavaScript library used for creating user interface (UI) components that are stateful and reusable. These UIs are specifically built for single page applications. React.js also helps in managing the ‘view layer’ of mobile and web apps.

Recommended Reading: Best 16 Premium JavaScript Charting Libraries

Facebook in collaboration with a specific community of developers is responsible for maintaining this open-source JavaScript library. In fact, React.js should be one of the best options for platforms, such as Facebook, pertaining to the huge volumes of data that these are bound to handle.

Listed below are some of the reasons why React.js is being used by popular networks, such as Facebook, Instagram, and WhatsApp.

 React.js and DOM model, and how this virtual DOM ensures a great user experience

In an app, which comprises a lot of user interaction (UI) along with regular data updates, it is really important to take into consideration the app’s structure and how it would affect the overall performance. Though you might have implemented the fastest client platforms and JavaScript engines, there is no way to guarantee a smooth user experience.

React.js creates a document-object model (DOM) (an API used for HTML and well-organized HTML documents). As Wikipedia defines it, the DOM is a language-independent and cross-platform API. And the DOM treats an HTML, XHTML or XML document as a tree structure. Here, each node of the tree is an object and these nodes represent parts of the document. And the DOM model represents a document in the form of a logical tree. Each of the branches of the tree ends in a node and these nodes contain objects.

Since the DOM is tree-structured, even a slight change at the top can disturb the UI to a great extent.

But React has a solution to this – virtual DOM. The Virtual DOM is the coolest thing about React.js. So whenever a new change is required, it first experiments on the virtual DOM, which resides on the memory and not the screen. Now, with the help of an algorithm specifically designed for the purpose of analyzing and monitoring the changes in the virtual DOM, which need to reflect in the real DOM, you can actually filter what is not needed and what can be retained. With this, the update time to the real DOM lowers, ensuring a great performance and a seamless user experience.

Search engine optimization (SEO) impact

React.js, unlike JavaScript, is SEO-friendly, which comes as a surprise. When working with JavaScript frameworks, SEO has always been a challenge as these are not SEO-friendly. It is being updated and improved regularly, but still has a long way to go. React.js runs on the server – returning the virtual DOM, which is displayed via the browser just like a normal web page.

Also Read: How to Use Bootstrap 4 With ReactJS

Components that are reusable

As discussed, React.js can be used for creating UI components that are reusable – which means you can reuse the coding components as and when you wish, thereby saving a lot of time and effort, which would otherwise be risked when developing new components from the scratch. Another interesting fact about React.js components is that these are secluded and any changes brought about to one of them would never affect the others. Here you can reuse the components and change them without affecting the others – thus, making the programming process brisk, effective and easy for developers.

Facebook uses React.js; but now, its reach is beyond the borders

Facebook uses React.js and now, a number of other popular brands, including Airbnb, Netflix, Uber, WordPress, the New York Times, Twitter and so on, are using it.

With a whole lot of the aforementioned awesome features, React is, in fact, one of the easy-to-use JavaScript technologies for building interactive web applications. The component-based modular process and speed of rendering algorithm are some of the reasons that make it the best choice for integrating with Bootstrap. You can check out 13 Modern Admin Templates for Web Applications 2018

In fact, React on its own cannot power designs that are intuitive and responsive (since it lacks the in-built mechanism as it is a view-only library), so a front-end development framework, such as Bootstrap becomes an integral part of it.

Bootstrap 4

Bootstrap 4 is a front-end development framework that helps in building responsive layouts alongside embedding new features, including support for flexbox and a new card component. Bootstrap comes with a number of features, such as responsiveness, ease of use, a huge number of resources, enhanced development speed and consistency. Apart from all these, it is also responsive and customizable.

Advantages of integrating React.js with Bootstrap 4:

  • The integration helps in creating interactive UIs.
  • You can design simplified views for each state of your application.
  • The presence of React in the integration is essential for updating and rendering exactly the right type of elements each time there is a change in the data.
  • In the declarative view, your code can be anticipated and further easy to debug.
  • You can easily create compressed elements that are capable of managing their own state. These elements can be further combined to yield complicated UIs.
  • The component logic is written in JavaScript, which makes it easier to pass rich data via your app and isolate state from the other components within the DOM.
  • You need not rewrite existing code for developing new features in React.

React-Bootstrap integration

Integrating Bootstrap 4 with React might be tricky as the JavaScript side of Bootstrap does not comply with React’s core principle of ‘unidirectional’ data flow – but the CSS part is easy and simple to add.

Recommended Reading: Best 14 Free Bootstrap 4 Admin Templates of 2018

When Bootstrap and React.js are integrated, Bootstrap’s frontend reusable components are wholly re-implemented in React. And this framework is independent of any other frameworks, including jQuery or Bootstrap JavaScript. So you need not implement jQuery in your projects when using React-Bootstrap. This integration offers clean code with no external JavaScript calls to yield components non-compliant with the ReactDOM.render.

The React-Bootstrap library was implemented with an aim to resolve this noncompliance – but it works well only with the previous versions of Bootstrap 3.

Creating a React app:

For creating the ‘React’ app, you should have Node >=6 on your local development machine.  Use nvm for Linux or macOS and nvm-windows for switching node versions between projects.

Methods for creating the app:

  • Using npx

npx create-react-app my-app

  • Using npm

npm init react-app my-app

  • Using Yarn

yarn create react-app my-app

With these commands, you have a directory ‘my-app’ created within the current folder and inside this directory, it will create the initial project structure and install the transitive dependencies:

my-app

├── README.md

├── node_modules

├── package.json

├── .gitignore

├── public

│   ├── favicon.ico

│   ├── index.html

│   └── manifest.json

└── src

   ├── App.css

   ├── App.js

   ├── App.test.js

   ├── index.css

   ├── index.js

   ├── logo.svg

   └── registerServiceWorker.js

Here there are no complex folder structures or configurations, but only the files needed to build your app. You may open your project folder once the installation is complete:

  • cd my-app

Within the newly created project, you may run built-in commands, such as:

  • npm start

Or

  • Yarn start

Now open ‘http://localhost:3000’ to view it in the browser. Whenever the code is changed, the page happens to reload automatically. Any build errors and lint warnings can be viewed in the console.

For example,

$ create-react-app human

$ cd human

We have used the name ‘human’ for our app.

The process of React and Bootstrap integration:

Installation of Reactstrap:

Using npm, install Reactstrap and peer dependencies. (Since Reactstrap does not accommodate the CSS for Bootstrap, this has to be installed separately.)

Here, we add Bootstrap from NPM

============================================================================

npm install – -save reactstrap react react-dom

$ npm install bootstrap –save

==============================================================================

Importing the essential components – below is an example for the same.

Here is how we Import Bootstrap CSS in the src/index.js file:

===============================================================

import ‘bootstrap/dist/css/bootstrap.min.css’;

=============================================================================

Now, you can import the essential Reactstrap components within ‘src/App.js’ file or any of your tailor-made component files:

=============================================================================

import React from ‘react’;

import { Button } from ‘reactstrap’;

export default (props) => {

          return (

          <Button color=”Danger”>danger!</Button>

};

};

================================

Apart from the aforementioned method, there is also a provision to include Reactstrap directly in to your app’s package or exclude it during the compilation process and have it linked to a CDN.

https://cdnjs.cloudflare.com/ajax/libs/reactstrap/4.8.0/reactstrap.min.js

If you are using the external CDN library, ensure that all the essential dependencies are included before the Reactstrap library is implemented:

  •       React
  •       ReactTransitionGroup

Now this library comprises React-Bootstrap 4 elements, which trigger configuration and power.

The library is independent on any other components, including Bootstrap JavaScript and jQuery.

But for advanced functionalities, including arranging components, such as tooltips, popovers and auto-flipping dropdowns, ‘https://popper.js.org’ through ‘https://github.com/souporserious/react-popper can be used.

Next, compose content through props.children, instead of using named props to authorize via Components.

Here is an example:

==============================================================================

// Content composed via props

const Example = (props) => {

          return (

                         <p>This is a tooltip <TooltipTrigger

tooltip={TooltipContent}>example</TooltipTrigger>!</p>

};

}

// Pass the content through props.children (Preferred)

const PreferredExample = (props) => {

return (

<p>

          This is a <a href=”#” id=”TooltipExample”>tooltip<a> example.

<Tootltip target=”tooltipExample”>

<TooltipContent/>

</Tooltip>

</p>

};

}

==============================================================================

Now, you know how to import individual Bootstrap 4 components:

Open src/App.js and then follow the example given below:

==============================================================================

import React, { Component } from ‘react’;

import {

          Collapse,

          Navbar,

          NavbarToggler,

          NavbarBrand,

          Nav,

          NavItem,

          NavLink,

          Container,

          Row,

          Col,

          Jumbotron,

          Button

} from ‘reactstrap’;

class App extends Component {

          constructor(props) {

          super(props);

this . toggle = this . toggle . bind(this);

this . state = {

isOpen: false

};

}

toggle() {

          this . setState({

          isOpen: !this.state.isOpen

});

}

render() {

          return (

                         <div>

                                       <Navbar color=”inverse” inverse toggleable>

                                       <NavbarToggler right onClick={this.toggle} />       

<NavbarBrand href=”/”>reactstrap</NavbarBrand>

<Collapse isOpen={this.state.isOpen} navbar>

<Nav className=”ml-auto” navbar>

<NavItem>

<NavLink href=” / components/”>Components</NavLink>

</NavItem>

<NavItem>

<NavLink href=”https://github.com/reactstrap/reactstrap>Github</NavLink>

</NavItem>

</Nav>

</Collapse>

</Navbar>

<Jumbotron>

<Container>

<Row>

<Col>

<h1>React</h1>

<p>

<Button tag=”a” color=”success” size=”large” href=”http://reactstrap.github.io” target=”_blank”>

Bootstrap </Button>

</p>

</Col>

</Row>

</Container>

</Jumbotron>

</div>

};

}}

export default App;

==============================================================================

You have your required components imported successfully.

Though the React-Bootstrap integration might seem to be tricky, following the steps listed above will help you accomplish this task with ease. Ultimately, this takes us to our goal of creating seamless and interactive UIs.

At BootstrapDash, we have a highly sophisticated collection of admin dashboard templates for your needs. Our templates are capable of helping to speed up the performance of your web applications. Should you be interested in knowing more about the integration of Bootstrap 4 with React.js, please send across your queries via the comments section below.

Best Bootstrap Admin Template ad

Leave a Reply