Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

Introduction to React.js

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

Introduction to React.js

Overview of core concepts in React.js

Avatar for Roman Liutikov

Roman Liutikov

November 20, 2016
Tweet

More Decks by Roman Liutikov

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

Other Decks in Programming

See All in Programming
tsgolintはいかにしてtypescript-goの非公開APIを呼び出しているのか
Avatar for syumai syumai
5
1.6k
無秩序からの脱却 / Emergence from chaos
Avatar for nrs nrslib
2
12k
関数の挙動書き換える
Avatar for takato fukui takatofukui
4
770
Querying Design System デザインシステムの意思決定を支える構造検索
Avatar for ikuma-t ikumatadokoro
1
1.3k
AIエンジニアリングのご紹介 / Introduction to AI Engineering
Avatar for r-kagaya rkaga
3
1.2k
宅宅自以為的浪漫：跟 AI 一起為自己辦的研討會寫一個售票系統
Avatar for 高見龍 eddie
0
480
AIコーディングエージェント（Manus）
Avatar for kondai kondai24
0
140
React Native New Architecture 移行実践報告
Avatar for taminif taminif
1
130
AIコーディングエージェント（NotebookLM）
Avatar for kondai kondai24
0
140
S3 VectorsとStrands Agentsを利用したAgentic RAGシステムの構築
Avatar for とすり tosuri13
6
280
CSC509 Lecture 14
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
220
エディターってAIで操作できるんだぜ
Avatar for kis9a kis9a
0
660

Featured

See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
37
2.6k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
50
14k
Designing for humans not robots
Avatar for Tammie Lister tammielis
254
26k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
5
790
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
80
6.1k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
31
3k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
33
1.4k
Writing Fast Ruby
Avatar for Erik Berlin sferik
630
62k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
10
700
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
329
39k
What’s in a name? Adding method to the madness
Avatar for Product Marketing Alliance productmarketing
PRO
24
3.8k

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.