In this blog post, We will explore how to integrate bootstrap framework with ReactJS library.
react bootstrap components
Bootstrap is a popular opensource HTML, Javascript and CSS framework for building responsive applications targetted to Desktop and mobile. Bootstrap developed based on JQuery framework.In this tutorial, We are going to learn bootstrap integration in react library without JQuery.React is one of popular javascript framework for building client-side applications. Since Bootstrap is based on Jquery library, It is very difficult to integrate with React Library.
There are multiple npm projects that available as npm package which we can integrate into react easily.
- reactstrap which supports Bootstrap version 4 only
- react-bootstrap which supports Bootstrap version 3 only
The advantages with the npm package is we can use well tested ready-made components for grid and other bootstrap UI components.
We will pick reactstrap npm package since it is using bootstrap latest version and updating frequently.
Prerequisite
Node and npm commands installationFirst, make sure that install nodejs environment on your operating system. Once installed, Please issue the below commands to check node and npm command working or not
B:\Workspace\blog\reactapp\helloworldreact>node --version
v8.10.0
B:\Workspace\blog\reactapp\helloworldreact>npm --version
5.6.0
Here are the following sections explains about
- React bootstrap integration using reactstrap example
- React Bootstrap button component example
React Application Generation using create-react-app
First Create reactJS application using create-react-app cli tool. This post will not give steps to create react application,. You can check my previous post on create-react-app cli example
Install npm bootstrap dependency in react application
npm install --save bootstrap reactstrap
yarn add bootstrap reactstrap
{
"name": "helloworldreact",
"version": "0.1.0",
"private": true,
"dependencies": {
"bootstrap": "^4.1.3",
"react": "^16.5.2",
"react-dom": "^16.5.2",
"react-scripts": "2.0.5",
"reactstrap": "^6.5.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"uuid": "^3.3.2"
}
}
Import reactstrap components and bootstrap CSS file
reactstrap provides each UI element in the form of component. Import bootstrap.css in app/index.jsimport 'bootstrap/dist/css/bootstrap.css';
import { Button } from 'reactstrap';
Button Component example
import React, { Component } from 'react';
import './App.css';
import { Button } from 'reactstrap';
import 'bootstrap/dist/css/bootstrap.css';
class App extends Component {
render() {
return (
<div className="App">
<div>
<Button color="primary">primary Button</Button>{' '}
<Button color="secondary">secondary Button </Button>{' '}
<Button color="success">success Button</Button>{' '}
<Button color="info">info Button</Button>{' '}
<Button color="warning">warning Button</Button>{' '}
<Button color="danger">danger Buton</Button>{' '}
</div>
</div>
);
}
}
export default App;
