November 17, 2017 Syed Shah

Build a ReactJS app using Bootstrap and React Router

React

The purpose of this post is to build a new ReactJS app and then integrate React router and React bootstrap

Some Definitions

Lets get some basic definitions out of the way. They will be short and sweet I promise 🙂

What is ReactJS?

React is a component-based JavaScript library for building user interfaces. (more details here)

What is React Bootstrap?

Bootstrap is a popular HTML, CSS and JS library for building responsive websites (more details here)

And what is React Router?

A popular routing library for React (more)

Install create-react-app command

create-react-app is definitely your friend; A very handy utility which lets you create a new React app without requiring you to getting into any configurations. Run the following command to install it

npm install -g create-react-app

Create the App

create-react-app my-react-app

And change to the newly created app directry

cd core-systech

Run it!

At this point you should be able to run the app using the following command

 npm start

And see something like this when you visit localhost:3000

ReactJS App

Congrats! You just built a complete ReactJS app

Install Dependencies

As stated in the beginning, we want to implement routing using React router and also integrate with React bootstrap

Install react router

npm install --save react-router-dom

Install bootstrap

npm install --save react-bootstrap bootstrap@3

Install react router bootstrap

This package provides integration between React router and bootstrap. It primarily provides a LinkContainer component which we will use to wrap bootstrap components where ever we need to specify a link

npm install --save react-router-bootstrap

Implement the main components

This is not a React router or Bootstrap tutorial so I will not dwelve in the implementation details, but feel free to ask by posting a comment, emailing me directly or using my twitter handle

Create the main navigation bar

Copy the following code and save it in a file called MainNavBar.js under my-react-app/src/

import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/css/bootstrap-theme.css';

import React from 'react';
import Navbar from 'react-bootstrap/lib/Navbar';
import Nav from 'react-bootstrap/lib/Nav';
import NavItem from 'react-bootstrap/lib/NavItem';
import {Link} from 'react-router-dom';
import { LinkContainer } from 'react-router-bootstrap';

class MainNavBar extends React.Component {
  render() {
    return (
      <Navbar collapseOnSelect>
        <Navbar.Header>
          <Navbar.Brand>
            <Link to="/">
              React-Bootstrap
            </Link>
          </Navbar.Brand>
          <Navbar.Toggle />
        </Navbar.Header>
        <Navbar.Collapse>
          <Nav>
            <LinkContainer to="/">
            	<NavItem eventKey={1}>Home</NavItem>
            </LinkContainer>
            <LinkContainer to="/about">
            	<NavItem eventKey={2}>About</NavItem>
            </LinkContainer>
      		</Nav>
        </Navbar.Collapse>
    	</Navbar>
    );
  }
}

export default MainNavBar;

 

Update App.js

This is where you will include the MainNavBar and also define routes using React router. Open App.js and copy past the following code

import React, { Component } from 'react';
import './App.css';
import {
  BrowserRouter as Router,
  Route
} from 'react-router-dom';
import MainNavBar from './MainNavBar';
import Grid from 'react-bootstrap/lib/Grid';
import Row from 'react-bootstrap/lib/Row';

class App extends Component {
  render() {
    return (
      <Router>
        <Grid fluid={true}>
          <Row>
            <MainNavBar/>
          </Row>
          <Row>
            <Route exact path="/" component={Home}/>
            <Route path="/about" component={About}/>
          </Row>
        </Grid>
      </Router>
    );
  }
}

const Home = () => (
  <div>
    <h2>Home Page</h2>
  </div>
)

const About = () => (
  <div>
    <h2>About Page</h2>
  </div>
)

export default App;

You should see the following beautiful page (#sarcasm) 🙂

ReactJS App

HTH !

Share this...
Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn
Tagged: , , , , ,

Leave a Reply

Your email address will not be published.

Contact Us

Get in touch to schedule your FREE consultation!