2. What is React?
•“React is a JavaScript library for creating User Interfaces, open sourced to the world by
Facebook and Instagram team in 2013 ”
• Main goal of React is to make development of UI components easy and modular. It is
intended to ease the process of building large applications using data that changes over
time
• As of January 2015, React and React Native are Facebook’s top two open-source
projects by number of stars on GitHub and 9th most starred project of all time on GitHub is
React.
3. Using React
• In the previous SPA example,
• Basically a set elements are rendering on click of any link on the app – React groups these elements as
• Component
• As the data changes in app, DOM has to be updated – React handles data very quickly and efficiently
using
• VirtualDOM
• Whenever the data changes, React will take care of updating only the changed parts ‐ Declarative
• It would be easy to debug if the data flows in a single direction – React implements Unidirectional data
flow
4. Here's why React is great choice to start with…
1) Components:
• In the previous SPA example, a unit of code is rendering on click of any link.
• When building Rich web applications, probably we need to reuse few set of elements, templates and set of
specification and also code should be structured properly that would help us for the enhancement.
• Capability of creating own component is one of the major productivity boost as it gives lot of flexibility to define
and manipulate the component
• Components once created can be combined, nested and reused across a SPA
• React.js takes the concept of components from Shadow DOM and Polymer JS
• Components are the future of web development ‐ fundamental unit of an application and enable developers to
create web applications as a set of reusable components
5. Here's why React is great choice to start with…
2) React is a great performer
• As we all know, DOM manipulation is expensive and this results in poor performance
• How do we optimize it?
• Updating DOM directly should be avoided
• Here React, rather than updating DOM directly, build an abstract version of it
• React does all the computations in its abstracted DOM and updates the DOM tree accordingly in a very
efficient manner
6. Here's why React is great choice to start with…
3) Awesome for SEO
• JavaScript frameworks are not SE friendly since search engines have trouble
reading in JavaScript heavy application
• As SPAs rely on JavaScript execution, servers don’t produce all the HTML content
• React resolves this issue as we can run React on server
• No need of Phantom JS and no other modifications are required in the code to
run on server side
7. Here's why React is great choice to start with…
4) It makes writing JavaScript easier
• React Components and Elements can be written in a special syntax called
JSX
• This technique is a replacement of writing pure JavaScript code and
hence enhances the productivity
•JSX needs less effort to read and write and is transformed into JavaScript
before running in the browser.
8. Features of React
• Components
• Virtual DOM
• Declarative
• Unidirectional data flow
• Isomorphic friendly
• JSX
9. Virtual DOM
• Virtual DOM is an abstraction of DOM
Actual DOM updated
APP
Change event
triggered
Updating changes
Virtual DOM
Previous v-tree
New v-tree
Change detected
10. Virtual DOM
• Virtual DOM is designed for provide a declarative way of representing the DOM for our application, which supports
diff computation, element creation and patch operations for efficient re rendering
• For every changes in the app, it simply creates a new virtual tree, based on the difference between the previous V
- tree and current V - tree it allows us to make the DOM look exactly as described in the new tree.
• Virtual DOM will figure out how to make updates to the DOM efficiently without recreating all of the DOM nodes
• Virtual DOM enhances performance and efficiency by minimizing expensive updates to the DOM
• Hence React is said to be a great performer because it manages a Virtual DOM
11. Isomorphic rendering
• Code written in JavaScript which can run on both server and client side
Client Side
Server Side
Reactcomponent API
12. Isomorphic rendering
• This allows us to render React component on both client and server
• The ability to run the same JavaScript code on both the client and the server,
fast initial page load from the server and a great experience on the client
Benefits:
Performance
SEO
Code
maintenance
13. React is Declarative
• When the data changes, our application doesn’t need to know how to update the elements in the DOM and we
don’t require to write any imperative code to update the changes
• We simply declare how a component should look and React does the updates in the DOM
14. Unidirectional data flow
• React implements unidirectional data flow and makes application easier by handling all data flow in a single
direction
• The reason behind this is because components are supposed to be immutable and data within them are
unable to change. They will only listen to data which is flowing from upstream and not the data which is coming
from each other
• Here, flux helps in keeping data unidirectional
• This makes React a best framework, for creating highly interactive web applications
