ADVANCE WEB

PROGRAMMING
INTRODUCTION TO REACT.JS
 Contents
Introduction to React.js
oWelcome to React
oEmerging JavaScript
oFunctional Programming with JavaScript
Chapter 1
Introduction to React.js

oWelcome to React.js
o Obstacles and Roadblocks
o React’s future
o Keeping up with the changes
o Working with files
Chapter 2

Introduction to React.js

oEmerging JavaScript
o Declaring variables
o Arrow functions
o Transpiling ES6
o ES6 Objects and Arrays
o Promises
o Classes
o ES6 Modules and CommonJS
Chapter 3
Introduction to React.js

oFunctional Programming with JavaScript

o What it means to be functional?
o Imperative versus Declarative
o Functional Concepts
Books and e-resources

Books
 Alex Banks & Eve Porcello, “Learning React:
Functional Web Development with React an
d Redux”,O’Reilly , July 2018.
E-resources
 https://reactjs.org/tutorial/tutorial.html
 https://www.tutorialspoint.com/reactjs/
 http://w3schools.com/react
 http://javatpoint.com/reactjs-tutorial
Who is using React.js?
#1 Facebook

#2 Instagram

#3 Netflix

#4 New York Times

#5 Yahoo! Mail

#6 Khan Academy

#7 WhatsApp

#8 Vivaldi Browser

#9 Codecademy
What is React.js?
React.js
 Library for building user interfaces
 Helps to build single page applications
 Allows to create reusable UI components
 Was developed by Facebook
 Helps in handling the view layer of the web and mobile apps
 Currently one of the most popular JS libraries with a good
community support
 It is a declarative, efficient and flexible library
Why should we use React.js?
Main objective is to develop a user interface and to improve
the speed of the application
 It uses JS Virtual DOM which is faster than DOM
It uses components and data patterns that improves readability
and helps to maintain larger apps
What is Virtual DOM?
The virtual DOM (VDOM)
• It is a programming concept where an ideal, or “virtual”
• It is a representation of a UI to be kept in memory and synced with the “real” DOM by a
library such as ReactDOM.
• This process is called reconciliation.
• This approach enables the declarative API of React: You tell React what state you want
the UI to be in, and it makes sure the DOM matches that state.
• This abstracts out the attribute manipulation, event handling, and manual DOM updating
that you would otherwise have to use to build your app.
• Since “virtual DOM” is more of a pattern than a specific technology, people sometimes
say it to mean different things.
• In React world, the term “virtual DOM” is usually associated with React elements
 since they are the objects representing the user interface. React, however, also uses
internal objects called “fibers” to hold additional information about the component tree.
They may also be considered a part of “virtual DOM” implementation in React.

Source: https://reactjs.org/docs/faq-internals.html
Prerequisite
Good knowledge of the following:
• HTML
• CSS
• JS
• Knowledge of ECMA Script
What are the features of React.js?

1. JSX- Java Syntax Extension (JSX) is a JavaScript syntax

extension
2. Components – React is all about the components. Here
everything is thought as components
3. Unidirectional data flow and Flux – React implements on
one-way dataflow which makes it easy to reason about your
application. The Flux pattern helps in keeping the data
unidirectional
4. License – React is licensed under the Facebook
Advantages and limitations of React.js
• Advantages
• Usage of virtual DOM – better and faster
than DOM
• Can be used both on client and server
side
• Components and data patterns improve
readability
•Limitations
• Covers only the view layer
• Uses inline templating and JSX
Sample Projects
https://reactjs.org/community/examples.html
 React.js and React Native
React.js React Native
• React Native is a framework for b
• React.js / React / ReactJS is
uilding native applications using J
a JavaScript library respons avaScript.
ible for building a hierarchy • React Native compiles to native a
of UI components pp components, which makes it p
ossible for you to build native mo
• It responsible for the rende bile applications.
ring of UI components. • In React JS, React is the base abstr
• It provides support for both action of React DOM for the web p
latform, while with React Native,
frontend and server-side.
React is still the base abstraction
• Remember, React.js is just the but of React Native.
V part of the MVC framework, • So the syntax and workflow remai
a library meant for rendering y n similar, but the components are
our views. different.
 Conclusion
