Speaker: Jyoti Puri In this webinar, we take a look at React JS and how it’s more than a simple JS library. The speaker takes us through the fundamentals of react, and sheds some light on how it solves the challenges faced in current web application development. The session covers the React philosophy, components, virtual DOMs in React, reliability improvements and a lot more. Stay tuned for the live Q/A at the end, which also clarifies a lot of issues regarding parent and child components, rendering, and the various use cases, advantages and limitations of React.

1. The Fundamentals of ReactJS
A library for building user interfaces
Jyoti Puri
@jyo_pur

2. Challenging the established
best practices
@srijan #SrijanWW

3. Modern web application are
complex
Developing and maintaining
them is hard hard hard…
@srijan #SrijanWW

4. Traditional MV* Frameworks
@srijan #SrijanWW
Model
(Data)
Controller
(Manages data
flow, logic)
View
(Mutable
Templates - HTML
+ Extensions)
- 3 tier architecture
- criss-cross data flow
- data bindings
Follow best
practices

5. @srijan #SrijanWW
My UI is
not
reliable
Give me
something
simplified
I want
something
predictabl
e

6. @srijan #SrijanWW
A LIBRARY FOR BUILDING USER INTERFACES
Is it yet another MVC framework ?
NO
React challenges the best practices
established by MV* frameworks

7. @srijan #SrijanWW
Functional Approach to UI rendering
Unidirectional Data Flow
Do not mutate - re render
An Abstraction of Immutable Virtual DOM

8. @srijan #SrijanWW
Components and not templates
React Components are Functions whose
output is DOM state
Components are not just widgets - they
reflect actual application structure

9. @srijan #SrijanWW
DATA
(as
props)
Compone
nt
Definitio
n
DOM
EVENTS
(as
state)
Combine
DOM
rendering
with display
logic
State
Machine
s

10. @srijan #SrijanWW
…
https://jsfiddle.net/reactjs/69z2wepo/

11. @srijan #SrijanWW
JSX = JS + XML
Its a convenience for writing markup in JS.
React has a JSX -> JS pre-compiler.
JSX is not
HTML
is safe from
XSS issues
https://jsfiddle.net/reactjs/5vjqabv3/

12. @srijan #SrijanWW
…
https://jsfiddle.net/69z2wepo/50585/

13. @srijan #SrijanWW
…
https://jsfiddle.net/69z2wepo/50586/

14. @srijan #SrijanWW
- React components can be composed within other
React components
- Composable elements are tested reliable pieces
- Comparability isolates complexity

15. @srijan #SrijanWW
State of inputs
is managed by browser.
But
React provides support for controlled
components in which case the state of
input components in the DOM is
controlled by component state.
…

16. @srijan #SrijanWW
React provides synthetic event
handling and bubbling with optimized
memory footprints.
It complies with W3C
recommendations.

17. @srijan #SrijanWW
- react attaches synthetic events to components
- they are camelCased
- for instance onChange of input below
…

18. @srijan #SrijanWW
…
https://jsfiddle.net/69z2wepo/50588/

19. @srijan #SrijanWW
Unidirectional Data Flow

20. @srijan #SrijanWW
How does it
performs
Mutation
comes with
complexity
Describe how
your view looks
like, do not
worry to update
it !

21. @srijan #SrijanWW
DOM - Document Object Model
Its way of representing structured documents via
objects.
DOM was never designed and optimized for Dynamic UI
Virtual DOM is a layer of abstraction over actual DOM
Its much faster
Virtual DOM magic works with:
- batching updates
- minimal diff

22. @srijan #SrijanWW

23. @srijan #SrijanWW
In 3 Years

24. Jyoti Puri
@jyo_pur
Thank You!
Take this conversation online by tweeting using the hashtag #SrijanWW