SlideShare a Scribd company logo
React 
and why it’s awesome 
Andrew Hull 
@aghull 
normative.com
React First Impressions
React First Impressions
React First Impressions 
WTF?!
“Reaction” to React
“Reaction” to React 
“Ugly.”
“Reaction” to React 
“Ugly.” 
“Separation of concerns!!”
“Reaction” to React 
“Ugly.” 
“Separation of concerns!!” 
“React is a templating language.”
“Reaction” to React
“Reaction” to React 
‱ Don’t sweat it
“Reaction” to React 
‱ Don’t sweat it 
‱ JSX
“Reaction” to React 
‱ Don’t sweat it 
‱ JSX 
‱ It’s actually just Javascript
“Reaction” to React 
‱ Don’t sweat it 
‱ JSX 
‱ It’s actually just Javascript 
‱ It’s not a templating language
“Reaction” to React 
‱ Don’t sweat it 
‱ JSX 
‱ It’s actually just Javascript 
‱ It’s not a templating language 
‱ If you don’t like it, you don’t hafta
React Second Impressions
React Second Impressions 
‱ Oh! There’s 2-way data-binding, like Angular!
React Second Impressions 
‱ Oh! There’s 2-way data-binding, like Angular! 
‱ Oh! It can work with Backbone. How I do?
React Second Impressions 
‱ Oh! There’s 2-way data-binding, like Angular! 
‱ Oh! It can work with Backbone. How I do? 
‱ Oh! It can do animations and SVG!
React Second Impressions 
‱ Oh! There’s 2-way data-binding, like Angular! 
‱ Oh! It can work with Backbone. How I do? 
‱ Oh! It can do animations and SVG! 
Wait. Let’s back up.
Some 
Fundamentals
#1 
Everything is a Component
React has no

React has no
 

 controllers
React has no
 

 controllers 

 directives
React has no
 

 controllers 

 directives 

 templates
React has no
 

 controllers 

 directives 

 templates 

 global event listeners
React has no
 

 controllers 

 directives 

 templates 

 global event listeners 

 models
React has no
 

 controllers 

 directives 

 templates 

 global event listeners 

 models 

 no view models
React has no
 

 controllers 

 directives 

 templates 

 global event listeners 

 models 

 no view models 
Just
React has no
 

 controllers 

 directives 

 templates 

 global event listeners 

 models 

 no view models 