• React is a framework for building applications using JavaScript.
• React Native is an entire platform allowing you to build native, cross-platform mobile apps, a
nd React.js is a JavaScript library you use for constructing a high performing UI layer.
• React.js is the heart of React Native, and it embodies all React’s principles and syntax, so
the learning curve is easy.
• The platform is what gave rise to their technical differences.
• Like the browser code in React is rendered through Virtual DOM while React Native uses Nati
ve API’s to render components on mobile.
• React uses HTML and with React Native, you need to familiarize yourself with React Native sy
ntax.
• React Native doesn’t use CSS either.
– This means you’ll have to use the animated API which comes with React Native to animate different co
mponents of your application.
• Bottom line, React is ideal for building dynamic, high performing, respo
nsive UI for your web interfaces, while React Native is meant to give your
mobile apps a truly native feel.

• https://searchsoftwarequality.techtarget.com/definition/native-application-native-app
Obstacles and Roadblocks
By learning react , you have opened a door to a different
way of thinking about and approaching web development
There are some learning obstacles that you’ll have to over
come to begin writing production code with React.
 React Is a Library
• First, the React library is small and it is only used for on
e part of the job.
• It doesn’t ship with all of the tools that you’d expect
from a traditional JavaScript framework.
• A lot of the decisions about which tools from the
ecosystem to use are left up to the developer.
• Also, new tools emerge all the time, and old ones are
cast aside.
• There are so many different library names continually
being added to the discussion that it may feel like it’s
impossible to keep up.
New ECMAScript Syntax
What is ECMA?
It is European Computer Manufacturers Association developed
the official standard for ECMAScript, often known as ECMA-262. 
– React has come of age in an important but chaotic time in
the history of JavaScript.
– The ECMA used to release specifications infrequently. It would
sometimes take up to10 years to release a spec.
– This meant that developers wouldn’t need to learn new syntax
very often.
– As of 2015, new language features and syntax additions will be
released every year.
– This replaces a numbered release system (ECMAScript3, ECMAScr
ipt 5) with a yearly one (ECMAScript 2016, ECMAScript 2017).
– As the language evolves, the early adopters in the React
community tend to use the new syntax.
– This often means that documentation assumes knowledge of the
latest ECMAScript syntax.
– If you are not familiar with the latest spec, looking at React code
can be daunting.
Popularity of Functional JavaScript
• Lot of momentum around functional JavaScript programming.
• JavaScript isn’t necessarily a functional language, but
functional techniques can be used in JavaScript code.
• React emphasizes functional programming over
object-oriented programming.
• This shift in thinking can lead to benefits in areas like testability and
performance.
• But when a lot of React materials assume an understanding of the
paradigm, it can be hard to learn so much at once.
JavaScript Tooling Fatigue
It’s a cliche at this point to talk about JavaScript Fatigue, but the
source of this fake illness can be traced back to the building process
In the past, you just added JavaScript files to your page.
Now the JavaScript file has to be built, usually with an automated
continuous delivery process.
There’s emerging syntax that has to be transpiled to work in all browsers.
There’s JSX that has to be converted to JavaScript.
There’s SCSS that you might want to preprocess. These components
need to be tested, and they have to pass.
You might love React, but now you also need to be a webpack expert, hand
ling code splitting, compression, testing, and on and on.
React’s Future
• React is still new.
• It has reached a place where core functionality is fairly stable
• Future versions of React will include Fiber, a reimplementation of
React’s core algorithm which is aimed at increasing rendering
speed.
• Many of these changes have to do with the devices that are bein
g targeted.
• It’s still early, but React VR, a framework for building interactive
virtual reality apps, has emerged as a way to design 360 degree
experiences using React and JavaScript.
• A command of the React library will set you up to rapidly
• develop experiences for a range of screen sizes and types.
This book covers techniques for developing single-
page web applications with React,
but we shouldn’t assume that web browsers are the
only place that React apps can run.
React Native, released in 2015, allows you to take the
benefits of React applications into iOS and Android
native apps.