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
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
Prathamesh Sonpatki
October 13, 2016
0
150
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
100
The Complete Handbook to OpenTelemetry Metrics
prathamesh
1
71
Breaking down the Pillars of Observability: From data to outcomes
prathamesh
0
93
Monitoring vs. Debugging
prathamesh
0
160
Handling High Cardinality in Observability
prathamesh
1
100
Setting up Monitoring for Kubernetes
prathamesh
0
300
Monitoring vs. Debugging - SRE BLR Meetup
prathamesh
0
90
Monitoring vs. Debugging - IG Meetup 22nd July
prathamesh
2
110
Pune_User_Group.pdf
prathamesh
0
110
Featured
See All Featured
Conquering PDFs: document understanding beyond plain text
inesmontani
PRO
4
2.5k
Practical Orchestrator
shlominoach
191
11k
Thoughts on Productivity
jonyablonski
75
5.1k
Leo the Paperboy
mayatellez
4
1.5k
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
62
51k
Being A Developer After 40
akosma
91
590k
Collaborative Software Design: How to facilitate domain modelling decisions
baasie
0
160
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
helenjbeal
1
140
Ecommerce SEO: The Keys for Success Now & Beyond - #SERPConf2024
aleyda
1
1.8k
Stop Working from a Prison Cell
hatefulcrawdad
274
21k
Redefining SEO in the New Era of Traffic Generation
szymonslowik
1
240
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
60
42k
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