Naimul Islam Naim

ReactJS: An Open Source JavaScript Library

for Front-end Developement

Metropolia University of Applied Sciences

Bachelor of Engineering
Information Technology

Thesis
30 May 2017
 Abstract

Naimul Islam Naim

Author(s)
ReactJS: An Open Source JavaScript library for front-end de-
Title
velopment.
Number of Pages
36 pages + 0 appendices
Date
30 May 2017

Degree Bachelor of Engineering

Degree Programme Information Technology

Specialisation option Software Engineering

Instructor(s)
Markku Karhu, Principal Lecturer

The main purpose of this final year thesis was to study a JavaScript based front-end li-
brary for web and mobile application development. There are many front-end application
development frameworks and libraries at the moment. ReactJS library, one of the most
recent web technologies, is one of them. It has been proven as the fastest rendering li-
brary. It focuses on the view part of the MVC pattern and is being widely adopted for big
scale application development.

Being developed by Facebook for their internal use, it has proved as an efficient and fast
library compared to other technologies. However, it has been open-sourced later on and
enriched with more functionalities everyday by plenty of contributors. When it comes to
dealing with large amounts of data and users, it has been quite successful to give better
user experiences. Alongside Facebook, some other big organisations and applications
are also using ReactJS and React Native for their development. Instagram, Netflix, Airbnb
are a few of the big names serving smoothly enormous numbers of users worldwide.
Those big names prove that ReactJS is serving them quite well.

Throughout the research, the main intention was to evaluate the library and to prove Re-
actJS as a compatible platform to be adopted where there are several options to choose
from. The fundamentals, core architecture, features, data handling methods, popularity,
and adoptability were discussed in this study. Even though, there is no constraint to use
ReactJS over other frameworks it is recommended to use it as an emerging web technol-
ogy to be adopted depending on the nature of the intended application to be built.

Keywords ReactJS, Components, JSX, Virtual DOM, JavaScript, Flux,

Redux, React Native, HTML, Library, Front-end, Framework
Contents

1 Introduction 1

2 Why Learn React 2

2.1 Short and Easy Learning Curve 2

2.2 React is Fast and Agile 4
2.3 React Introduced JSX 5
2.4 Big Development Community 5

3 Environment Setup 6

3.1 Installing Text Editor 6

3.2 Installing Nodejs Bundles 6
3.3 Creating Web Server 7

4 React Core Architecture 13

4.1 React Virtual DOM 13

4.2 One-Way Data Flow 15
4.3 React Components 16
4.4 Introducing JSX Syntax 17
4.4.1 JSX characteristics 17
4.4.2 Practical JSX 18
4.4.3 Children in JSX 20

5 React Native 22

5.1 Setup and Bundling in React Native 22

5.2 Styling is React Native 22
5.3 Animation and Navigation in React Native 24
5.4 Who are Using React Native? 24

6 React vs Other Frameworks 26

6.1 Comparison 26
6.2 React in Market Growth and Popularity 28
6.3 React Library vs Angular Framework 28

7 Data Flow Management in React 30

7.1 Flux as an Architecture from Facebook 30

 7.2 Redux Data Flow Management 31
7.3 Which to Choose Between Flux and Redux 33

8 Discussion 35

9 Conclusion 36

References 37

Abbreviation and Terms

API Application Program Interface

DOM Document Object Model
HTML Hypertext Markup Language
JS JavaScript
JSX JavaScript XML
URL Uniform Resource Locator
 1

1 Introduction

Internet has become a busy hub for searching information and doing different tasks
virtually that used to be done manually before the internet age. There are enormous
numbers of mobile and web applications that have made it easier to do different tasks.
A big part of our everyday task can be done on the internet at the current age. Faster
internet along with fast performing devices demands faster applications.

A trend is growing to shift software or applications we used to use in desktop machines

to the web. There are plenty of applications that are usable from web and mobile de-
vices. Several JavaScript based frameworks and libraries are used to develop different
applications. There are ReactJS, AngularJS, EmberJS, MeteorJS, VueJS, KnockoutJS
and many more at this moment in production. ReactJS is one of them for the front-end
development of applications.

React is a popular open source front-end JavaScript library developed by Facebook.

React is widely popular among developer communities because of its simplicity and
easy but effective developing process. React makes it easier to create interactive user
interfaces. It efficiently updates through rendering the exact components to the view of
each state and makes the data changes in the application.

In ReactJS, every component manages their own state and composes them to the user
interfaces. This concept of components instead of templates in JavaScript, plenty of
data can easily be passed to the app and thus keep the state out of the DOM. Using
Node React can also be rendered on the server side. Alongside web apps, to build
mobile applications we can use React Native as well.

The purpose of the thesis is to carry out an in-depth research of the ReactJS library
based on JavaScript. The fundamental concepts, characteristics, features, develop-
ment processes, core architecture and market research as well as compatibility will be
covered in the thesis. The aim is to provide a solid understanding of the ReactJS li-
brary.
 2

2 Why Learn React

React was introduced to the world two years ago, and since then it has seen impres-
sive growth, both inside and outside Facebook. [1] New web projects at Facebook are
commonly built using React in one form or another, and it is being broadly adopted
across the industry. [1] Developers and engineers are choosing React because it al-
lows spending more time to focus more on the product development and less time
spent on fighting and learning to the framework.

