Build Ecommerce App With React

How to build an eCommerce app using ReactJS Page 1 of 25
AB OU T US / S E RV I CE S / CAS E ST UD I E S / H OW I T WOR KS / B LOG CONTACT US
State of Automation Testing & Tools Needs your Opinions (Giveaway worth $2148) TAK E T H E SURV E Y
Simform Blog React
How to build an eCommerce app using

ReactJS
React

Join 12000+ Readers who gain
insights on Reactjs framework
A few weeks ago, when I wrote about React performance, I was
Follow the latest testing trends and
asked by a lot of you to share my thoughts on how to build a
learn practical skills on Reactjs by
performant interface for eCommerce app using ReactJS. And,signing up for our newsletter.
as I wrote email responses, this blog post started taking its 
shape. Email SUBSCRIBE!
https://www.simform.com/build-ecommerce-app-reactjs/ 2/1/2020
We don’t just fine tune eCommerce apps for no reason. The

fact that your product team has to struggle and match various
State of Automation Testing
metrics & Tools
with Needs your
conversion andOpinions (Giveaway
performance worth
itself $2148)
shows how TAK E T H E SURV E Y
even the tiniest bit of UI performance gain reflects into a

significant revenue boost.
What you can expect to learn here:
Just to give you a better overview, this is what our eCommerce

app with ReactJS will look like:
How to
Build an
App like
Airbnb
Mobile
app
development
Services
Looking to
Hire a
React.js
Developer?
Simform provides you
with an extended
team consisting of the
most qualified
developers.
Name*

Email*
Message*
signing up for our newsletter.
Related read: How to build an eCommerce app using GET IN TOUCH

Serverless
Email SUBSCRIBE!
Building eCommerce app with

ReactJS – Things to Consider

Expansion is the goal of any eCommerce organisation. And

why not? Your business wasn’t built to be small.
The frontend of an eCommerce app acts as an indicator of the

quality of your products and overall brand value. But above all
else, it provides a certain level of trust and comfort to the user.
Do you know that
This is how insanely impactful an eCommerce front end really

is!


Email SUBSCRIBE!
Moreover, an eCommerce frontend might gets often updated

for even minor changes (like changing a font) on the special
days of sale such as good-Friday which requires deploying the
update to the entire system.
Henceforth, frontend performance optimization needs to be

handled with care otherwise you might end up breaking your
app which would be otherwise expensive for your business.
So, how does we handle all frontend-related optimization in


eCommerce? Join 12000+ Readers who gain
Well, the answer is, USE React... Follow the latest testing trends and
While modern web has Angular, Vue and other frameworks to

help support building complex UIs, with the exception of Vue,
Email SUBSCRIBE!
we face issues with unnecessary complexities with them.
Benefits of using Reactjs for

eCommerce frontend
I’ve been working extensively in eCommerce segment for over

a year and a half. In that crucial time, I’ve had experienced my
fair-share of architectural mistakes, poor design-related
decisions, technical debt and learned many things or two.
One of the greatest things I’ve learned in these on & half years
is that React really wants you to follow KISS (Keep it Simple,
Stupid) and Atomic design principles.
I won’t delve upon KISS principle assuming that you will

understand it through the link itself. Instead, let’s first
understand the Atomic design principles for building complex
user-interfaces.
React : How Atomic Design

principle helps in building
eCommerce app?
According to the Brad Frost,
There are five building blocks in atomic design:


Email SUBSCRIBE!
Applying Atomic design principles to

eCommerce
Now that we have understood what an Atomic design
guidelines is, Let’s explore how to apply it while building a
complex interface such as eCommerce.
To start with Atoms, let’s evaluate which components will act

as atoms in eCommerce?
Since Atoms are the smallest individual components of a

webpage or an app. They can be anything such as a TextInput
component or a Button component.
Now, let’s say that we want to make a search module for

eCommerce with a Button component and a TextInput
component. When we combine these two components, we can
create a Search component that acts as a molecule.


Email SUBSCRIBE!
Organisms are most likely the complex UI elements of our

eCommerce app. Since they’re more complex than molecules
and atoms, it’s possible that the organisms in our applications
need to handle business logic.
Let’s say, or Product page in eCommerce is made up of

organisms such as a Header organism and a ProductGrid
organism that contains Product molecules. Now, this is how
our Header organism looks like:
Templates are the combination of atoms, molecules and

organisms altogether held in several containers. It is the
combination of these smaller components which makes up
user interfaces in our applications.
By combining all such atoms, molecules and organisms, we

