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
59
The Truth About Truthy & Falsy
swaroopsm
1
55
Other Decks in Programming
See All in Programming
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
1
330
deno-redisの紹介とJSRパッケージの運用について (toranoana.deno #21)
uki00a
0
170
Team operations that are not burdened by SRE
kazatohiei
1
290
XP, Testing and ninja testing
m_seki
3
220
Go1.25からのGOMAXPROCS
kuro_kurorrr
1
840
VS Code Update for GitHub Copilot
74th
1
540
WindowInsetsだってテストしたい
ryunen344
1
220
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
480
アンドパッドの Go 勉強会「 gopher 会」とその内容の紹介
andpad
0
280
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
370
Create a website using Spatial Web
akkeylab
0
310
GraphRAGの仕組みまるわかり
tosuri13
8
510
Featured
See All Featured
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Navigating Team Friction
lara
187
15k
Bash Introduction
62gerente
614
210k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Agile that works and the tools we love
rasmusluckow
329
21k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Speed Design
sergeychernyshev
32
1k
Visualization
eitanlees
146
16k
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