Integrating Bootstrap with React

React is a JavaScript-based library which is used to create the interactive user interface. It follows the Virtual DOM concept in which view will be updated efficiently whenever your application’s state changed.Few advantages to using react

Declarative
Component-based architecture
Learn once, write anywhere kind of features

Compare to a framework like Angular, in React we don’t have any pre-defined structure, so that in recatjs we can have multiple options to achieve responsiveness of an application.In this article, we are going to use Bootstrap with React application to use different component/parts of bootstrap to achieve responsiveness.For that, we need to create new react application, and in order to create new react app we need to install react into our machine by using following npm command.

Prerequisites

Node 6.0 > installed
Npm(windows) 5.2 > or Nvm(Linux/macOS)
Any standard code editor like Visual Studio Code, Visual Studio etc.

To install react to your machine, we need to run following npm command.

Npm install create-react-app

After executing above npm command, now we will be able to use and create new react application, let’s start by using bootstrap into our react application, to get started we need to create a new application by using following npm command.

create-react-app reactwithbootstrap

After running the above command, our react application will be created and you can see the complete information in the power shell like this.

Now open the project and then you can see the following project structure.

When we create a new application at a time many important dependencies are installed by default like react, react-dom, react-scripts etc.Now let’s start using bootstrap by using bootstrap CDN, in order to use CDN in react app, open public/index.html and add CDN like this.

Public/index.html


 
 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 <meta name="theme-color" content="#000000">
 <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
 <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
 <!-- Bootstrap CDN -->
 <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
 <title>React App</title>
 </head>
 <body>
 <noscript>
 You need to enable JavaScript to run this app.
 </noscript>
 <div id="root"></div>
 </body>
 </html>

Vanilla Bootstrap with React

Let me tell you that what is Vanilla bootstrap, it just a term which defines that we are using the only bootstrap without using any additional extensions or plug-in. So far we have created new react application, and then added bootstrap CDN into an index.html file, now we should try layout of the bootstrap grid into our app, now let’s see a simple example using bootstrap component.

Open App.js and replace the following code.


import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
 
class App extends Component {
 render() {
 return (
 <div className="App">
 <div class="container">
 <div class="row">
 <div class="col-sm">
 One of three columns
 </div>
 <div class="col-sm">
 One of three columns
 </div>
 <div class="col-sm">
 One of three columns
 </div>
 </div>
 </div>
 </div>
 );
 }
}
 
export default App;

And I have added one class for columns, to add open index.css and add the following style sheet.

Index.css


 
.col-sm
{
 background-color: yellow;
 height: 100px;
}

Now let’s try to run our react application and see the output.

This is how we have used a simple grid system without using an additional plug-in which is called vanilla bootstrap, but in this case if we want to use other functionality like navigation bar, toggle panel etc so for that we need to have jquery to be used in our app, by just using vanilla bootstrap we cannot achieve so many functionalities stated above, so we can make use of many another third-party library with react.

Third-party Libraries for React and Bootstrap

As we know that React is JavaScript based library so we have the choice to use structure our application and also can use a third-party library. There are tons of libraries are available to use with React to implement the Bootstrap module in our application, many of them are listed below.

Reactstrap
React-bootstrap
Grommet
Blueprint
Ant design react
Semantic UI React

And many more libraries are available, but in this article, we are going to cover two of them I mean Reactstrap and a React-bootstrap.

Reactstrap

Reactstrap is one of the most used with the 50k+ download on weekly basis, mainly reactstrap is used to include and use Bootstrap in our react application.Reactstrap has a large number of components to use with web application and few components are listed below.

Card
Carousel
Form
Breadcrumbs
Modals
Navbar
Tables
Tabs

And many other useful components are included into Reactstrap, let’s implement two of them into react application, but before we need to install reactstrap in our project, for that execute below npm command.

Npm install reactstrap

After executing the above command, you can see that the reactstrap package will be installed.

Now we have installed reactstrap, our next step is to create new folder named reactstrap-components and inside the folder create new file named Table.js and paste following code.

/reactstrap-compoents/Table.js


import React, { Component } from 'react';
import { Table } from 'reactstrap';
 
class ReactTable extends Component {
 render() {
 return (
 <Table>
 <thead>
 <tr>
 <th>ID</th>
 <th>Employee Name</th>
 <th>Department</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <th scope="row">1</th>
 <td>Manav Pandya</td>
 <td>Information Technology</td>
 </tr>
 <tr>
 <th scope="row">2</th>
 <td>C#Corner</td>
 <td>Management</td>
 </tr>
 </tbody>
 </Table>
 
 );
 }
}
 
export default ReactTable;

In above code snippet of Table.js, I have imported Table from reactstrap package which contains functionality for a bootstrap table, and in the code snippet, I have created a table and provided the structure same as we used for simple HTML table, now let’s import it into app component as described below.

App.js

Here in App.js file, we need to import the file which was previously created by us named Table.js and use it into App component, following code snippet is for App.js.


 
import React, { Component } from 'react';
import './App.css';
import ReactTable from './reactstrap-components/Table';
 
class App extends Component {
 render() {
 return (
 <div className="App">
 <ReactTable/>
 </div>
 );
 }
}
 
export default App;

Here in this file, we have used <ReactTable/> markup tag which is used to include an external file as a reusable component and can include conditionally wherever we want in our react application. By executing our project we will get output like this.

This is how we have developed a reusable component for a bootstrap table, same way let’s create a new File named Card.js to use Card Component in our application.

/reactstrap-components/Card.js

In order to use bootstrap card component, we need to import card component from reactstrap and paste following code snippet inside the newly created file


 .
