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
Kubernetes History Inspector(KHI)を触ってみた
bells17
0
220
技術を根付かせる / How to make technology take root
kubode
1
240
ISUCON14公式反省会LT: 社内ISUCONの話
astj
PRO
0
190
Honoとフロントエンドの 型安全性について
yodaka
5
330
AIの力でお手軽Chrome拡張機能作り
taiseiue
0
170
AWS Lambda functions with C# 用の Dev Container Template を作ってみた件
mappie_kochi
0
240
DevinとCursorから学ぶAIエージェントメモリーの設計とMoatの考え方
itarutomy
1
670
“あなた” の開発を支援する AI エージェント Bedrock Engineer / introducing-bedrock-engineer
gawa
11
1.9k
JavaScriptツール群「UnJS」を5分で一気に駆け巡る!
k1tikurisu
9
1.8k
富山発の個人開発サービスで日本中の学校の業務を改善した話
krpk1900
4
380
GitHub Actions × RAGでコードレビューの検証の結果
sho_000
0
250
『品質』という言葉が嫌いな理由
korimu
0
160
Featured
See All Featured
It's Worth the Effort
3n
184
28k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
For a Future-Friendly Web
brad_frost
176
9.5k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.4k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
31
2.1k
Code Review Best Practice
trishagee
66
17k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.2k
Testing 201, or: Great Expectations
jmmastey
42
7.2k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
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.