A React application is a collection of discrete components, each representing a single

view. The idea of every individual view component makes it easy to iterate on product
development because to make changes on a single view or component, it is not neces-
sary to consider the entire system. When an application is built with React, the code is
generally predictable, it is because React wraps the DOM mutative, imperative API with
a declarative one, which raises the level of abstraction and simplifies the programming
model. [1] Moreover, it is easier to scale the application built with React.

The combination of React and the rapid iteration cycle of the web, has enabled to make
some excellent products including many Facebook components. An amazing JavaS-
cript framework called Relay has also been made on top of React, which helps simplify-
ing data fetching on a large scale. [1]

2.1 Short and Easy Learning Curve

Unlike some other JavaScript libraries where it takes a lot of time to learn about the
frameworks, in React it does not take much of an effort to start building an application.
React is comprised of many strong features. Readability is one of the greatest strength
of React. It is easily readable even to those who are unfamiliar to it. While other frame-
works require learning many concepts about the framework itself, ignoring the lan-
guage fundamentals, React does the absolute opposite. [3] For example, let’s consider
how different it is in React and Ionic (AngularJS) rendering a portion of an employer’s
list.

In Ionic, it requires to use the directive called ngRepeat. Let’s assume an array of em-
ployers. Each of them contains the following fields: first_name, last_name, is_married.
 3

The target is to show only employers who are married. The following Figure 1 shows a
screenshot of a function written in Ionic framework.

As shown in Figure 1, a function is written called EmployerCtrl where it shows some

specific information of the employers.

Figure 2 shows a screenshot of a directive called ngRepeat written in AngularJS

framework.

As shown in Figure 2, this is how a directive is written in AngularJS framework.

If one is not familiar with Ionic/Angular, this code snippet may raise some immediate
questions of what is the $scope and what is the specific syntax here for the filter.
 4

But in React, one can use the existing knowledge of language fundamentals. The
above functionality can be done using filter and map functions in React. The following
Figure 3 shows how to write the function in ReactJS.

Figure 3 Screenshot of how to use filter and map function in ReactJS.

As shown in Figure 3, functions can be written in easy ways compared to other frame-
works. A few questions may also rise regarding what React.creatclass does and
what render is but the rest of the code is regular JavaScript. This means it will be
quite easy and understandable to those who do not even know much of React.

2.2 React is Fast and Agile

ReactJS is featured with one-way unidirectional data flow between the states and lay-
ers in an application. This means data flows in single direction between the application
states and layers. In two-way data binding like Angular, if a model is changed, the view
also changes and vice-versa. React renders the updates in the DOM much quicker
than alternative frameworks and it is a much smaller library. DOM means document
object model. Thus, it is easy to choose the tools to get the job done.
 5

2.3 React Introduced JSX

JSX is a language that lets you specify the DOM elements before the components right
inside of JavaScript files. This means the logic behind the components and the visuals
are all in one place. This is such a great idea when other frameworks are taking
queues to place them.

2.4 Big Development Community

Big companies like New York Times, Airbnb, Facebook, and Netflix are using React in
production. They are continuously contributing to develop the React core and building
amazing third party libraries that work great with any React applications.
 6

3 Environment Setup

3.1 Installing Text Editor

There are plenty of text-editors to start working with. Most of them are open source and
free of cost. Atom is one of them. It is a very useful text-editor. It has a great communi-
ty of developers around it and they have enough useful plugin updates constantly. It is
usable in every platform including Windows, Mac and Linux.

For Windows users it is needed to install Git-bash while mac and Linux users can do
the job from the terminal. The reason behind using Git bash in Windows is so that you
can have access to the same commands that are available in Linux environments like
Ubuntu distribution or on a mac laptop.

3.2 Installing Nodejs Bundles

To install Nodejs, it is needed to go to the website called nodejs.org and there are cou-
ple of download facilities available for different operating systems. Node can be down-
loaded from there. This download will install a couple of things. First it will install
nodejs. Nodejs allows creating a web server so that React components can be used
locally and can be deployed to the web directly. It also installs node package manager
called npm which will let us install various third party modules like React into our appli-
cations. Figure 4 shows a screenshot of some initial setup.

Figure 4 Screenshot of installation of Nodejs and npm package manager.

 7

As shown in Figure 4, Nodejs and npm package manager are both primary require-
ments for ReactJS development setup. Node and npm both come in a bundle while
downloading from the node website.

3.3 Creating Web Server

To start working with React it is necessary to create a simple webserver beforehand.

Without a webserver, there is no way to see the files in the browser. After opening the
terminal we can use npm-init to create a new node project. Here first we create a
folder in the desktop to store the project named HelloReact. We run npm-init com-
mand from the terminal and it creates one file in the project. It gives a little introduction
of what exactly it is doing and then asks a few basic questions. Figure 5 will show how
to create a package.json file for the project.

Figure 5 Screenshot of Creating package.json file in project folder.

 8

As shown in Figure 5, running npm-init command in HelloReact project lets us walk

through the setup for the package.json file. After answering all those questions includ-

