Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
sip-of-reactjs
Search
Prathamesh Sonpatki
July 25, 2015
2
880
sip-of-reactjs
Check bit.ly/sip-of-reactjs
Prathamesh Sonpatki
July 25, 2015
Tweet
Share
More Decks by Prathamesh Sonpatki
See All by Prathamesh Sonpatki
Secrets to Monitor Kubernetes Workloads
prathamesh
1
90
The Complete Handbook to OpenTelemetry Metrics
prathamesh
1
64
Breaking down the Pillars of Observability: From data to outcomes
prathamesh
0
62
Monitoring vs. Debugging
prathamesh
0
140
Handling High Cardinality in Observability
prathamesh
1
92
Setting up Monitoring for Kubernetes
prathamesh
0
290
Monitoring vs. Debugging - SRE BLR Meetup
prathamesh
0
82
Monitoring vs. Debugging - IG Meetup 22nd July
prathamesh
2
100
Pune_User_Group.pdf
prathamesh
0
100
Featured
See All Featured
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Building a Scalable Design System with Sketch
lauravandoore
463
33k
The Pragmatic Product Professional
lauravandoore
36
6.9k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
45
2.5k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
4 Signs Your Business is Dying
shpigford
185
22k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Mobile First: as difficult as doing things right
swwweet
224
10k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
Transcript
Sip of React.JS Prathamesh Sonpatki @_cha1tanya
None
Agenda http://bit.ly/sip-of-reactjs
Open Library Search Project
React
Build UI
V in MVC
Simple
Declarative
if encodingCompleted removeLoader(); updateHeaderText(‘Encoding completed.’) else showLoader();
if encodingCompleted removeLoader(); updateHeaderText(‘Encoding completed.’) else showLoader(); if encodingCompleted <header>Encoding
Completed</header> else <div>Loading…</div>
Unconventional ideas
Hello World
"The secret to building large apps is never build large
apps. Break your applications into small pieces. Then, assemble those testable, bite-sized pieces into your big application" Justin Meyer, author of CanJS
Components
Component is fn()
Reusable
Composable
Separation of concerns
Let’s look closely
ಠ_ಠ
JSX
None
JSX is like a healthy vegetable that tastes like decadent
chocolate cake. You feel guilty, but it’s good. Eric Elliot
Give it 5 minutes https://signalvnoise.com/posts/3124- give-it-five-minutes
One book at a time
No templates
Any sufficiently complicated templating language contains an ad hoc, informally-specified,
bug-ridden, slow implementation of a turing complete programming language. - Jasim A Basheer
List of books
React === JavaScript #=> true
Managing Data
Data changing over time is root of evil Pete Hunt
Props
Immutable
One way data flow
Parent to Child
Child to Parent ????
propTypes
State
State is internal
getInitialState()
Responding to state changes
setState()
Refresh
Re-Rendering the component
Re-Rendering the component tree
Will it be too slow?
Virtual DOM
Diff
Minimal set of changes
Batch updates
Nothing is new!
Component Lifecycle hooks
componentWillMount componentDidMount componentWillReceiveProps componentWillUnmount componentDidUnmount
Some patterns
Avoid state as much as possible
props > state
Dumb components
Learning Curve
Just JavaScript
Just JavaScript & JSX
Just JavaScript
Easy to sneak into existing projects
Let me know your experience!
Thanks! @_cha1tanya @BigBinary