can finally build our Template which will be wireframe for our
eCommerce app.


Email SUBSCRIBE!
Benefits of Atomic Design principle in

eCommerce
Above, we designed the wire-frame for our app using Atomic
design principle. But, you might be wondering how Atomic
designing principle is different than the typical component
designing approach?
Let’s see how well they compete against each other.
Well, I see Atomic Design as a neat approach of making our

components reusable which is limited to identify when you are
working the other way around.
Good Software developers usually emphasise on re-usability

with a strong focus on DRY (DON’T REPEAT YOURSELF)
principle.
The Image attached below illustrates three different levels of

re-usability when it comes to a component-driven UI:


Email SUBSCRIBE!
While working with component-driven UI such as React, you

usually will have to deal with second level of components that
can be reused within the application.
To make you understand re-usability in simpler terms, I would

like to take a simple example of a button.
There are about thousand ways to build a button. There is

absolute zero sense in building the same button time and
again whenever you are needing it in another place. An
experienced UI developer would rather put all the logic that
goes on building a button into a library such as NPM or Github
and use it without hassle wherever needed.
Another biggest advantage of working with Atomic design

approach such as React is a speed boost. Since you are
working on a component, you can independently make
changes to it without affecting the other components on UI.
This means the component which needs updation will only get
reloaded. Again, this is practically beneficial for an
eCommerce web app where you definitely not want to
frustrate your users by un-necessary reloading of the entire
page every time they add an item in the cart.


Email SUBSCRIBE!
Benefits of using ReactJS +

Redux in eCommerce
Undoubtedly, ReactJS is wonderful for building eCommerce

app but remember it will only act as a View layer for your app.
This means, it is for all things related to your app’s user
interface.
But, there are still some questions we need to ask ourselves:
Well, this is where we will need some data to work on. In React,
a component is capable of managing its own data which we
call as local state.
Local state of a React component could be for a current

selected tab, user details or timer status. Now, the beauty of
the React is that the state of an component is changeable in
response to certain actions and events. The actions or events
could be anything such as a network message, tab selection or
a timer expiring.
If this is difficult for you to understand state, here’s a simple

use-case which will become things more clear: Suppose you
are using an Android app. You tap on “Start button” of the app
which takes you towards the on-boarding screen. Now, there
must be some trivial interaction going when you tap the button
and navigates through the on-boarding screen. This trivial
interaction is state or data which a developer has to deal with
while developing an app.

Other than the typical button interaction mentioned in above
example, the state of an app might have to deal with: insights on Reactjs framework

Email SUBSCRIBE!
Now, you can Imagine that even a typical ToDo app will have
so-many states which are important to handle.
Although, we can always handle a state while storing it within

the parent component. But, the same kind of approach will
only work as long as your application remains simple and
small, let alone the application be an eCommerce web app.
After all, we definitely don’t want to make our React

component bloated? Right?
Now you might be wondering “Are there any alternatives other

than keeping our state locally in parent component?”
Well, yes you can make your state global for which you have to
use a tiny library which is called as Redux.
Redux was developed by Dan Aboramov to solve a problem

that most app developer’s finds hard to deal in the beginning:
it helps giving each React component the exact piece of state
(date) it needs.
But, how does Redux do that? I will try to explain it in more

simpler terms.
Unlike standard MVC frameworks, where data can flow

between UI components and storage in both directions, Redux
strictly allows data to flow in one direction only.
See the below illustration:


Email SUBSCRIBE!
In Redux, your state is held in a container known as the store.

There can be only one store within an application. The store
usually resembles like a state tree where states for all objects
are kept. Any UI component can access the state of a
particular object directly from the store.
In order to change a state from a local or remote component,

an action needs to be dispatched. Here Dispatch means
sending actionable information to the store. Upon receiving an
action, store delegates it to the relevant reducer. You can
assume reducer as a pure function that looks at the previous
state, performs an action and returns a new state.
These all might seem highly theoretical, and may seem a bit
difficult to gulp down first for you. But once you practically
apply it, you will get used to complex terminologies and
understand how Redux works.
Let’s understand how Redux can help us in managing the state

of an eCommerce app. Often, multiple components of a
typical eCommerce web application may need to access the
same state but display it in different ways.

A good example would be a classic “master / detail” view,
where you have a list of items that shows a few summary insights on Reactjs framework
values from each item (the master), and also a display Follow the latest testing trends and
component that shows all the details for the currently selected
item (the detail). 

Email SUBSCRIBE!
Now, Keeping state consistent among multiple components