Just Components
React JS and why it's awesome
React JS and why it's awesome
React JS and why it's awesome
React JS and why it's awesome
“Separation of concerns!!”
“Se“pDaora ytoioun e ovef nc oMnVcCer?n”s!!”
What if we “separate” another way?
What if we “separate” another way? 
CartComponent
What if we “separate” another way? 
CartComponent 
CartListComponent
What if we “separate” another way? 
CartComponent 
CartListComponent 
CartItemComponent
What if we “separate” another way? 
CartComponent 
CartListComponent 
CartItemComponent 
ButtonComponent
Separation of 
Concerns Components
Separation of 
Concerns Components 
‱composable
Separation of 
Concerns Components 
‱composable 
‱reusable
Separation of 
Concerns Components 
‱composable 
‱reusable 
‱maintainable
Separation of 
Concerns Components 
‱composable 
‱reusable 
‱maintainable 
‱testable
Separation of 
Concerns Components 
‱composable 
‱reusable 
‱maintainable 
‱testable 
*If* Components are truly 
self-contained
#2 
Single Source of Truth
Traditional data flows
Traditional data flows 
No framework: Any component can 
communicate with any other component
Traditional data flows 
No framework: Any component can 
communicate with any other component 
Backbone: Pub-sub 
item.on('change:name', function() {

Traditional data flows 
No framework: Any component can 
communicate with any other component 
Backbone: Pub-sub 
item.on('change:name', function() {
 
Angular: 2-way data binding and $digest loop 
$scope.name = 

Traditional data flows 
No framework: Any component can 
communicate with any other component 
Backbone: Pub-sub 
item.on('change:name', function() {
 
Angular: 2-way data binding and $digest loop 
$scope.name = 
 
React: 1-way data flow
Data handed from parent to child 
check. 
props.
Props accessed on this.props
Props accessed on this.props 
props.
Props accessed on this.props 
props.
Props accessed on this.props 
props. 
props.
Props accessed on this.props 
props. 
props.
Props are immutable
Props are immutable 
props.
Props are immutable 
props.
Props are immutable 
props. 
Don’t touch 
my stuff!
State is mutable 
props.
State is mutable 
props.
State is mutable 
props.
State is mutable 
props. 
Whatever you 
say, dude.
State can become props
State can become props 
props.
State can become props 
props.
State can become props 
props. 
props.
State can become props 
props. 
props.
Data only flows one way
Data only flows one way 
Sure, sounds good

Data only flows one way 
Sure, sounds good
 
(5 minutes later) Wait!
Data only flows one way 
Sure, sounds good
 
(5 minutes later) Wait! 
That’s not how the real world works!
Data flows up? 
CartComponent 
CartListComponent 
CartItemComponent 
<input>
Data flows down with handlers 
CartComponent! 
! 
<CartListComponent! 
list={this.state.list}! 
onChange={this.handleChange}/>
Data flows down with handlers 
CartComponent! 
! 
<CartListComponent! 
list={this.state.list}! 
onChange={this.handleChange}/> 
CartListComponent! 
! 
this.props.list.map(function(item) {! 
<CartItemComponent item={item}! 
onChange={this.props.onChange}/>! 
})
Data flows down with handlers 
CartComponent! 
! 
<CartListComponent! 
list={this.state.list}! 
onChange={this.handleChange}/> 
CartListComponent! 
! 
this.props.list.map(function(item) {! 
<CartItemComponent item={item}! 
onChange={this.props.onChange}/>! 
}) 
CartItemComponent! 
! 
changeQty: function() {! 

 does stuff! 
this.props.onChange();! 
}!
Data flows down with handlers 
CartComponent! 
! 
<CartListComponent! 
list={this.state.list}! 
onChange={this.handleChange}/> 
CartListComponent! 
! 
this.props.list.map(function(item) {! 
<CartItemComponent item={item}! 
onChange={this.props.onChange}/>! 
}) 
CartItemComponent! 
! 
changeQty: function() {! 

 does stuff! 
this.props.onChange();! 
}! 
<input value={this.props.item.qty} onChange={this.changeQty}>
Data flows down with handlers 
CartComponent! 
! 
<CartListComponent! 
list={this.state.list}! 
onChange={this.handleChange}/> 
CartListComponent! 
! 
this.props.list.map(function(item) {! 
<CartItemComponent item={item}! 
onChange={this.props.onChange}/>! 
}) 
CartItemComponent! 
! 
changeQty: function() {! 

 does stuff! 
this.props.onChange();! 
}! 
<input value={this.props.item.qty} onChange={this.changeQty}>
Data flows down with handlers 
CartComponent! 
! 
<CartListComponent! 
list={this.state.list}! 
onChange={this.handleChange}/> 
CartListComponent! 
! 
this.props.list.map(function(item) {! 
<CartItemComponent item={item}! 
onChange={this.props.onChange}/>! 
}) 
CartItemComponent! 
! 
changeQty: function() {! 

 does stuff! 
this.props.onChange();! 
}! 
<input value={this.props.item.qty} onChange={this.changeQty}>
Data flows down with handlers 
CartComponent! 
! 
<CartListComponent! 
list={this.state.list}! 
onChange={this.handleChange}/> 
CartListComponent! 
! 
this.props.list.map(function(item) {! 
<CartItemComponent item={item}! 
onChange={this.props.onChange}/>! 
}) 
CartItemComponent! 
! 
changeQty: function() {! 

 does stuff! 
this.props.onChange();! 
}! 
<input value={this.props.item.qty} onChange={this.changeQty}>
Data flows down with handlers 
CartComponent! 
! 
<CartListComponent! 
list={this.state.list}! 
onChange={this.handleChange}/> 
CartListComponent! 
! 
this.props.list.map(function(item) {! 
<CartItemComponent item={item}! 
onChange={this.props.onChange}/>! 
}) 
CartItemComponent! 
! 
changeQty: function() {! 

 does stuff! 
this.props.onChange();! 
}! 
<input value={this.props.item.qty} onChange={this.changeQty}>
Events flow up, data flows down
Events flow up, data flows down 
Does this sound familiar?
Events flow up, data flows down 
Does this sound familiar? 
Just like the DOM.
#3 
Virtual DOM
What’s worse than having state 
in two places at once?
What’s worse than having state 
in two places at once? 
Having state in the DOM.
Touching the DOM is evil
Touching the DOM is evil 
‱ It’s inconsistent
Touching the DOM is evil 
‱ It’s inconsistent 
‱ It’s hard to test
Touching the DOM is evil 
‱ It’s inconsistent 
‱ It’s hard to test 
‱ It’s brittle
Touching the DOM is evil 
‱ It’s inconsistent 
‱ It’s hard to test 
‱ It’s brittle 
‱ It’s EXPENSIVE!
Back to JSX
JSX Compiled
It’s just Javascript
It’s just Javascript
Why learn yet another 
template language?
What’s actually happening 
in render() ?
What’s actually happening 
in render() ? 
What does p() return?
What’s actually happening 
in render() ? 
What does p() return? 
When do I call render()
Virtual DOM
Virtual DOM 
‱ It’s a pure Javascript, in-memory 
representation of the DOM
Virtual DOM 
‱ It’s a pure Javascript, in-memory 
representation of the DOM 
‱ render() fires whenever something 
changes
Virtual DOM 
‱ It’s a pure Javascript, in-memory 
representation of the DOM 
‱ render() fires whenever something 
changes 
‱ React modifies the real DOM to match
Virtual DOM 
‱ It’s a pure Javascript, in-memory 
representation of the DOM 
‱ render() fires whenever something 
changes 
‱ React modifies the real DOM to match 
‱ It’s FAST
Virtual DOM 
‱ It’s a pure Javascript, in-memory 
representation of the DOM 
‱ render() fires whenever something 
changes 
‱ React modifies the real DOM to match 
‱ It’s FAST 
‱ It’s pure
Virtual DOM 
‱ It’s a pure Javascript, in-memory 
representation of the DOM 
‱ render() fires whenever something 
changes 
‱ React modifies the real DOM to match 
‱ It’s FAST 
‱ It’s pure 
‱ It just works

 Except when it doesn’t

 Except when it doesn’t 
How do I access the actual DOM?

 Except when it doesn’t 
How do I access the actual DOM? 
How do I know when render() is done?

 Except when it doesn’t 
How do I access the actual DOM? 
How do I know when render() is done?

 Except when it doesn’t 
How do I access the actual DOM? 
How do I know when render() is done? 
Lifecycle Method

 Except when it doesn’t 
How do I access the actual DOM? 
How do I know when render() is done? 
Lifecycle Method 
Actual DOM Node
Yay! Declarative Templates!
Declarative Templates suck!
Declarative Templates suck! 
wut.
Declarative Templates suck! 
wut.
Declarative Templates suck! 
wut. 
Sounds legit!
Why all this is awesome
Why all this is awesome 
‱ One-way data flow keeps complexity 
under control
Why all this is awesome 
‱ One-way data flow keeps complexity 
under control 
‱ Easy to debug self-contained 
components
Why all this is awesome 
‱ One-way data flow keeps complexity 
under control 
‱ Easy to debug self-contained 
components 
‱ Library doesn’t dictate too much
Why all this is awesome 
‱ One-way data flow keeps complexity 
under control 
‱ Easy to debug self-contained 
components 
‱ Library doesn’t dictate too much 
‱ Ridiculous potential
A small demo 
http://www.emergent.info/iphone-hairgate
Where to go from here?
Where to go from here? 
Official React docs 
http://facebook.github.io/react/
Where to go from here? 
Official React docs 
http://facebook.github.io/react/ 
TodoMVC 
git@github.com:tastejs/todomvc.git
Thank You

More Related Content

PDF
An Introduction to ReactJS
PPTX
reactJS
PDF
React js
PPTX
A Brief Introduction to React.js
PPTX
React js - The Core Concepts
PPTX
React workshop
PPTX
Introduction to React JS for beginners
PDF
An introduction to React.js
An Introduction to ReactJS
reactJS
React js
A Brief Introduction to React.js
React js - The Core Concepts
React workshop
Introduction to React JS for beginners
An introduction to React.js

What's hot (20)

PDF
WEB DEVELOPMENT USING REACT JS
ODP
Introduction to ReactJS
PDF
React JS - Introduction
PPTX
Intro to React
PPTX
React JS - A quick introduction tutorial
PPTX
Its time to React.js
PPTX
React workshop presentation
PPTX
Introduction to react_js
PDF
JavaScript Programming
PPTX
React js
PPTX
React state
 
PPTX
Introduction to React JS
PPTX
React Hooks
PPTX
[Final] ReactJS presentation
PPTX
Intro to React
PPTX
React + Redux Introduction
PPTX
React js programming concept
PPTX
Reactjs
PPTX
React js
WEB DEVELOPMENT USING REACT JS
Introduction to ReactJS
React JS - Introduction
Intro to React
React JS - A quick introduction tutorial
Its time to React.js
React workshop presentation
Introduction to react_js
JavaScript Programming
React js
React state
 
Introduction to React JS
React Hooks
[Final] ReactJS presentation
Intro to React
React + Redux Introduction
React js programming concept
Reactjs
React js
Ad

Viewers also liked (9)

PPTX
React in Native Apps - Meetup React - 20150409
PPTX
Rethinking Best Practices
PPTX
NDC14 - Rx와 Functional Reactive ProgrammingìœŒëĄœ êł ì„±ëŠ„ 서ëȄ 만듀Ʞ
PDF
Cascadia.js: Don't Cross the Streams
PPTX
Functional Reactive Programming with RxJS
PDF
[1B4]á„‹á…Ąá†«á„ƒá…łá„…á…©á„‹á…”á„ƒá…ł 도ᆌᄉᅔᄉᅄᆌ_á„‘á…łá„…á…©á„€á…łá„…á…ąá„†á…”á†Œ
PDF
Functional Reactive Programming With RxSwift
PPTX
RxJS and Reactive Programming - Modern Web UI - May 2015
PDF
서ëȄ 개발자가 바띌 ëłž Functional Reactive Programming with RxJava - SpringCamp2015
React in Native Apps - Meetup React - 20150409
Rethinking Best Practices
NDC14 - Rx와 Functional Reactive ProgrammingìœŒëĄœ êł ì„±ëŠ„ 서ëȄ 만듀Ʞ
Cascadia.js: Don't Cross the Streams
Functional Reactive Programming with RxJS
[1B4]á„‹á…Ąá†«á„ƒá…łá„…á…©á„‹á…”á„ƒá…ł 도ᆌᄉᅔᄉᅄᆌ_á„‘á…łá„…á…©á„€á…łá„…á…ąá„†á…”á†Œ
Functional Reactive Programming With RxSwift
RxJS and Reactive Programming - Modern Web UI - May 2015
서ëȄ 개발자가 바띌 ëłž Functional Reactive Programming with RxJava - SpringCamp2015
Ad

Similar to React JS and why it's awesome (20)

PPTX
The disaster of mutable state
 
KEY
NinjaScript 2010-10-14
KEY
NinjaScript and Mizugumo 2011-02-05
PDF
Rethink Async with RXJS
PDF
Rethink Async With RXJS
PDF
Rethink Async with RXJS
PDF
React Internals - Batching Write Operations by tree Traversal
PDF
Moved to https://slidr.io/azzazzel/web-application-performance-tuning-beyond-xmx
PDF
On Inherent Complexity of Computation, by Attila Szegedi
PDF
#FrontConf2017 — Enhance your User (and Developer) Experience with React & Redux
 
PDF
The Dom Scripting Toolkit J Query
KEY
JavaScript: You Like It, It Likes You
PDF
Why Agile Works But Isn't Working For You
PDF
Evan Schultz - Angular Summit - 2016
PDF
Tour of language landscape (katsconf)
PDF
Cesar Valiente "Unidirectional architecture on Android with Kotlin"
PDF
Javascript leverage: Isomorphic Applications by Luciano Colosio at Codemotion...
PDF
Back to the future: Isomorphic javascript applications
PDF
The Duck tales
PDF
Mattia Manzati - Real-World MobX Project Architecture - Codemotion Rome 2019
The disaster of mutable state
 
NinjaScript 2010-10-14
NinjaScript and Mizugumo 2011-02-05
Rethink Async with RXJS
Rethink Async With RXJS
Rethink Async with RXJS
React Internals - Batching Write Operations by tree Traversal
Moved to https://slidr.io/azzazzel/web-application-performance-tuning-beyond-xmx
On Inherent Complexity of Computation, by Attila Szegedi
#FrontConf2017 — Enhance your User (and Developer) Experience with React & Redux
 
The Dom Scripting Toolkit J Query
JavaScript: You Like It, It Likes You
Why Agile Works But Isn't Working For You
Evan Schultz - Angular Summit - 2016
Tour of language landscape (katsconf)
Cesar Valiente "Unidirectional architecture on Android with Kotlin"
Javascript leverage: Isomorphic Applications by Luciano Colosio at Codemotion...
Back to the future: Isomorphic javascript applications
The Duck tales
Mattia Manzati - Real-World MobX Project Architecture - Codemotion Rome 2019

Recently uploaded (20)

PDF
Flood Susceptibility Mapping Using Image-Based 2D-CNN Deep Learnin. Overview ...
PPTX
Introduction to Artificial Intelligence
PDF
How to Choose the Right IT Partner for Your Business in Malaysia
PDF
Adobe Illustrator 28.6 Crack My Vision of Vector Design
PPTX
Essential Infomation Tech presentation.pptx
PDF
Which alternative to Crystal Reports is best for small or large businesses.pdf
PPTX
Agentic AI : A Practical Guide. Undersating, Implementing and Scaling Autono...
PDF
medical staffing services at VALiNTRY
PDF
System and Network Administration Chapter 2
PDF
Wondershare Filmora 15 Crack With Activation Key [2025
PPTX
Online Work Permit System for Fast Permit Processing
PPTX
history of c programming in notes for students .pptx
PPTX
ISO 45001 Occupational Health and Safety Management System
PDF
top salesforce developer skills in 2025.pdf
PDF
Design an Analysis of Algorithms II-SECS-1021-03
DOCX
The Five Best AI Cover Tools in 2025.docx
PPTX
Oracle E-Business Suite: A Comprehensive Guide for Modern Enterprises
PDF
How to Migrate SBCGlobal Email to Yahoo Easily
PPTX
VVF-Customer-Presentation2025-Ver1.9.pptx
PDF
Addressing The Cult of Project Management Tools-Why Disconnected Work is Hold...
Flood Susceptibility Mapping Using Image-Based 2D-CNN Deep Learnin. Overview ...
Introduction to Artificial Intelligence
How to Choose the Right IT Partner for Your Business in Malaysia
Adobe Illustrator 28.6 Crack My Vision of Vector Design
Essential Infomation Tech presentation.pptx
Which alternative to Crystal Reports is best for small or large businesses.pdf
Agentic AI : A Practical Guide. Undersating, Implementing and Scaling Autono...
medical staffing services at VALiNTRY
System and Network Administration Chapter 2
Wondershare Filmora 15 Crack With Activation Key [2025
Online Work Permit System for Fast Permit Processing
history of c programming in notes for students .pptx
ISO 45001 Occupational Health and Safety Management System
top salesforce developer skills in 2025.pdf
Design an Analysis of Algorithms II-SECS-1021-03
The Five Best AI Cover Tools in 2025.docx
Oracle E-Business Suite: A Comprehensive Guide for Modern Enterprises
How to Migrate SBCGlobal Email to Yahoo Easily
VVF-Customer-Presentation2025-Ver1.9.pptx
Addressing The Cult of Project Management Tools-Why Disconnected Work is Hold...

React JS and why it's awesome