ing the file name, version, author and license, a little file prints out telling that it is about

to write a file into our HelloReact project called package.json. This file is used for not

only the node server but also to manage React dependencies.

Now, if the new folder called HelloReact is opened inside the Atom editor it shows the

package.json file there looks exactly what has been printed out in the terminal. Figure 6

shows the package.json file in the editor inside HelloReact Folder.

Figure 6 Screenshot of package.json file in the project folder.

As shown in Figure 6, Package.json consists of the answers that were made earlier in
the terminal.

Now the first module is to be installed. A module is a third-party code or library we will
use in our application. The following command has to be typed in the terminal to install
the module.

npm install express@4 –save

Figure 7 is a screenshot of installing an express module in the project.

 9

Figure 7 Screenshot of Installation of express module.

As shown in Figure 7, when the express module is saved in the project folder all the

dependencies are also automatically downloaded.

To write the -save flag is important because without saving the flag it is not going to

update the package.json file which stores all the dependencies. Inside Atom there is a

node-module folder which has plenty of files in it. And also in the package.json file an

express module is already installed.

 10

Figure 8 is a screenshot of a node module folder with a plenty of files inside it.

Figure 8 Screenshot of a node module folder in the project.

As shown in Figure 8, node_modules in the project folder contain all the important files
with dependencies. This same action can be done only with npm install command as
long as the “express” module is present in the package.json file. Only command npm
install can do the job as well.

Now in the root of the project a new file called server.js has been created and let us run

it in localhost port 3000. Figure 9 is a screenshot of the file server.js inside the project

folder as follows.
 11

Figure 9 Screenshot of Server.js file in the public folder.

As shown in Figure 9, the public folder has a server.js file in it. A public folder and in-

dex.html has been created in the root of the application. Index.html is the default file of

the application. Figure 10 shows a public older in the editor is a screenshot.

Figure 10 Screenshot of Index.html as the default file of the project.

As shown in Figure 10, the public folder inside the main project folder contains the
package,json and server.js file.

Now if the command ls is run in the terminal it can be seen that all the files and fold-
ers are showing up in terminal. Figure 11 shows if every file and folder is placed inside
the main project folder properly.
 12

Figure 11 Screenshot of all files showing up in the same project folder.

As can be seen in Figure 11, ls command shows all the files and folders inside the pro-
ject folder and the express server is ready to run on port 3000.

Now let us run the server in web typing node server.js command in the terminal. Figure
12 is a screenshot that shows the server running on the localhost.

Figure 12 Screenshot of project deployment in localhost with node server.

As Figure 12 shows, the project is deployed in the localhost with node server at port
3000.

In this section, the procedure of using ReactJS in the local machine was described
thoroughly. There are several other text editors available to start writing code. Atom is
one of them and it is a good one. It has many plugins available and is easy to follow.
 13

4 React Core Architecture

4.1 React Virtual DOM

DOM stands for Document Object Model. DOM manipulation is very important for
modern interactive web technologies. It is often called the heart of the modern web. It
is an abstraction of the structured text. But it works slower than other JavaScript oper-
ations because most JavaScript frameworks usually update the DOM even if they do
not need to do it. That means those updates are not necessarily required to perform
the actions but they still do by default. For example, let us assume nine items have
been put in a shopping basket in an online web store. Now let us say only the first item
is needed to buy and proceed to checkout. Here, most technologies would rebuild the
entire list that has been put in the basket. This means the framework has to unneces-
sarily work ten times more. Because of only one change the system has to rebuild the
list exactly how it was before.

React did not invent Virtual DOM but uses and provides it to the developer community
for free. Virtual Dom is simply an abstraction of HTML DOM. React has a correspond-
ing virtual DOM object for every DOM object like a correspondent or a lightweight copy.
Virtual DOM is also characterized with similar properties to a real DOM. However, it
cannot make any changes directly to the view. DOM manipulation is quite a slow pro-
cess. But manipulating Virtual DOM is faster because it has nothing to do with the view
part and does not make any changes to the screen. Figure 13, reprinted from stacko-
verflow.com, is an illustration of Virtual DOM in the memory.
 14

Figure 13 Screenshot of React virtual Dom in memory. Reprinted from stackover-

flow.com (2017). [9]

As shown in Figure 13, a React virtual DOM in the memory is a lightweight copy of the
real DOM. React uses a method called “diffing” which means rendering a JSX element
gets every single Virtual DOM updated. This might sound inefficient but, in fact, it costs
nothing as Virtual DOM is quite fast to get updated and does not make any impact in
the process. After the DOM gets updated React compares the updated DOM with a
pre-updated state of the DOM and determines which virtual DOM has been changed.
Once React detects the changed DOMs, React updates only those objects to the real
DOM.

Thus, React makes the updates faster through Virtual DOM. In the above-mentioned
example, React would have updated only the checked item from the list and leave the
rest of the items alone. This makes the difference when updating a page in an applica-
tion while React can only make changes to the necessary parts of the DOM. This virtu-
al DOM manipulation process is one of the main reasons why React is gaining much
popularity among the developer communities.
 15

React Virtual DOM Pros and Cons