can be a nightmare, especially if there are multiple channels
being used& Tools Needs the
to update yoursame
Opinions (Giveaway worth $2148)
object. TAK E T H E SURV E Y
If you go through the React’s official documentation, you will

read something like this: Lifting State up.
By “Lifting State up”, React wants us to put the data in the

nearest ancestor of the two components.
In the above master/ detail example, Redux will allow individual

components to be connected to the store which will help us
just extract the pieces of data we need. With the help of Redux,
we can extract the names of all items in the list and render
them in a component called as productContainer. Moreover,
the detailComponent will help us to extract the details of the
items and display them. This prevents us passing down the
data through multiple level of components thereby improving
the performance which could have otherwise suffered with the
un-necessary re-rendering. 

Email SUBSCRIBE!
Now that we have understood what role will be played by

Redux in our eCommerce application, let’s learn some best
practices of using it the right way.
Best Way to architect a React

eCommerce App using Redux
You will find tons of article on internet that claims to make you
learn Redux. I am not here to talk about it. Rather, I am here to
talk about something that I find extremely important to share.
Building highly scalable software solutions requires a well-

defined architecture. Designing a well-defined architecture
requires you to visualize about the solution you are about to
build. Join 12000+ Readers who gain
Therefore, it is extremely important for you to learn how to Follow the latest testing trends and
visualise the app and then implement it in an effective manner.
I am going to make you learn the same in next few paragraphs. 

Email SUBSCRIBE!
We have already prepared a wireframe of the app earlier, so the

next step would be to define the architecture of our ReactJS
State of Automation Testing & Tools
eCommerce app.Needs your Opinions (Giveaway worth $2148) TAK E T H E SURV E Y
But before we implement our Architecture, we need to

visualise the whole application as one entity, and each page of
the application as the sub-entity.
Laying out the Redux-based architecture of our eCommerce

app will goes into four different stages:
When we work in a development environment like React, our

system tends to become more reactive to state.
Tal Kol, ex head of Wix Engineering once quoted
You can imagine how important is for us to get our app state
right. This is why state visualisation becomes very important
for us. Let’s understand how we can get it the right way.
Step #1 : Visualise the state tree

From the wireframe we designed, we will visualise the state
tree which will make the Redux implementation in our
eCommerce app much easier.

Let’s get started and visualise the state tree for the wholesome
app. Follow the latest testing trends and


Email SUBSCRIBE!
Pretty neat. Huh??
[Note: In the above image, dotted circles are states that will be
shared by the application whereas solid circles are page-
specific states.]
Similarly, Let’s visualise and draw state tree of other pages and
important elements.


Email SUBSCRIBE!
Product Description Page

Product Catalog Page
Login Page


Email SUBSCRIBE!
Payment Page
Now that we are done with the state visualisation, let’s jump to
the step#2 which is designing the reducers.
Step#2 : Designing the Reducers

Designing the Reducers is one of an important step putting out
eCommerce web app architecture.
To design our Reducers in a correct way, we need to make

them as single source of Truth.
By the single source of truth, we are implying here that our app
state should be stored in a single place so that if we need to
access that state anywhere else in your app, then we can do it
by reference to its single source of truth.
If reading all this makes your head spin then don’t worry I will
explain it in a more neat way.
Every state of your app that seems important to us can have

their own reducers. To represent the single source of truth, we
can combine them in one root reduce which will eventually
define the store. Join 12000+ Readers who gain
By doing so, we will have a total control over our eCommerce
app states and their behaviour. signing up for our newsletter.

Referring to the wireframe of our application, we can have our Email SUBSCRIBE!
Reducer’s designed and combined in one single file:


// Root & Tools Needs your Opinions (Giveaway worth $2148)
Reducer
TAK E T H E SURV E Y
const rootReducer = combineReducer({

header: headerReducer,
login: loginReducer,
footer: footerReducer,
common: commonReducer,
product: productReducer,
catalog: catalogReducer,
payment: paymentReducer
});
Now you got my point?
Combining all the reducers to form a single source of truth i.e

our Root Reducer will make it easier for the store to know
everything about the application.
Let’s now design our Reducers. To make things more easier for
you, I would like to mention one interesting bit which will help
us design them in a more convenient way:
Reducer will be just a replica of what we designed earlier in

our state tree.
So, let’s have a look at how our headerReducer from Image will
look like:
// Header Reducer
const headerReducer = combineReducer({
menu: menuReducer,
search: searchReducer,
location: locationReducer
});
[ Note: A rule of thumb to design the reducer in a correct way

would be to broke it into some smaller reducers, as each of
them would represent individual identities that are responsible
for their specific operations. This helps us to enforce better Follow the latest testing trends and
separation of concerns in our eCommerce app ] learn practical skills on Reactjs by

