React Bootstrap with NavBar React Router and Styled Components

Recently I've used react bootstrap, react router and styled components for a new project.
I believe this is the "must have" framework for any new project startup.

I found the documentation for the implementation pretty good, but it does not cover the entire process. Hence, I list the steps for creation of such a project in this post.

Create a New Project

The simplest way to start is using the create-react-app tool.
The create a new project, install the latest NPM version, and then run the following

npx create-react-app demo
cd demo
npm start

Once this is done, we get the react template application startup page running on our browser.

Install the Dependencies

Now you have a project template to start from.
Next, let's install the required libraries:

• react bootstrap
• react router dom
• styled components

npm install --save react-bootstrap bootstrap react-router-dom styled-components

Create the Actual Pages

For the purpose of this demo, we will create a navigation bar of two pages: page1 and page2.
Lets create these two pages, and use styled components to style them.

The styled components enables specifying CSS in a direct and simple manner. Our style.js file is the following.

import styled from 'styled-components'
export const Text = styled.div`
  height: 100%;  
  width:100%;  
  color: aqua;  
  background-color: darkkhaki;
`

Next, let's create the pages.

Page 1:

import React from 'react'
import {Text} from './style'
function Page1() {
  return (
    <Text>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
      magna aliqua. Mauris augue neque gravida in fermentum et sollicitudin. Viverra ipsum nunc aliquet bibendum enim
      facilisis gravida. Neque gravida in fermentum et sollicitudin ac orci phasellus egestas. Tortor consequat id porta
      nibh. Risus sed vulputate odio ut. Mollis nunc sed id semper risus in hendrerit gravida. Nulla facilisi cras
      fermentum odio. Feugiat pretium nibh ipsum consequat nisl vel pretium lectus quam. Mi ipsum faucibus vitae
      aliquet. A lacus vestibulum sed arcu non. Laoreet id donec ultrices tincidunt arcu non sodales neque. Condimentum
      mattis pellentesque id nibh tortor id aliquet. Mauris pellentesque pulvinar pellentesque habitant morbi. At
      elementum eu facilisis sed odio.
    </Text>
  )
}

export default Page1

Page 2:

import React from 'react'
import {Text} from './style'
function Page2() {
  return (
    <Text>
      Preventing the exploitation of animals is not the only reason for becoming vegan, but for many it remains the key
      factor in their decision to go vegan and stay vegan. Having emotional attachments with animals may form part of
      that reason, while many believe that all sentient creatures have a right to life and freedom. Specifics aside,
      avoiding animal products is one of the most obvious ways you can take a stand against animal cruelty and animal
      exploitation everywhere.
    </Text>
  )
}

export default Page2

Create the Main Navigation Page

We use the app.js as our application main page.

import 'bootstrap/dist/css/bootstrap.min.css'
import React from 'react'
import {Nav, Navbar} from 'react-bootstrap'
import {BrowserRouter, Link, NavLink, Redirect, Route, Switch} from 'react-router-dom'
import Page1 from './page1'
import Page2 from './page2'
function App() {
  return (
    <BrowserRouter>
        <Navbar bg="dark" variant="dark" expand="sm" >
          <Navbar.Brand as={Link} to="/">React Demo App</Navbar.Brand>
          <Navbar.Toggle aria-controls="basic-navbar-nav"/>
          <Navbar.Collapse id="basic-navbar-nav">
            <Nav className="mr-auto">
              <Nav.Link as={NavLink} to="/page1">Page 1</Nav.Link>
              <Nav.Link as={NavLink} to="/page2">Page 2</Nav.Link>
            </Nav>
          </Navbar.Collapse>
        </Navbar>
        <Switch>
          <Route exact path='/page1' component={Page1}/>
          <Route exact path='/page2' component={Page2}/>
          <Redirect from="/" to="/page1"/>
        </Switch>
    </BrowserRouter>
  );
}

export default App;

Some important points:


1. To enable bootstrap styling we need to include the bootstrap style sheet:

import 'bootstrap/dist/css/bootstrap.min.css'

2. To enable integration of react-router-dom and react-bootstrap navigation, we replace the render using the "as" property:

<Nav.Link as={NavLink} to="/page1">Page 1</Nav.Link>

Our application is now fully operative.
we can use navigation to move to the related pages without reload of the entire pages, just as a single page application should work.

Docker

The last task to handle it to run the application as a docker container.

In this case, we'll use NGINX as the web server. The Dockerfile is as follows:

FROM node:12.7 as build
WORKDIR /app
COPY src/package.json ./
COPY src/package-lock.json ./
RUN npm install

COPY src/ ./
RUN npm run build

FROM nginx:1.17-alpine
COPY --from=build /app/build /usr/share/nginx/html
CMD ["nginx", "-g", "daemon off;"]

Summary

In this post we have lay the foundation for a react application.
We have used libraries that enables us to quickly progress in future developments.

This does not include all the required tasks. We will probably need to use react hooks, and also configure proxy of the requests on the NGINX side.
However, this is a great start.
I hope you'll find it useful.