Tuesday, October 16, 2018

Getting started with ReactJS Bootstrap Tutorials with examples | reactstrap tutorials

In this blog post, We will explore how to integrate bootstrap framework with ReactJS library.

react bootstrap reactstrap tutorial example

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.
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 installation 
First, 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
if the command is giving version number, that means it is installed correctly
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

reactstrap has a dependency on bootstrap npm library. Install both dependencies in your application using npm or yarn command line
npm install --save bootstrap reactstrap
yarn add bootstrap reactstrap
Once dependencies are installed, This adds bootstrap and reactstrap folders in node_modules folder of an application and also This adds an entry in the dependency section of package.json Here is my package.json file
{
  "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"
  }
}
This installs required dependencies in the application

Import reactstrap components and bootstrap CSS file 

reactstrap provides each UI element in the form of component. Import bootstrap.css in app/index.js
import 'bootstrap/dist/css/bootstrap.css';
import button component in application - app/app.js
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;
react development server is started using npm start command and following is the screenshot of the button output

react bootstrap button example

Related article


EmoticonEmoticon