Among the many advantages of the ReactJS library, a few of the key advantages are
described here.
 The diffing algorithms written in React is quite fast and efficient
 Inclusion of JSX and hyperscript let us build multiple frontends for the same ap-
plication.
 It is very lightweight and capable to be run in every mobile device
 Lots of tractions and mindshare
 It can also be used without React as an independent engine

A few disadvantages of React are as follows.

 It occupies quite much of the memory. Full in memory copy of the DOM.
 Static and dynamic elements don’t bring much of a difference.

4.2 One-Way Data Flow

Frameworks like Angular and Ember use two-way data binding. In a two-way data bind-
ing for example in Angular, if a model is changed, the view also automatically gets
changed and vice versa. An input field in the model can also mutate the model. It per-
forms well in most of the applications but sometimes it may lead to cascading updates
and changing to one model may cause updates in other models. Again, since the state
is mutable by both view and controller, the data flow can be unpredictable in some
cases. Flux or Redux with React can be a better solution to avoid those uncertainties
since both architectures follow one-way data flow. One-way data flow does not make
cascading updates and changes in view.

One way data flow ensures that data flows throughout the application in a single direc-
tion to offer more control between the states and models in an application. One way
data flow also makes the architecture less complicated and understandable. Flux archi-
tecture is a functional approach. Here the view is considered as a function of the appli-
cation state. Eventually, if the state gets some changes the view also gets re-rendered
 16

automatically. Moreover, a similar view is generated from the states and gives a better
understanding and predictability to the application.

To make it more predictable, in an application, data from parent to child flows in a sin-
gle direction. Any data can be updated from any view, anytime in this approach. In
case something goes wrong, debugging is also made less complicated in this way.

4.3 React Components

Components are very important for React. It is often considered as the heart of React,
which is a collection of components. It is small reusable UI element that provides data
to the view and changes over time. [6] To create the entire UI, those small components
are then composed together, nested inside one another. Components let the UI (user
interface) to be split into small pieces and to design and build in a comprehensive way.
UI stands for user interface, i.e. what is shown on the screen. Components are like
JavaScript functions. They literally perform the same task but in different environment
and different approaches. Like functions, they take inputs called props and return Re-
act elements. Those elements describe what the user sees in the interface on the
screen. React components can be used to build the entire interface or even a part of it.

Creating a React Component

A React component can be simply written as a JavaScript function. This function ac-
cepts props and returns a React element. They are called as functional components.
ES6 class can also be used to define a component.

function Welcome(props){
return <h1>Hello, {props.name}</h1>;
}
A React component can also be created in several other ways. To extend or to inherit
or to derive a class from the main component which it attached to object is another way
to create a component. [7]
 17

class Album extends React.Component { // It's the main React

component class!
render() {
return(
<div>
<h1>Pink Floyd- The division Bell</h1>
<ol> // Songs list
<li>Cluster One</li>
<li>What do you want from meli>
<li>marooned</li>
<li>great day for freeDOM</li>
<li>Wearing the inside out</li>
<li>Take it back</li>
<li>Coming back to life</li>
<li>Keep talking</li>
<li>Lost for words</li>
<li>High hopes</li>
</ol>
</div>
)
}
}

Functional components can also be stateless. Rendering every component builds the
user interface experiencing faster and efficient.

4.4 Introducing JSX Syntax

JSX is neither a string nor HTML. It is statically typed syntax extension to JavaScript. It
is similar to an object-oriented language which is designed to run on modern web
browsers. JSX is recommended to be used with React to design and build the user
interface. While it comes with the full power of JavaScript it might even seem as a tem-
plate language too at the first glance though it is not. The React element is produced
by JSX. It can be rendered to the React Virtual DOM. [9]

4.4.1 JSX characteristics

JSX has got some unique features which made JSX quite popular among the React
and React Native developers. At the beginning, it may look difficult but with time adopt-
ing JSX is easy.
 18

First of all, it is faster: While JSX source code is compiled to JavaScript, it shows a very
optimized result. Compared to the equivalent code written in JavaScript, JSX generat-
ed code runs faster. JSX has proved to be 12 % faster in iOS and 29 % faster in An-
droid. [6]

Secondly, it is safer: In contrast to JavaScript, JSX is statically-typed and mostly type-

safe. The quality of applications becomes higher when being developed using JSX,
since many errors will be caught during the compilation process. It also offers debug-
ging features at the compiler level as well.

Thirdly, it is easier: JSX offers a solid class system much like Java, freeing the devel-
opers from working with the too-primitive prototype-based inheritance system provided
by JavaScript. Expressions and statements, however, are mostly equal to JavaScript,
so it is easy for JavaScript programmers to start using JSX. There are also plans on
language-services for editors / IDEs, for example code completion to make coding eas-
ier.

4.4.2 Practical JSX

Expressions can be embedded in JSX though it is an expression too. The function writ-
ten below is an expression.

function formatName(user) {
return user.firstName + ' ' + user.lastName;
}
const user = {
firstName: 'Naimul ',
lastName: 'Islam'
};
const element = (
<h1>
Hello, {formatName(user)}!
</h1>
);
ReactDOM.render(
element,
 19

document.getElementById('root')
);

JSX tags can also contain children.

