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
Introduction to React.js
Search
Roman Liutikov
November 20, 2016
Programming
0
78
Introduction to React.js
Overview of core concepts in React.js
Roman Liutikov
November 20, 2016
Tweet
Share
More Decks by Roman Liutikov
See All by Roman Liutikov
ClojureScript × Type Inference
roman01la
0
43
React Kyiv – Dec 19, 2017
roman01la
1
220
React & ClojureScript in production at Attendify
roman01la
0
200
Web Apps performance & JavaScript compilers
roman01la
3
120
React Native: Native Mobile Development in JavaScript @ LvivJS 2016
roman01la
0
140
React Native: Are we there yet? (Pokémon edition) @ VinnytsiaJS '16
roman01la
0
380
React Native: Native mobile development with JavaScript
roman01la
0
180
ClojureScript, что ты такое?
roman01la
1
210
ClojureScript: what are you?
roman01la
2
130
Other Decks in Programming
See All in Programming
Conquering Massive Traffic Spikes in Ruby Applications with Pitchfork
riseshia
0
160
(Extension DC 2025) Actor境界を越える技術
teamhimeh
1
250
アメ車でサンノゼを走ってきたよ!
s_shimotori
0
220
Back to the Future: Let me tell you about the ACP protocol
terhechte
0
140
非同期jobをtransaction内で 呼ぶなよ!絶対に呼ぶなよ!
alstrocrack
0
690
株式会社 Sun terras カンパニーデック
sunterras
0
270
CSC509 Lecture 04
javiergs
PRO
0
300
高度なUI/UXこそHotwireで作ろう Kaigi on Rails 2025
naofumi
4
3.8k
NetworkXとGNNで学ぶグラフデータ分析入門〜複雑な関係性を解き明かすPythonの力〜
mhrtech
3
1.2k
Devvox Belgium - Agentic AI Patterns
kdubois
1
110
AI Coding Meetup #3 - 導入セッション / ai-coding-meetup-3
izumin5210
0
2.7k
After go func(): Goroutines Through a Beginner’s Eye
97vaibhav
0
350
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
54
3k
Mobile First: as difficult as doing things right
swwweet
224
10k
Agile that works and the tools we love
rasmusluckow
331
21k
Making Projects Easy
brettharned
119
6.4k
Writing Fast Ruby
sferik
629
62k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
The Straight Up "How To Draw Better" Workshop
denniskardys
237
140k
A better future with KSS
kneath
239
18k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
114
20k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
Transcript
UI is a hierarchical tree structure
DOM is also a tree structure <html> <head> </head> <body>
<h1>Hello!</h1> <div></div> </body> </html>
React.js application is a tree structure of React components <Root>
<Child /> <Child> <Child>Hello!</Child> <Child /> </Child> </Root>
Components share data through tree hierarchy
A component may have an internal state When state is
updated, component and its children are also updated (re-rendered).
Component lifecycle
Rendering optimization If props or state didn’t change, there’s no
reason to update (re-render) a component.
Child to parent communication Parent component may pass a callback
function, which changes a state of the component, to child component.