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
170
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
React on Rails workshop at Conferencia.ROR
Prathamesh Sonpatki
October 13, 2016
More Decks by Prathamesh Sonpatki
See All by Prathamesh Sonpatki
Secrets to Monitor Kubernetes Workloads
prathamesh
1
120
The Complete Handbook to OpenTelemetry Metrics
prathamesh
1
94
Breaking down the Pillars of Observability: From data to outcomes
prathamesh
0
110
Monitoring vs. Debugging
prathamesh
0
190
Handling High Cardinality in Observability
prathamesh
1
120
Setting up Monitoring for Kubernetes
prathamesh
0
310
Monitoring vs. Debugging - SRE BLR Meetup
prathamesh
0
110
Monitoring vs. Debugging - IG Meetup 22nd July
prathamesh
2
130
Pune_User_Group.pdf
prathamesh
0
120
Featured
See All Featured
A Soul's Torment
seathinner
6
3.1k
The Director’s Chair: Orchestrating AI for Truly Effective Learning
tmiket
1
230
<Decoding/> the Language of Devs - We Love SEO 2024
nikkihalliwell
1
280
How to build an LLM SEO readiness audit: a practical framework
nmsamuel
1
820
Build your cross-platform service in a week with App Engine
jlugia
234
18k
The Art of Programming - Codeland 2020
erikaheidi
57
14k
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
madoxten
64
56k
Navigating Team Friction
lara
192
16k
Bash Introduction
62gerente
615
220k
Build The Right Thing And Hit Your Dates
maggiecrowley
39
3.4k
Writing Fast Ruby
sferik
630
63k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.8k
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