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
76
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
37
React Kyiv – Dec 19, 2017
roman01la
1
220
React & ClojureScript in production at Attendify
roman01la
0
190
Web Apps performance & JavaScript compilers
roman01la
3
120
React Native: Native Mobile Development in JavaScript @ LvivJS 2016
roman01la
0
130
React Native: Are we there yet? (Pokémon edition) @ VinnytsiaJS '16
roman01la
0
370
React Native: Native mobile development with JavaScript
roman01la
0
180
ClojureScript, что ты такое?
roman01la
1
200
ClojureScript: what are you?
roman01la
2
130
Other Decks in Programming
See All in Programming
SpringBoot3.4の構造化ログ #kanjava
irof
2
970
パスキーのすべて ── 導入・UX設計・実装の紹介 / 20250213 パスキー開発者の集い
kuralab
3
670
Flutter × Firebase Genkit で加速する生成 AI アプリ開発
coborinai
0
150
社内フレームワークとその依存性解決 / in-house framework and its dependency management
vvakame
1
550
技術を根付かせる / How to make technology take root
kubode
1
240
定理証明プラットフォーム lapisla.net
abap34
1
1.7k
Ruby on cygwin 2025-02
fd0
0
140
2024年のkintone API振り返りと2025年 / kintone API look back in 2024
tasshi
0
210
時計仕掛けのCompose
mkeeda
1
280
最近のVS Codeで気になるニュース 2025/01
74th
1
250
WebDriver BiDiとは何なのか
yotahada3
1
140
Lottieアニメーションをカスタマイズしてみた
tahia910
0
120
Featured
See All Featured
Testing 201, or: Great Expectations
jmmastey
41
7.2k
How to train your dragon (web standard)
notwaldorf
90
5.8k
Designing for Performance
lara
604
68k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Scaling GitHub
holman
459
140k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Statistics for Hackers
jakevdp
797
220k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
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.