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
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
400
AIと私たちの学習の変化を考える - Claude Codeの学習モードを例に
azukiazusa1
11
4.4k
もうちょっといいRubyプロファイラを作りたい (2025)
osyoyu
1
460
FindyにおけるTakumi活用と脆弱性管理のこれから
rvirus0817
0
540
print("Hello, World")
eddie
2
530
Azure SRE Agentで運用は楽になるのか?
kkamegawa
0
2.5k
Reading Rails 1.0 Source Code
okuramasafumi
0
250
Design Foundational Data Engineering Observability
sucitw
3
210
AI時代のUIはどこへ行く?
yusukebe
18
9.1k
How Android Uses Data Structures Behind The Scenes
l2hyunwoo
0
480
Navigating Dependency Injection with Metro
zacsweers
3
3.5k
意外と簡単!?フロントエンドでパスキー認証を実現する WebAuthn
teamlab
PRO
2
780
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
224
9.9k
Producing Creativity
orderedlist
PRO
347
40k
How GitHub (no longer) Works
holman
315
140k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
3k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
930
Optimizing for Happiness
mojombo
379
70k
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