const element = (
<div>
<h1>Hello!</h1>
<h2>Is React JSX worthy or not?</h2>
</div>
);
Objects in React are also represented by JSX. Here are two different code examples
written below but they are identical.

const element = (
<h1 className="greeting">
Hello, Naimul!
</h1>);
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, Naimul!'
);
Props can be specified in JSX in several ways. JavaScript expressions, string literals
can also be passed as props. If, else if, do, while statements, for loops those are not
considered as expressions in normal JavaScript, so they cannot be used directly in
JSX but with a surrounding.

function NumberDescriber(props) {
let description;
if (props.number % 2 == 0) {
description = <strong>even</strong>;
} else {
description = <i>odd</i>;
}
 20

return <div>{props.number} is an {description} num-

ber</div>;
}

4.4.3 Children in JSX

JSX elements can be provided as children to help displaying nested components. Dif-
ferent types of children can be mixed together so that JSX children and string literals
can be used together. This is another JSX property that is similar to HTML. [7]

A JSX expression can have multiple children. As a result, it has to be wrapped in a div
if it requires the component to render multiple things. JavaScript expressions can be
passed as children within {} enclosing. The two following expressions are identical.

<FirstComponent>Languages</FirstComponent>
<FirstComponent>{‘languages’}</FirstComponent>

Functions in React JSX can also be passed as children. In general, expressions that
are passed to JSX are evaluated to a string, an element or as a list of those things.
Though, props.children works similar to other props and can pass data that not only
React knows itself but any sort of data can be passed. For example, a props.children
callback can be initiated in a custom component. [8]

function Repeat(props) {
let items = [];
for (let i = 0; i < props.numTimes; i++) {
items.push(props.children(i));
}
return <div>{items}</div>;
}

function ListOfTenThings() {
return (
<Repeat numTimes={10}>
 21

{(index) => <div key={index}>This is item {in-

dex} in the list</div>}
</Repeat>
);
}
Booleans, false, true, undefined, null are not rendered though they are valid children.
They are ignored.
 22

5 React Native

React Native is a framework developed by Facebook for native application develop-

ment for both iOS and Android. It is used for making cross platform mobile applications
using JavaScript as a language. It uses the same design as React.JS, takes everything
that is great about React.js and allows to build rich mobile user interfaces from declara-
tive components and gives a better application user experience. (2) A React Native app
is truly indistinguishable compared to an application built with Objective-C for iOS or
Java for Android. It uses the same fundamental User Interface as regular Android and
iOS apps do.

5.1 Setup and Bundling in React Native

React native is a framework, where ReactJS is a JavaScript library for building user
interfaces. [4] Starting a project with ReactJS requires a bundler like Webpack or
Browserify which consists of all necessary modules within it. But in React Native, it
comes with everything that is needed to start developing a project. The setup is quite
easy to follow and fast. It takes only a few command lines in the terminal and becomes
ready to go. A native React application can be built using ES6, ES7. [4]

It is required to have Xcode for iOS in Mac and Android Studio for Android application
development preinstalled in the machine. It can either be run on a simulator or emula-
tor of the specific platform or even directly to the own devices.

5.2 Styling is React Native

Components in React Native do not use HTML to render the application. It provides
alternative components that render the app. Those alternative components map the
actual UI components to get rendered on the application. [4] Most of those alternative
components are then translated to something that is similar to HTML. At this phase, a
view component is similar to a HTML div tag and a Text component is similar to a
p tag. Figure 14 shows an alternative component in React Native.
 23

Figure 14: Alternative components in React Native.

As shown in Figure 14, alternative components in React Native look similar to HTML.
Since this code will not be rendered in HTML, so it is not possible to reuse any libraries
that could be used in ReactJS that could render any type of HTML. But there are some
alternative libraries for example React.parts get a solution of this.

A stylesheet in JavaScript looks similar to CSS and is required to style the React native
components. [4] There is a tool called Flexbox which is designed to make the layout in
React Native applications. [5] Figure 15 shows responsive styling with flexbox for React
native applications.

Figure
15: Responsive styling for React Native app using flexbox.
As shown in Figure 15, responsive styling for React Native app using flexbox is nothing
complicated but quite similar to CSS styling.
 24

5.3 Animation and Navigation in React Native

React Native has brought a new dimension to application animation design and naviga-
tion. Alongside regular features, attracting animations in application swapping, sliding is
an advantage for native applications. They have designed many API’s for the design,
animation and navigation purposes. Those animations are good to see and use.

There is no need for CSS animations in the React Native application. Different compo-
nents in the application can be animated in a completely new way using JavaScript.
React Native provides own built API’s to animate the components. It can be compared
to the existing JavaScript library called Veloity.JS which is widely used for different kind
of animation associated to gestures in the web based applications. For React native,
there is an API provided called LayoutAnimation which is very nice and easy to use
but works only in iOS at this moment. [4] It also can be used in Android but it doesn’t
support it very well.

There is another API called PanResponder which is similar to JavaScript touch events
to interact with user gestures. [4] To navigate between two scenes or two pages there
is a component provided by React Native called Navigator component.

5.4 Who are Using React Native?

