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
61
The Truth About Truthy & Falsy
swaroopsm
1
56
Other Decks in Programming
See All in Programming
コンテキストエンジニアリング Cursor編
kinopeee
1
750
KessokuでDIでもgoroutineを活用する / Go Connect #6
mazrean
0
140
Introducing ReActionView: A new ActionView-compatible ERB Engine @ Rails World 2025, Amsterdam
marcoroth
0
500
Design Foundational Data Engineering Observability
sucitw
3
160
RDoc meets YARD
okuramasafumi
4
160
Langfuseと歩む生成AI活用推進
licux
3
330
OSS開発者という働き方
andpad
5
1.7k
ぬるぬる動かせ! Riveでアニメーション実装🐾
kno3a87
1
110
ソフトウェアテスト徹底指南書の紹介
goyoki
1
140
Swift Updates - Learn Languages 2025
koher
2
430
More Approvers for Greater OSS and Japan Community
tkikuc
1
110
Claude Codeで実装以外の開発フロー、どこまで自動化できるか?失敗と成功
ndadayo
4
1.9k
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.5k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.1k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
910
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Documentation Writing (for coders)
carmenintech
74
5k
A better future with KSS
kneath
239
17k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
111
20k
Designing for humans not robots
tammielis
253
25k
How to Think Like a Performance Engineer
csswizardry
26
1.9k
Statistics for Hackers
jakevdp
799
220k
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