Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Introduction to React.js

Avatar for Roman Liutikov Roman Liutikov
November 20, 2016
Programming
92
0

Introduction to React.js

Overview of core concepts in React.js

Avatar for Roman Liutikov

Roman Liutikov

November 20, 2016

More Decks by Roman Liutikov

See All by Roman Liutikov
ClojureScript × Type Inference
Avatar for Roman Liutikov roman01la
0
47
React Kyiv – Dec 19, 2017
Avatar for Roman Liutikov roman01la
1
230
React & ClojureScript in production at Attendify
Avatar for Roman Liutikov roman01la
0
200
Web Apps performance & JavaScript compilers
Avatar for Roman Liutikov roman01la
3
140
React Native: Native Mobile Development in JavaScript @ LvivJS 2016
Avatar for Roman Liutikov roman01la
0
160
React Native: Are we there yet? (Pokémon edition) @ VinnytsiaJS '16
Avatar for Roman Liutikov roman01la
0
410
React Native: Native mobile development with JavaScript
Avatar for Roman Liutikov roman01la
0
200
ClojureScript, что ты такое?
Avatar for Roman Liutikov roman01la
1
220
ClojureScript: what are you?
Avatar for Roman Liutikov roman01la
2
140

Other Decks in Programming

See All in Programming
Swiftのレキシカルスコープ管理
Avatar for kntk kntkymt
0
210
Lemonade + Foundry Toolkit でお手軽アプリ開発
Avatar for 瀬尾佳隆 seosoft
1
270
Oxcを導入して開発体験が向上した話
Avatar for Yuji Yamaguchi yug1224
4
280
Signal Forms: Beyond the Basics @ngBaguette 2026 in Paris
Avatar for Manfred Steyer manfredsteyer
PRO
0
210
JJUG CCC 2026 Spring: JSpecify で実現する Kotlin フレンドリーな Java API 設計
Avatar for ternbusty ternbusty
1
130
Old Dog, New Tricks: The Java 25 Reinvention - JNation
Avatar for A N M Bazlur Rahman bazlur_rahman
0
140
IBM Bobを活用したレガシーアプリの最新化
Avatar for Akira Onishi (IBM) oniak3ibm
PRO
1
150
決定論的オーケストレーションの設計と実装 / Design and Implementation of Deterministic Orchestration
Avatar for nrs nrslib
2
410
AI時代のUIはどこへ行く？その2！
Avatar for Yusuke Wada yusukebe
19
6.4k
AI駆動開発で崩れていくコードベースを立て直す
Avatar for Kyoko NR kyoko_nr_nr
1
420
Composerを使ったサプライチェーン攻撃の様子を眺めてみる #phpstudy
Avatar for hideki kinjyo o0h
PRO
2
220
[2026年度第1回ORセミナー] 計画最適化ベンチャーと競技プログラミング人材
Avatar for terry-u16 terryu16
0
230

Featured

See All Featured
The browser strikes back
Avatar for Jono Alderson jonoalderson
0
1.1k
Visualization
Avatar for Eitan Lees eitanlees
152
17k
How to Grow Your eCommerce with AI & Automation
Avatar for Katarina Dahlin katarinadahlin
PRO
1
200
Are puppies a ranking factor?
Avatar for Jono Alderson jonoalderson
1
3.5k
What the history of the web can teach us about the future of AI
Avatar for Ines Montani inesmontani
PRO
1
600
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
57
14k
Accessibility Awareness
Avatar for Sarah Abderemane sabderemane
1
130
Music & Morning Musume
Avatar for Bryan Veloso bryan
47
7.2k
Done Done
Avatar for chrislema chrislema
186
16k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
28
3.5k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
360
30k
What’s in a name? Adding method to the madness
Avatar for The Alliance productmarketing
PRO
24
4.1k

Transcript

  1. UI is a hierarchical tree structure

  2. DOM is also a tree structure <html> <head> </head> <body>

    <h1>Hello!</h1> <div></div> </body> </html>

  3. React.js application is a tree structure of React components <Root>

    <Child /> <Child> <Child>Hello!</Child> <Child /> </Child> </Root>

  4. Components share data through tree hierarchy

  5. A component may have an internal state When state is

    updated, component and its children are also updated (re-rendered).

  6. Component lifecycle

  7. Rendering optimization If props or state didn’t change, there’s no

    reason to update (re-render) a component.

  8. Child to parent communication Parent component may pass a callback

    function, which changes a state of the component, to child component.