A large number of app developers are using React Native in production. From estab-
lished Fortune 500 companies to hot new startup companies are also using React Na-
tive in developments. [7] Figure 16 shows the applications and companies that are us-
ing React Native.
 25

Figure 16: Apps using React Native in production. Reprinted from

book.github.io/React-native/ [7]

As shown in Figure 16, apps like Facebook, Instagram, Airbnb and big organisations
like Tesla, Walmart, Vogue and many other companies are using React Native in pro-
duction.
 26

6 React vs Other Frameworks

There are quite many JavaScript frameworks in the market for front-end web develop-
ment. Though, ReactJS is not a framework like Angular or Meteor. Being a JavaScript
library ReactJS is quite compatible when it comes to developing web applications like
other popular JavaScript frameworks.

6.1 Comparison

Making comparisons between Angular and React nowadays is a popular topic in the
tech community. However, AngularJS, ReactJS, VueJS , EmberJS, BackboneJS and
several other web technologies are the most popular web technologies. Amongst them
Angular and React are widely adopted and advanced JavaScript technologies being
used to create single-page applications (SPAs).

Table 1 on the next page shows a comparison between AngularJS framework and Re-
actJS library. [12]
 27

Table 1 Angular JS and React JS compared

Technology AngularJS ReactJS

Developed by Google Facebook
Technology adopted Full-fledged MVC (model- JavaScript library .View in
view-controller) frame- MVC, requires Flux or
work written in JavaScript Redux to implement archi-
tecture for data manage-
ment Open sourced.
Concept Converts JavaScript into Converts HTML into Ja-
HTML. Manipulates with vaScript. Works with vir-
the real DOM. Performs tual DOM. Performs
client-side rendering server-side rendering
Data Binding Two-way data binding Unidirectional one-way
data binding
Dependencies Dependencies managed Third party tools are re-
automatically quired to manage de-
pendencies
Languages used JavaScript and HTML JavaScript and JSX
Suits for Single page application Single page application
(SPA) that updates single that updates many views
view at a time at a time depending on
components
Latest Version Available Angular 1.6.0 RC2 React 15

As shown in Table 1, there are some fundamentals differences between AngularJS and
React in terms of data binding, dependency handling, DOM manipulation and lan-
guages they use. But the biggest difference is that Angular JS is a framework whereas
ReactJS is a library. Though, both of them are used for front-end development.
 28

6.2 React in Market Growth and Popularity

Many business, news, travel, social networking companies in the USA, the UK, Asia,
France, Germany, Canada and many other countries are using both React and Angu-
lar.[7] Angular is very popular among the developers as it is a complete framework
which comes with MVC (Model-View-Controller) while React is a library, not a frame-
work. React has a View only in front lacking Model and Controller.

Figure 17, taken from Google trends, shows the ratio of searching interest over differ-
ent technologies including ReactJS (blue), AngularJS (red) and VueJS ( yellow) as
follows.

Figure 17: A comparison of topic interest among users in google among ReactJS, An-
gularJS and VueJS. Copied from Google Trends [10]

As shown in Figure 17, Angular JS is by far the most searched among these three, but
ReactJS is quickly closing the gap.

6.3 React Library vs Angular Framework

ReactJS and Angular both are used for front-end web development. Both are very
much in tech community for their scalability and compatibility compared to other exist-
ing technologies. Both are quite handy when it comes to development as both have
many unique features. Both of them provide unique functionalities which are suitable to
 29

consider depending on the nature of the intended application to be built. Hence, a

comparison of pros and cons between them is shown in Table 2.

Table 2 Pros and cons between Angular and React. [6]

React Angular

Pros  SEO (search engine  Oriented on the apps

optimization) friendly with a big amount of
 Creating UI test cases interactive client-side
is an easy task code
 Components are  Good solution for
reusable single page dynamic
 Fast when it comes to apps
displaying the  Fast development
rendered result of a process
big amount of data in  Demands less code
the components in some cases
 Specialized Chrome  Advanced testing
extension made features
debugging easier  Model-view-controller
balance
Cons  In some cases it  Relatively slow when
requires to write more it comes to dealing
code with big data
 Manual processing of amounts.
data changes is  Not as SEO friendly
required as desired
 View oriented

As shown in Table 2, both of them have advantages and disadvantages. Applications

that require frequent data updates involving users should consider ReactJS and big
scale dynamic applications may consider AngularJS for development.
 30

7 Data Flow Management in React

An enormous number of web users worldwide are demanding richer, faster and more
interactive web applications. The web is a very busy place at this current age. Millions
of websites and applications are keeping the web busy all the time with enormous
amount of data. To satisfy all users with smoother and smarter services the developers
have already come up with many frameworks. However, most of the modern JavaS-
cript frameworks are quite hard to master, sometimes scary and not very easy to main-
tain. [8]

ReactJS is considered to be less complex, faster, easy to understand and quite handy
to maintain the states. [6] It allows us to create re-usable UI components and intro-
duced the virtual DOM instead of error prone manual DOM manipulation. It gives the
freedom to design how the user interface should depend upon the state of the data. A
minimal number of DOM changes came to reality to make the process faster.