Email SUBSCRIBE!
Step#3 : Implement Actions

Now that we have learned how to design our reducers the

correct way, let’s now learn how to implement Actions which
will make sure we make correct calls to our API:
Each and every typical action that serves API calls in an app
would go through three defined stages:
A recommended method to apply to our eCommerce app is to

define and maintain these three actions so as to check the
correct data flow from the API.
Here’s a typical example of these actions that calls the search

API of our eCommerce app:
export function fetchSearchData(args) {

return async (dispatch) => {
// Initiate loading state
dispatch({
type: FETCH_SEARCH_DATA
});
try {
// Call the API
const result = await fetchSearchData(args.pageCount,
args.itemsPerPage);
// Update payload in reducer on success

dispatch({
type: FETCH_SEARCH_SUCCESS,
payload: result,
currentPage: args.pageCount
});
} catch (err) {
// Update error in reducer on failure
dispatch({
type: FETCH_SEARCH_FAILURE,
error: err
}); 
}
};
}

Email SUBSCRIBE!
Step #4 : Integrating React with Redux

store using React-Redux
At the beginning of the article, I mentioned how well React
pairs with Redux to develop an eCommerce web application.
Now is the time for us to integrate React with Redux which we
can do seamlessly by using react-redux package.
In order to integrate React with Redux store, we first have to let

our app know that this store exists. This is where the Provider-
class of react-redux package comes handy. One interesting bit
to be note down for Provider class of react-redux package is
that it can only makes the store accessible to its children.
Since, we would ideally want our entire eCommerce app to

access the Redux store, it’ll be a great idea to put our App
component within Provider class.
// src/index.js // //
…
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
const App = <h1>React-Redux eCommerce app</h1>;
ReactDOM.render(
<Provider store={store}>
{ App }
</Provider> ,
document.getElementById(‘root’)
);
Now that we’ve completed the initial part of the React-Redux

integration i.e using the Provider class, now is the time for us
to connect React components with the Redux store we created

earlier.

Email SUBSCRIBE!
We established previously that there is no way to directly

interact with the store. We can either retrieve data by obtaining
its current state, or change its state by dispatching an action
(we only have access to the top and bottom component of the
Redux flow diagram shown previously).
This is precisely what connect component does.
Consider this piece of code, which uses connect to map the

stores state and dispatch to the props of a component named
SearchData to fetch search data:
import React, { Component } from 'react';

import { connect } from 'react-redux'
import fetchSearchData from './action/fetchSearchData';
import SearchData from './SearchData';
const Search = (props) => (
<SearchData
search={props.search}
fetchSearchData={props.fetchSearchData}
/>
);
const mapStateToProps = (state) => ({
search: state.header.search.payload
});
const mapDispatchToProps = {
fetchSearchData
};
export default connect(mapStateToProps, mapDispatchToProps)(Search)
In the above code

snippets, mapStateToProps and mapDispatchToProps are both pure
functions that are provided the stores “state” and “dispatch”
respectively.
The connected component (which is exported)


provides fetchSearchData as props to Search component.
It’s important to note that only components within the Provider
can be connected. learn practical skills on Reactjs by

The following image will give you a definite explanation of the 

Email SUBSCRIBE!
working of connect component.
[ Note: It should be note that only components within the

Provider class can be connected using Connect ]
Now, we have learned how to connect our React components

to Redux.
Until here, we have learned how to make a React eCommerce

application frontend. But what about Backend?
How can we make sensitive API calls?
How about handling and validating form submissions?
Well, this is where we need to setup an API using Express or a

framework like Feathers. The API will provide our application
with access to a database service such as MongoDB. I will
suggest you to go through the tutorial (in the link) to setup the
same.
After doing all these, you can make your app up and going.
Summing Up

As you can see, developing an eCommerce app is much easier
with a framework like React and a tiny library such as Redux. I
will be covering more tutorials on React regarding Server side
rendering (SSR) and Progressive Web App in my upcoming learn practical skills on Reactjs by
blogs, so make sure to sign-up so as to read it earlier.

Email SUBSCRIBE!
Till then, have a REACTive (pun intended) day!
Hardik
State of Automation Testing & Tools Needs your Opinions Shah
(Giveaway worth $2148) TAK E T H E SURV E Y
Working from last 8 years into consumer and

