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
React JS intro
Search
Gabriele Petronella
September 30, 2015
Programming
3
390
React JS intro
A lightweight introduction to React JS in the context of web applications
Gabriele Petronella
September 30, 2015
Tweet
Share
More Decks by Gabriele Petronella
See All by Gabriele Petronella
Design System Adventures in React - ReactJS Day 2024
gabro
0
97
Design System Adventures in React
gabro
1
96
Casting Metals
gabro
0
360
Functional Programming in front-end applications
gabro
1
230
Functional Programming in Front-end Applications
gabro
3
180
How to get away with Functional Programming in front-end applications
gabro
3
1.5k
Bridging the tooling gap with Scala.js
gabro
0
280
Monad Transformers Down to Earth
gabro
2
2.6k
Move fast and fix things
gabro
0
340
Other Decks in Programming
See All in Programming
Protocol Buffersの型を超えて拡張性を得る / Beyond Protocol Buffers Types Achieving Extensibility
linyows
0
100
Google I/O recap web編 大分Web祭り2025
kponda
0
2.9k
Kiroの仕様駆動開発から見えてきたAIコーディングとの正しい付き合い方
clshinji
1
190
プロポーザル駆動学習 / Proposal-Driven Learning
mackey0225
2
360
詳解!defer panic recover のしくみ / Understanding defer, panic, and recover
convto
0
210
機能追加とリーダー業務の類似性
rinchoku
1
510
オープンセミナー2025@広島LT技術ブログを続けるには
satoshi256kbyte
0
150
go test -json そして testing.T.Attr / Kyoto.go #63
utgwkk
2
220
開発チーム・開発組織の設計改善スキルの向上
masuda220
PRO
18
9.7k
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
310
兎に角、コードレビュー
mitohato14
0
170
2025 年のコーディングエージェントの現在地とエンジニアの仕事の変化について
azukiazusa1
15
7k
Featured
See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
KATA
mclloyd
32
14k
Being A Developer After 40
akosma
90
590k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
510
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Music & Morning Musume
bryan
46
6.8k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
The Cult of Friendly URLs
andyhume
79
6.6k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
11
1.1k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
A Tale of Four Properties
chriscoyier
160
23k
Transcript
AN INTRODUCTION TO REACTJS GABRIELE PETRONELLA SOFTWARE ENGINEER @ BUILDO
TWITTER: @GABRO27 / @BUILDOHQ
[email protected]
None
HTML
HTML <!DOCTYPE html> <html> <head> <title>This is a title</title> </head>
<body> <p>Hello world!</p> </body> </html>
I just had to take the hypertext idea and connect
it to the TCP and DNS ideas and — ta- da!— the World Wide Web — Tim Berners Lee
THE WEB, IN THE 90S ╔═══════════╗ ---------- ║ ║ gimme
dat page ║ ║----------------------> ║ browser ║ server ║ ║ <html>...</html> ║ ║<---------------------- ╚═══════════╝ ----------
None
<a href="/somewhere-fun">LINK!</a>
╔═══════════╗ ║ ║ gimme dat page ║
║----------------------> ║ ║ ║ ║ <html>...</html> ║ ║<---------------------- ║ browser ║ ... server ║ ║ ║ ║ do dat thing ║ ║----------------------> ║ ║ ║ ║ <html>...</html> ║ ║<---------------------- ║ ║ ╚═══════════╝
None
ADDING AN ELEMENT TO A CART <ul> <ul> <li>An apple</li>
<li>An apple</li> <li>A horse</li> ---> <li>A horse</li> </ul> <li>A dragon</li> </ul>
None
JAVASCRIPT (1995)
None
ADDING AN ELEMENT TO A CART var ul = document.getElementById("cart");
var li = document.createElement("li"); li.appendChild(document.createTextNode("Four")); ul.appendChild(li);
╔═══════════╗ ║ ║ gimme dat page ║
║----------------------> ║ ║ <html>...</html> ║ browser ║<---------------------- ║ ║ script.js ║ ║<---------------------- server ║ ║─────┐ ╚═══════════╝ ! ▲ ! <html>...</html>! !add item ! ! "########$ ! ! ! ! ! script !----- ! ! %########&
None
SO YOU SAY WE CAN CREATE HTML ELEMENTS...
SPA SINGLE-PAGE APPLICATIONS
╔═══════════╗ ║ ║ gimme dat page ║
║----------------------> ║ ║ <html>...</html> ║ browser ║<---------------------- ║ ║ app.js ║ ║<---------------------- ║ ╠─────┐ ╚═══════════╝ ! ▲ ! server <html>...</html>! !do stuff ! ! "##########$ ! ! !<----- ! ! gimme data ! app.js !----------------------> ! ! ! ! { data: "blah", ... } ! !<---------------------- %##########&
THE USUAL SUSPECTS
SOUNDS GREAT BUT...
COMPLEXITY!
MUTABLE STATE
OVER THE LAST 25 YEARS WE'VE SEEN...
FLUSH THE PAGE AT EVERY CHANGE VS COMPUTE THE CHANGES
LOCALLY
HERE'S HOW THE PAGE SHOULD LOOK LIKE VS HERE'S HOW
TO MAKE IT
IN OTHER WORDS...
DECLARATIVE VS IMPERATIVE
AND POTENTIALLY...
DEVELOPER EXPERIENCE VS USER EXPERIENCE
MEET REACT
DX + UX = REACT
DECLARATIVE APPROACH CONCEPTUALLY RE-RENDERING EVERYTHING EVERYTIME
IMPERATIVE EXPERIENCE MUTATION HAPPENS BEHIND THE SCENE
MVC
IT'S ALL ABOUT REUSABLE COMPONENTS
None
OUR FIRST COMPONENT const Hello = React.createClass({ render() { return
<div>Hello!</div>; } });
WAIT! HTML INSIDE JAVASCRIPT?!
YES, ALMOST...
JSX <div>Hello</div> gets translated to React.createElement("div", null, "Hello");
Details aside, there's no separation between templates and logic
SEPARATE CONCERNS NOT TECHNOLOGIES
ONLY TWO THINGS CAN AFFECT A COMPONENT > props !
> state "
PROPS ! A generalization over HTML attributes <button className='button inactive'>Click</button>
gets translated to React.createElement( "button", { className: 'button inactive' }, // <--- props "Click" );
OUR FIRST COMPONENT ACCEPTING PROPS const Greeter = React.createClass({ render()
{ return <div>Hello {this.props.name}!</div>; } ^ }); | just a javascript variable
AND THEN USE IT LIKE <Greeter name='Gabriele' /> ^ |_____________
passing a prop
CAN THIS BE EFFICIENT?
YOU WRITE render() { return ( <div> <span>Hello {this.props.userName}!</span> </div>
); }
REACT COMPUTES renderA: <div><span>Hello Gabriele!</span></div> renderB: <div><span>Hello Irina!</span></div> => [replaceAttribute
textContent 'Hello Irina'] ^ | | a state mutation, i.e. the horrible thing you want to avoid writing by hand
STATE ! A component can have an internal state AVOID
WHEN YOU CAN!
OUR FIRST STATEFUL COMPONENT !
const Counter = React.createClass({ getInitialState() { return { count: 0
}; }, increaseCount() { this.setState({ count: this.state.count + 1 }); }, ^ |_______________ triggers a re-render render() { return ( <div> <span>{this.state.count}</span> <button onClick={this.increaseCount}>Increase</button> </div> ); } });
THAT'S IT
REACT RECAP Everything is a component Components accept props Components
can have a state !
DEMO
THANKS
<Speaker questions={?} />