import React, { Component } from 'react';
import {
 Card, CardImg, CardText, CardBody,
 CardTitle, CardSubtitle, Button
} from 'reactstrap';
 
class ReactCard extends Component {
 render() {
 return (
 <div>
 <Card>
 <CardImg top width="100%" src="https://dummyimage.com/318x180/000/fff" alt="Image Not Found" />
 <CardBody>
 <CardTitle>This is card title</CardTitle>
 <CardSubtitle>This is card subtitle</CardSubtitle>
 <CardText>This is the card text section where you can use different bootstrap element</CardText>
 <Button>Click Me</Button>
 </CardBody>
 </Card>
 </div>
 
 );
 }
}
 
export default ReactCard;

Now open app.js, here we are going to import the Card component that we have created just before, and that uses its markup tag in order to render the bootstrap component.

App.js


 
import React, { Component } from 'react';
import './App.css';
import ReactCard from './reactstrap-components/Card';
 
class App extends Component {
 render() {
 return (
 <div className="App">
 <ReactCard/>
 </div>
 );
 }
}
 
export default App;

Now it’s time to run above example, and you can see the working example will look like this.

So far we have learned that what is the react strap, how to install it and use different bootstrap component within our react application, you can try other different components as well.

React-bootstrap

React-bootstrap is a powerful front-end framework which is used to create a responsive site using react library; react-bootstrap is a rebuilt version of the bootstrap framework. Currently, react-bootstrap supports v3 instead of v4, so you can use many components which are included in version 3 of bootstrap.In order to use react-bootstrap with react, we need to install it using following npm command.

Npm install react-bootstrap

After successful installation of a package, in console you can see like this

Apart from that we need to add additional theme css file into /public/index.html file like this.


 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
 crossorigin="anonymous">

Now we can use many components of react-bootstrap like.

Carousel
Jumbotron
Modal
Table
Breadcrumbs
Navbar
Forms

And many more components are included within react-bootstrap, in this tutorial I am going to use two different react-bootstrap components.

Jumbotron
Carousel

For that create one new folder under src folder named react-bootstrap and create two different js files like this.

Jumbotron.js
Carousel.js

Jumbotron.js

In this file, we are going to import jumbotron component from the react-bootstrap package just like below code snippet.


 
import React, { Component } from 'react';
import { Jumbotron , Button } from 'react-bootstrap';
 
class JumbotronDemo extends Component {
 render() {
 return (
 <div>
 <Jumbotron>
 <h1>React-bootstrap Jumbotron</h1>
 <p>
 This is the simple example which shows the simple demo for Jumbotron of react-bootstrap
 </p>
 <p>
 <Button bsStyle="primary">Click Me</Button>
 </p>
 </Jumbotron>
 </div>
 );
 }
}
 
export default JumbotronDemo;

Carousel.js

In this file same way, we need to import carousel component from a react-bootstrap package like this.


 
import React, { Component } from 'react';
import Carousel from 'react-bootstrap/lib/Carousel';
 
class CarouselDemo extends Component {
 render() {
 return (
 <div>
 <Carousel>
 <Carousel.Item>
 <img width={900} height={500} alt="900x500" src="https://dummyimage.com/900x500/000/fff" />
 <Carousel.Caption>
 <h3>Slide 1 Label</h3>
 <p>This is the slide 1 description</p>
 </Carousel.Caption>
 </Carousel.Item>
 <Carousel.Item>
 <img width={900} height={500} alt="900x500" src="https://dummyimage.com/900x500/000/fff" />
 <Carousel.Caption>
 <h3>Slide 2 Label</h3>
 <p>This is the slide 2 description</p>
 </Carousel.Caption>
 </Carousel.Item>
 <Carousel.Item>
 <img width={900} height={500} alt="900x500" src="https://dummyimage.com/900x500/000/fff" />
 <Carousel.Caption>
 <h3>Slide 3 Label</h3>
 <p>This is the slide 3 description</p>
 </Carousel.Caption>
 </Carousel.Item>
 </Carousel>
 </div>
 );
 }
}
 
export default CarouselDemo;

As you can see that I have included code for Carousel with different other markup tags like.

Carousel
Carousel.item
Carousel.caption

Which is used to provide separate slide’s data as well as their appropriate captions based on our requirements.Now it’s time to include these two components in our main component which is App.js, to render both components we need to import in App.js file which looks like this.

App.js


 
import React, { Component } from 'react';
import './App.css';
import Jumbotron from './react-bootstrap/Jumbotron';
import Carousel from './react-bootstrap/Carousel';
 
class App extends Component {
 render() {
 return (
 <div className="App">
 {/* Using Jumbotron */}
 <Jumbotron />
 {/* Using Carousel */}
 <Carousel />
 </div>
 
 );
 }
}
export default App;

Here in this code snippet, I have imported all two different reusable components in order to render their HTML within the main component file, now save it and execute the application, at last, our page looks like this.

In the output, you can see that both two of our components are rendered as expected with appropriate data; this is how we have used different react-bootstrap components within our react application. I would recommend you to use other components which are provided by react-bootstrap and create something amazing out of it.

Summary

So far in this tutorial of using Bootstrap with react we have covered all the necessary steps which show how to use different bootstrap components into our react application, their different third-party libraries, how to install and use inside application, bootstrap can provide any website a decent look and feel, I would recommend you to go through all the steps and apply multiple components with your react application. Thanks for reading.

KANSIRIS

Integrating Bootstrap with React

Prerequisites

Vanilla Bootstrap with React

Third-party Libraries for React and Bootstrap

Reactstrap

React-bootstrap

Summary

0 comments:

Post a Comment

Complete Tutorials

Popular Posts

Labels