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
90
Design System Adventures in React
gabro
1
92
Casting Metals
gabro
0
360
Functional Programming in front-end applications
gabro
1
230
Functional Programming in Front-end Applications
gabro
3
170
How to get away with Functional Programming in front-end applications
gabro
3
1.5k
Bridging the tooling gap with Scala.js
gabro
0
270
Monad Transformers Down to Earth
gabro
2
2.6k
Move fast and fix things
gabro
0
330
Other Decks in Programming
See All in Programming
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
ohmori_yusuke
1
130
ふつうの技術スタックでアート作品を作ってみる
akira888
1
1.1k
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
140
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
910
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
180
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
140
状態遷移図を書こう / Sequence Chart vs State Diagram
orgachem
PRO
2
170
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
5
1.4k
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
2
20k
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
1.1k
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
5
1k
Porting a visionOS App to Android XR
akkeylab
0
660
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
830
Become a Pro
speakerdeck
PRO
29
5.4k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Balancing Empowerment & Direction
lara
1
440
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
7
330
Practical Orchestrator
shlominoach
189
11k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Agile that works and the tools we love
rasmusluckow
329
21k
Statistics for Hackers
jakevdp
799
220k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
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={?} />