Managing the states of data was always a challenging task to maintain frameworks. It
is all about how the frameworks actually manage data between different states and
layers in an application describes the simplicity or complexity of the frameworks. [3] If it
is really complicated to manage the data between the states during application devel-
opment, the framework is considered to be hard to master and it takes time to be famil-
iar with it. React can be used with two different architectures for managing the states
throughout the application layers. They are Flux and Redux.

7.1 Flux as an Architecture from Facebook

Flux is an architecture developed by Facebook and internally used when working with
React. Flux is not a framework nor a library. [13] It is used for creating data layers in
JavaScript applications. It is a simple pattern or architecture which allows one way data
flow. It reduces the complexity between the UI componenets in the application. It
utilizes an undirectional one-way data flow that complements React’s composable view
components.

Flux architecture contains three major parts. They are dispatcher, stores and views. It
might sound like the MVC pattern but is not actually similar. It works in a different way
 31

than MVC. Still, Flux does have a controller which is controller-view that retrieves data
from the stores and passes them to the children. [13] Figure 18 shows Flux architec-
ture.

Figure 18: Flux architecture. Copied from ReactJS Cookbook (2017). [13]

As shown in Figure 18, Flux architecture has three main parts, i.e. dispatcher, store
and view. Flux can be better understood by explaining the components it contains.
Action is a helper method to facilitate the data passage to the dispatcher. Dispatcher
receives the actions and then passes the payloads to the callbacks that are registered
already. Stores contains the application states and the contoller views grab the states
from the stores and pass them downwards through the child components. [13]

Finally, Flux is very convenient to be used because the one way data flow makes it
easily understandable. Modifying a complicated application is also made possible and
much easier with Flux. While two way data binding in other frameworks is entitled to
cascading updates and a change in a specific data model brings changes to another
model, one-way data flow or binding in React with Flux is a good solution to overcome
these inconveniences.

7.2 Redux Data Flow Management

Redux is a conceptual architecture or pattern to manage data and communication be-

tween data layers within an application in the browser. Redux is basically inspired by
Flux but not a pure Flux implementation. The key difference between Redux and Flux
is that Flux uses a single store to wrap all state objects that contain all the states of an
application. It plays with data in the client side. It actually works like a backend data-
 32

base in the front-end client-side browser where all the required data are kept in order to
generate the view. In a React application those data from the Redux database can be
used to generate a proper view depending on the actions made from the user’s brows-
er.
Managing those states in an entire application is always a hard and challenging task for
the developers. The bigger the scale of the application the bigger is the challenge to
maintain states. Here Redux provides the state container to the application so that it
behaves consistently. Redux is very useful to build scalable, interactive React applica-
tions. It is easier to learn than Flux. It is also very efficient, straight forward and power-
ful compared to any other solution to manage data flow because it is built with several
unique features and is very helpful to make real life applications. It is also a standard
tool to work with for the one way data flow featured applications and programs. Redux
is very powerful and a must use for the server side React applications. It is a unique
and effective technology to be used along with React on the applications or websites
where the customer experience is top-notch. For example, Facebook, Instagram,
Airbnb and many popular news services around the world use Redux server rendering
implementations for quick customer services and responses.

Installation ----- npm install –save redux

Figure 19: Redux architecture. Printed from startuprocket.com (2017). [14]

 33

As shown in Figure 19, data flows in one way in Redux architecture. Mostly Redux is

used as a collection of CommonJs When Redux is imported in a Webpack, Browser-

ify or in a Node environment these modules are automatically what also downloads.

The Redux code is written in ES2015 and works fine in every browser. [14] Using

Babel or a module bundler is not mandatory to get started with Redux. The whole

state of your app is stored in an object tree inside a single store. The only way to

change the state tree is to emit an action, an object describing what happened. To

specify how the actions transform the state tree, you write pure reducers.

7.3 Which to Choose Between Flux and Redux

Redux is basically an implementation of Flux. Flux is used in Facebook for develop-

ments. Flux is neither a library nor a framework. It is a recommended architecture for
building web applications. Redux is also not a pure library or framework. Redux is
quite like Flux but only reduces some complexity by using functional compositions
where Flux architecture is based on callback registers. They are fundamentally al-
most similar but some abstractions are made less complicated and possible to i m-
plement that would be hard or in some cases impossible to be implemented in Flux.
Among many great features of Redux is that it is built with tools and there is only one
way to do that. Thus, Redux reduces complexity and confusion while developing.

Why Redux should be preferred over Flux is described with some examples.

 Both Redux and Flux both have actions which are comparable to events. Flux
considers actions as simple JavaScript object, Redux does so. But if we use
middleware with Redux, actions can be functions and promises too.

 Flux has a convention to have multiple stores per application. Redux allows
having a single store per application.

 As Flux is a singleton object, it has a single dispatcher and all the actions
should pass through the dispatcher. Multiple dispatchers are not allowed in
 34

Flux because it can have multiple stores and a single dispatcher acts as a
manager which is required for the dependencies between those stores.

 Redux is free of any dispatcher entity. Instead, stores in Redux have the dis-
patching capability.
 Stores in Flux decide how to manage the data and show it based on the ac-
tions received makes it most powerful in Flux architecture.
 In Redux, the reducer function in the store decides what to do with the data
