days
-3
-7
hours
-2
0
minutes
-5
-4
seconds
0
-8
search
A beginner's 101

How to implement bootstrap template in ReactJS

Ashish Goyal
ReactJS
© Shutterstock / Maquette.pro  

Bootstrapping in React is one of the most basic functions but a beginner may still struggle with it. Here is a quick tutorial on a very basic yet important bootstrap template example in ReactJS.

ReactJS is a JavaScript library used for building reusable UI components. Here is the definition, according to the official React documentation: “React is a library for building composable user interfaces.”

It encourages the development of reusable UI components, which present data that changes over time. React is commonly used as the V in MVC and abstracts away the DOM from you, offering a simpler programming model and better performance.

It can also render on the server using Node, and it can power native apps using React Native. React implements one-way reactive data flow, which reduces the boilerplate and is easier to reason about than traditional data binding. 

But enough about the introductory statements about React – let’s get on with the matter at hand!

Bootstrapping in React is one of the most basic functions but a beginner may still struggle with it.

Here, I will show you a very basic yet important bootstrap template example in ReactJS.

    iJS React Cheat Sheet

    Free: React Cheat Sheet

    You want to improve your knowledge in React or just need some kind of memory aid? We have the right thing for you: the iJS React Cheat Sheet (written by Joel Lord). Now you will always know how to React!

Get strapping

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import About from './about';
import Home from './home';
import { Collapse,Navbar, NavbarToggler, NavbarBrand, Nav, NavItem, NavLink,Container, Row, Col, Jumbotron, Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
class Hello extends React.Component{
  render() {
    return (
        <Router>
          <Container>
            <Row>
            


<Col xs="3">
            


<h2>Therichpost</h2>



            <Navbar light expand="md">
              <NavbarBrand></NavbarBrand>
              


<Nav vertical navbar>
                <NavItem>
                  <Link to={'/home'}>Home</Link>
                </NavItem>
              <NavItem>
                <Link to={'/about'}>About</Link>
              </NavItem>
              </Nav>



            </Navbar>
            </Col>



                


<Col xs="9">
            


<h4><small>Lokesh Gupta</small></h4>



                


<hr />



            <Switch>
            
              <Route exact path='/' component={Home} />
                <Route exact path='/home' component={Home} />
                    <Route exact path='/about' component={About} />
                    </Switch>
                </Col>



              


<footer class="container-fluid">
              <center>

Therichpost

</center>
            </footer>



           </Row>
        </Container>
      </Router>
    );
  }
  }

  ReactDOM.render(<Hello />, document.getElementById('root'));

<!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">
  <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fcode.jquery.com%2Fjquery-3.2.1.slim.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
  <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fmaxcdn.bootstrapcdn.com%2Fbootstrap%2F3.3.7%2Fjs%2Fbootstrap.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
    <title>Lokesh Gupta - React</title>
  
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0A%20%20.col-3%20h2%7B%0A%20%20padding%3A%2020px%3B%0A%20%20%20%20background%3A%20%236d7fcc%3B%0A%20%20color%3A%23fff%3B%0A%20%20margin%3A0%3B%0A%20%20%7D%0A%20%20%20.row.content%20%7Bheight%3A%201500px%7D%0A%20%20%20%20.sidenav%20%7B%0A%20%20%20%20%20%20background-color%3A%20%23f1f1f1%3B%0A%20%20%20%20%20%20height%3A%20100%25%3B%0A%20%20%20%20%7D%0A%20%20%20%20footer%20%7B%0A%20%20%20%20%20%20background-color%3A%20%23555%3B%0A%20%20%20%20%20%20color%3A%20white%3B%0A%20%20%20%20%20%20padding%3A%2015px%3B%0A%20%20%20%20%7D%0A%20%20.navbar%20%20%7B%0A%20%20%20%20background-color%3A%20%237386d5!important%3B%0A%20%20%20%20%7D%0A%20%20.navbar%20A%7Bcolor%3A%23fff%3B%7D%0A%20%20%20%20%40media%20screen%20and%20(max-width%3A%20767px)%20%7B%0A%20%20%20%20%20%20.sidenav%20%7B%0A%20%20%20%20%20%20%20%20height%3A%20auto%3B%0A%20%20%20%20%20%20%20%20padding%3A%2015px%3B%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20.row.content%20%7Bheight%3A%20auto%3B%7D%20%0A%20%20%20%20%7D%0A%20%20%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;style&gt;" title="&lt;style&gt;" />

  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    

<div id="root"></div>


  </body>
</html>

import React, { Component } from 'react';
class Home extends React.Component{
  render() {
    return (
     	

<h6>

Home

 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</h6>


    );
  }
}
export default Home;

 

import React, { Component } from 'react';
class About extends React.Component{
  render() {
    return (
      

<h6>

About Us

 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</h6>


    );
  }
}
export default About;

All set!

You can now Run the project with npm start.

I hope my short tutorial will be helpful to you! Let me know what you think in the comments below.

Author
ReactJS

Ashish Goyal

Ashish Goyal is a Digital Marketing Analyst in well-known mobile application development Company, active since 2008 with professional’s developers Hire Magento developer form Xtreem Solution one the best Magento development company. He loves to share his technology research and knowledge by writing blog or article. as a digital marketing analyst his aim to build leadership to growing a strong and environmentally sound IT Enterprise. You can join with him on LinkedIn and Twitter.


Leave a Reply

Be the First to Comment!

avatar
400
  Subscribe  
Notify of