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
250
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
54
Testing JavaScript like a "BOSS"
swaroopsm
0
53
The Truth About Truthy & Falsy
swaroopsm
1
51
Other Decks in Programming
See All in Programming
元気予報
suu_mire0726
0
850
二郎系ラーメンのコールで学ぶ AST 解析
memory1994
PRO
7
1.6k
オブジェクトしこう
okuramasafumi
2
150
Folding Cheat Sheet #1
philipschwarz
PRO
0
210
Introduction for Open Source Swift Workshop
giginet
PRO
0
1.1k
VSCodeでのDatabricks開発もお勧めしたい/I would also recommend Databricks development with VSCode.
kazumain
0
230
CA.swift19 恋するAIアプリ開発の裏側
oskmr
0
330
educure_カリキュラム生操作マニュアル.pdf
linew_official
0
410
Blue/Greenデプロイの導入による 運用フローの改善
kudoas
1
340
Rubyでたのしむクリエイティブコーディング/Enjoy Creative coding with Ruby
chobishiba
1
160
Designing for tomorrow's programming workflows
honnibal
PRO
2
110
SpringBoot+MyBatisで例外が出たときどこを見るか
syukai
0
110
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
265
19k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
60
14k
No one is an island. Learnings from fostering a developers community.
thoeni
14
2.1k
Done Done
chrislema
178
15k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
29
6k
Building Flexible Design Systems
yeseniaperezcruz
318
37k
A designer walks into a library…
pauljervisheath
199
23k
How to Ace a Technical Interview
jacobian
272
22k
What the flash - Photography Introduction
edds
64
11k
Rebuilding a faster, lazier Slack
samanthasiow
72
8.2k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
6.9k
How To Stay Up To Date on Web Technology
chriscoyier
781
250k
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