based on the actions received. Reducer functions are the smarter player in
Redux.
 35

8 Discussion

In this chapter of this study, a brief evaluation of the topic will be discussed. The inten-
tion of this research work over ReactJS library was to explore its features, to find out
clearly what it offers, the core concepts behind the architecture, how it is different from
other library and frameworks, its data handling processes and other functionalities. The
reason behind choosing ReactJS as a topic was to know it better by researching and
thus enriching personal learning over it.

Throughout the research, it was found that ReactJS is a less complicated library com-
pared to other frameworks. It is a very fast rendering library and agile in development.
Learning and mastering React is less time consuming compared to others since it is
only a library, not a framework. Frameworks usually take a longer time to know about
them and learn the terminologies.

In addition, the main concept behind React is components. Everything shown in the
front-end is nothing but components. The user-interface is a collection of components.
Making changes in one component does not affect other components. Thus updating
the application over changes in data has been made easier and less complicated. To
perform this functionality React introduces a modified concept of DOM to virtual DOM.

One-way data flow for the data management is another good thing about React. Data
can be changed from anywhere in the application layer. As the data flows in a single
direction, it offers solid control between the models and states in the application. The
inclusion of a new syntax called JSX has been proved quite fast while rendering.

As a faster rendering library, React has been proved successful since applications like
Facebook, Instagram, Airbnb, Netflix, Uber have adopted it for their developments.
When it comes to dealing with enormous amounts of users and data, React is un-
doubtedly adoptable. All those applications mentioned above have billions of users and
countless data to be dealt with. Thus, when an application intended to serve big num-
bers of users, play with tons of data, ReactJS is recommended to be used for faster
and smooth user experiences.
 36

9 Conclusion

The goal of the thesis work was to study and review the JavaScript based open source
front-end library called ReactJS. Facebook developed ReactJS for their own purpose
and later open sourced it. Since the beginning, within a very short time ReactJS has
gained immense popularity among the developers and tech industry.

To conclude, in this document, a clear instruction has been illustrated of how to start
with React, React features and functionalities with examples, when to consider React
over other alternatives and what data architecture management system to consider as
well as its prospects in detail.

Since, React is a demanding and important technology to be learnt, learning through

further research would be beneficial to enrich personal skills over this technology.
Keeping this in mind, the topic was chosen. Developing an application in React would
be great in terms of enriching practical skills, but due to some limitations, an in depth
review and evaluation was produced. So far, a solid concept has been built already
while studying over React for the last few months.

Finally, it can be said that ReactJS is quite a technology to be learnt and certainly
worth considering for application in production. It has brought a new dimension in the
web application development. The fast rendering library accelerates the application
efficiency and it can be seen that React has a bright future ahead and learning React is
worth the effort.
 37

References

1. A javaScript Library for Building User Interfaces [Online]

URL: https://facebook.github.io/React/. Accessed February 5 2017

2. React Native Bringing Modern Web Techniques to mobile.

URL:https://code.facebook.com/posts/1014532261909640/React-native-
bringing-modern-web-techniques-to-mobile/. Accessed February 9 2017

3. Github React Native [A framework for building native apps using React native]
[Online] URL: https://facebook.github.io/React-native/. Accessed April 22 2017

4. React Native Mobile Apps

https://www.smashingmagazine.com/2016/04/consider-React-native-mobile-
app/
Accessed April 25 2017

5. React native Animation and navigation. [Online]

URL:https://facebook.github.io/React-native/docs/animated.html.

6. Stefanov Stoyan, editor. React: Up and Running: Building web Applications.

First Edition; 2016. Accessed April 4 2017

7. Horton Adam. Vice Ryan, author. Mastering React; February 23; 2016.
Accessed April 8 2017

8. Stein Johannes, author. ReactJS Cookbook. December 6; 2017.

Accessed March 22 2017

9. Masiello Eric, author. Mastering React Native. January 11; 2017.

Accessed April 30 2017

10. Google Trends. [Online][Cited: 26 March 2017]

 38

URL:https://trends.google.com/trends/explore?q=%2Fm%2F012l1vxv,%2Fm%2F0j
45p7w,VueJS
Accessed April 1 2017

11. A comparison of React and Angular [Online]

URL: https://erminesoft.com/what-are-the-pros-and-cons-of-angularjs-vs-Reactjs/
Accessed April 12 2017

12. React Virtual DOM [online]

URL:http://stackoverflow.com/questions/21109361/why-is-Reacts-concept-of-
virtual-dom-said-to-be-more-performant-than-dirty-mode
Accessed April 2 2017

13. Flux: Application Architecture for Building User Interfaces. [Online]

URL: https://facebook.github.io/flux/docs/in-depth-overview.html
Accessed April 4 2017

14. Evolution Towards One- Way Data Flow: A Quick Introduction to Redux.
URL: https://www.startuprocket.com/articles/evolution-toward-one-way-data-flow-a-
quick-introduction-to-redux
Accessed April 11 2017

15. What the Flux! Lets Redux. . [Online]

URL: https://blog.andyet.com/2015/08/06/what-the-flux-lets-redux/
Accessed April 16 2017
39
Appendix 2
1 (1)