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
PHPに関数型の魂を宿す〜PHP 8.5 で実現する堅牢なコードとは〜 #phpcon_hiroshima / phpcon-hiroshima-2025
shogogg
1
330
Domain-centric? Why Hexagonal, Onion, and Clean Architecture Are Answers to the Wrong Question
olivergierke
3
970
Devvox Belgium - Agentic AI Patterns
kdubois
1
150
Pythonに漸進的に型をつける
nealle
1
120
スキーマ駆動で、Zod OpenAPI Honoによる、API開発するために、Hono Takibiというライブラリを作っている
nakita628
0
320
When Dependencies Fail: Building Antifragile Applications in a Fragile World
selcukusta
0
110
バッチ処理を「状態の記録」から「事実の記録」へ
panda728
PRO
0
190
「ちょっと古いから」って避けてた技術書、今だからこそ読もう
mottyzzz
12
7.1k
他言語経験者が Golangci-lint を最初のコーディングメンターにした話 / How Golangci-lint Became My First Coding Mentor: A Story from a Polyglot Programmer
uma31
0
390
Claude Agent SDK を使ってみよう
hyshu
0
1.4k
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
240
EMこそClaude Codeでコード調査しよう
shibayu36
0
410
Featured
See All Featured
What's in a price? How to price your products and services
michaelherold
246
12k
How to Ace a Technical Interview
jacobian
280
24k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
Become a Pro
speakerdeck
PRO
29
5.6k
VelocityConf: Rendering Performance Case Studies
addyosmani
333
24k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
640
Rails Girls Zürich Keynote
gr2m
95
14k
Typedesign – Prime Four
hannesfritz
42
2.8k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.7k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
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.