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
ReactJS Awesomeness
Search
Swaroop SM
July 28, 2015
Programming
3
260
ReactJS Awesomeness
A quick introduction to ReactJS
Swaroop SM
July 28, 2015
Tweet
Share
More Decks by Swaroop SM
See All by Swaroop SM
Client-Side Data Modelling and more...
swaroopsm
0
59
Testing JavaScript like a "BOSS"
swaroopsm
0
60
The Truth About Truthy & Falsy
swaroopsm
1
56
Other Decks in Programming
See All in Programming
PicoRuby on Rails
makicamel
2
130
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
160
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
120
NPOでのDevinの活用
codeforeveryone
0
800
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
4
720
すべてのコンテキストを、 ユーザー価値に変える
applism118
3
1.2k
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
660
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
3
450
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
760
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
480
VS Code Update for GitHub Copilot
74th
2
630
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
75
24k
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
4 Signs Your Business is Dying
shpigford
184
22k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Unsuck your backbone
ammeep
671
58k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Become a Pro
speakerdeck
PRO
28
5.4k
Typedesign – Prime Four
hannesfritz
42
2.7k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Transcript
ReactJS Awesomeness
I don’t want to learn another JS framework.
Well what is it then?
• Born at Facebook. • Lets you build user interfaces.
• Described as the V in MVC. • Building large applications with data that changes over time. • Actively maintained. • https://github.com/facebook/react
I AM NOT CONVINCED
TIME TO GET SERIOUS
What it does not have? • No Router. • No
Controllers. • No Models. • No Templates.
What does it have then? • Components • And Components
• …. And Components
Separation of Concerns • Controller • Remove an item. •
Compl
Separate the Components
Component-Wise Separation • Composable • Reusable • Maintainable • Testable
STILL NO “REACTION?”
React Stuffs • Component • JSX • props • state
• refs • Virtual DOM • Server-Side Rendering
Component • Elements in view. Eg.: Button Widget, Shopping Cart
Widget etc. • `React.createClass({ })` • Must override the render method
None
JSX • A JS syntax extension that looks like XML
• Can be transformed into JS using React
None
props • Immutable • Attributes to a component. • Accessible
through `this.props`
None
state • Mutable • Set using `setState` • Access via
`this.state` • Triggers a render automatically when a state changes
None
refs • Lets you access references to individual components •
Manipulate the DOM • Use `this.refs`
None
Virtual DOM • Virtual Representation of DOM • Can keep
track of what has changes in the DOM • Render only the changed parts based on a diffing algorithm • VERY FAST!!!
Server-Side Rendering • Construct React components as an HTML on
the server-side and render it. • SEO for Free :)
Integrating with Rails • https://github.com/reactjs/react-rails • react_component(<Button />, props={}, html_options={})
#jally Thank You