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
React on Rails workshop at Conferencia.ROR
Search
Prathamesh Sonpatki
October 13, 2016
0
140
React on Rails workshop at Conferencia.ROR
Prathamesh Sonpatki
October 13, 2016
Tweet
Share
More Decks by Prathamesh Sonpatki
See All by Prathamesh Sonpatki
Secrets to Monitor Kubernetes Workloads
prathamesh
1
91
The Complete Handbook to OpenTelemetry Metrics
prathamesh
1
65
Breaking down the Pillars of Observability: From data to outcomes
prathamesh
0
66
Monitoring vs. Debugging
prathamesh
0
140
Handling High Cardinality in Observability
prathamesh
1
95
Setting up Monitoring for Kubernetes
prathamesh
0
290
Monitoring vs. Debugging - SRE BLR Meetup
prathamesh
0
83
Monitoring vs. Debugging - IG Meetup 22nd July
prathamesh
2
100
Pune_User_Group.pdf
prathamesh
0
100
Featured
See All Featured
What's in a price? How to price your products and services
michaelherold
246
12k
Done Done
chrislema
186
16k
KATA
mclloyd
PRO
32
15k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.2k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
Optimising Largest Contentful Paint
csswizardry
37
3.5k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.5k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
33
1.8k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
The Power of CSS Pseudo Elements
geoffreycrofte
80
6k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
Transcript
React on Rails workshop Prathamesh Sonpatki @_cha1tanya
None
Agenda
Why React?
Build UI
V in MVC
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
Components
None
<TweetCounts tweets=“3062” following=“509”/> <Tweets tweets={[..]}/> <Trends location=“pune" list={[..]} />
Reusable
None
Composable
None
Separation of concerns
No templates
React === JavaScript #=> true
Managing Data
Data changing over time is root of evil Pete Hunt
Props
One way data flow
State
Responding to state changes
Refresh
Re-Rendering the component
Re-Rendering the component tree
Re-Rendering
Isn’t it too slow?
Virtual DOM
Diff
Minimal set of changes
Nothing is new!
Let’s begin!
React❤Rails
react-rails + CDN packages
react_on_rails https://github.com/shakacode/ react_on_rails
sprockets_comm oner https://github.com/Shopify/sprockets- commoner
Thanks! @_cha1tanya @BigBinary http://blog.bigbinary.com http://videos.bigbinary.com https://github.com/prathamesh-sonpatki/react-rails-examples