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
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Mobile First: as difficult as doing things right
swwweet
224
10k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Done Done
chrislema
185
16k
Build your cross-platform service in a week with App Engine
jlugia
232
18k
Navigating Team Friction
lara
190
15k
A Tale of Four Properties
chriscoyier
161
23k
A better future with KSS
kneath
239
18k
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