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

Read more

Introduction to Redux

Intended Audience

This post is intended for people with little to no understanding of Redux. I have excluded some details and have intentionally prioritized simplicity over completeness. My goal is to give the readers a jump start in Redux and present it as simply as possible by just focussing on the core concepts.

What is Redux?

Simply put, Redux is a set of tenets (3 in particular) on which you abide by. These tenets describe why, how and when your application state changes. They are:

1. Single state

Your entire application’s state is saved in a single state object. This is radically different from the best practices we were used to so far; i.e each component maintains and manages its own state.

2. State can only be changed by emitting ‘Actions’

The single state object mentioned above is read-only. The only possible way to change state is by emitting an action. Action¬†is an object which describes an event. Note that emitting an¬†action¬†doesn’t itself changes the state.¬†Action only specifies that some state changing event happened.

Read more

How to add google geo coding lookup and map marker using express with pug

google map market using node, express and pug

Purpose

In this post we will do the following:

  1. Lookup an address using google’s geocoding API
  2. Show it in a map by specifying a google map marker

We will do this in express using pug template engine

Include google maps api

First include the google maps api in your .pug file

script(async defer src="https://maps.googleapis.com/maps/api/js?key={your_key}&callback=initMap")

key: Is the google api key assigned to your account by google

callback: the callback function which would get invoked when the api loads. We will define this function in the next section

Define callback function: initMap()

Read more

10 things you can do to improve your website performance

Why focus on website performance?

If you run an ecommerce website, page performance should be one of your top priority as realized by retail giants indicated in this blog

  • Walmart found that:
    • For every¬†1 second of improvement¬†they experienced up to a¬†2% increase in conversions
    • For every¬†100 ms of improvement, they grew¬†incremental revenue by up to 1%
  • Shopzilla¬†speeded up average page load time from 6 seconds to 1.2 seconds, and¬†increased revenue by 12%¬†and page views by 25%.
  • Amazon increased revenue by 1%¬†for every 100ms of improvement (same as Walmart).
  • Yahoo increased traffic by 9%¬†for every 400ms of improvement.
  • Finally, Mozilla got¬†60 million more Firefox downloads per year, by making their pages 2.2 seconds faster.

Now that we understand the importance of page performance lets look into some techniques we can use to improve it.

Read more

Contact Us

Get in touch to schedule your FREE consultation!