enterprise mobility, Hardik leads large scale
mobility programs covering platforms, solutions,
governance, standardization and best practices.
Your comment here*
POST COMMENT
Sign up for the free Newsletter

For exclusive strategies not found on the blog Sign up today!
Email SIGN UP
Related Posts


React vs Vue – The CTOs React Performance – A HowEmail
To Build an eCommerce
SUBSCRIBE!
guide to Choose the Right Definitive Guide to React js PWA using React
Areas We Serve
Austin San Diego Los Angeles Chicago

701 Tillery St #12, Austin, TX 2305 Historic Decatur Road, 700 S Flower Street, Suite 73 West Monroe Street,
78702 USA Suite 100, San Diego, CA 92106 1000, Los Angeles, CA 90017 Chicago, IL 60603 USA
USA USA
Call us now Call us now
Call us now Call us now
Links Our Services Our Services

About Us AI/ML Development Services Software Testing Services
Services Hire Dedicated Developers Web Application

Development Services
Case Studies Dedicated Software
Development Team Mobile Application
How it works
Development Services
Custom Software
Blog
Development Services API Integration Services
Careers
Application Development Software Product
Services Development Services
Copyright © 2020 Simform. All Rights Reserved.


Email SUBSCRIBE!
Privacy - Terms

Build Ecommerce App With React

Uploaded by

Copyright:

Available Formats

Build Ecommerce App With React

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Build Ecommerce App With React

Uploaded by

Copyright:

Available Formats

How to build an eCommerce app using ReactJS Page 1 of 25

AB OU T US / S E RV I CE S / CAS E ST UD I E S / H OW I T WOR KS / B LOG CONTACT US

Simform Blog React

How to build an eCommerce app using

We don’t just fine tune eCommerce apps for no reason. The

even the tiniest bit of UI performance gain reflects into a

What you can expect to learn here:

Just to give you a better overview, this is what our eCommerce

Building eCommerce app with

ReactJS – Things to Consider

Expansion is the goal of any eCommerce organisation. And

The frontend of an eCommerce app acts as an indicator of the

Do you know that

This is how insanely impactful an eCommerce front end really

AB OU T US / S E RV I CE S / CAS E ST UD I E S / H OW I T WOR KS / B LOG CONTACT US

Moreover, an eCommerce frontend might gets often updated

Henceforth, frontend performance optimization needs to be

So, how does we handle all frontend-related optimization in

Benefits of using Reactjs for

I’ve been working extensively in eCommerce segment for over

I won’t delve upon KISS principle assuming that you will

React : How Atomic Design

There are five building blocks in atomic design:

AB OU T US / S E RV I CE S / CAS E ST UD I E S / H OW I T WOR KS / B LOG CONTACT US

Applying Atomic design principles to

To start with Atoms, let’s evaluate which components will act

Since Atoms are the smallest individual components of a

Now, let’s say that we want to make a search module for

AB OU T US / S E RV I CE S / CAS E ST UD I E S / H OW I T WOR KS / B LOG CONTACT US

Organisms are most likely the complex UI elements of our

Let’s say, or Product page in eCommerce is made up of

Templates are the combination of atoms, molecules and

By combining all such atoms, molecules and organisms, we

Benefits of Atomic Design principle in

Let’s see how well they compete against each other.

Well, I see Atomic Design as a neat approach of making our

Good Software developers usually emphasise on re-usability

The Image attached below illustrates three different levels of

AB OU T US / S E RV I CE S / CAS E ST UD I E S / H OW I T WOR KS / B LOG CONTACT US

While working with component-driven UI such as React, you

To make you understand re-usability in simpler terms, I would

There are about thousand ways to build a button. There is

Another biggest advantage of working with Atomic design

Benefits of using ReactJS +

Undoubtedly, ReactJS is wonderful for building eCommerce

But, there are still some questions we need to ask ourselves:

Local state of a React component could be for a current

If this is difficult for you to understand state, here’s a simple

AB OU T US / S E RV I CE S / CAS E ST UD I E S / H OW I T WOR KS / B LOG CONTACT US

Although, we can always handle a state while storing it within

After all, we definitely don’t want to make our React

Now you might be wondering “Are there any alternatives other

Redux was developed by Dan Aboramov to solve a problem

But, how does Redux do that? I will try to explain it in more

Unlike standard MVC frameworks, where data can flow

See the below illustration:

AB OU T US / S E RV I CE S / CAS E ST UD I E S / H OW I T WOR KS / B LOG CONTACT US

In Redux, your state is held in a container known as the store.

In order to change a state from a local or remote component,