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
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
190
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
130
React Native: Are we there yet? (Pokémon edition) @ VinnytsiaJS '16
Avatar for Roman Liutikov roman01la
0
380
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
Vibe coding コードレビュー
Avatar for kinopee kinopeee
0
450
パスタの技術
Avatar for Yusuke Wada yusukebe
1
390
新世界の理解
Avatar for Akihito Koriyama koriym
0
140
Claude Codeで実装以外の開発フロー、どこまで自動化できるか？失敗と成功
Avatar for ndaDayo.Sugawawa ndadayo
2
170
物語を動かす行動"量" #エンジニアニメ
Avatar for konifar konifar
14
5.2k
UbieのAIパートナーを支えるコンテキストエンジニアリング実践
Avatar for Ryo Okubo syucream
2
450
可変性を制する設計: 構造と振る舞いから考える概念モデリングとその実装
Avatar for Akira Suenami a_suenami
10
1.8k
令和最新版手のひらコンピュータ
Avatar for KOBA789 koba789
14
7.8k
Introduction to Git & GitHub
Avatar for Latte72 latte72
0
110
A Gopher's Guide to Vibe Coding
Avatar for Daniela Petruzalek danicat
0
150
ゲームの物理
Avatar for Fadis fadis
5
1.2k
Claude Code と OpenAI o3 で メタデータ情報を作る
Avatar for laket laket
0
130

Featured

See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
283
13k
Adopting Sorbet at Scale
Avatar for Ufuk Kayserilioglu ufuk
77
9.5k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
83
9.1k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
246
12k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
29
2.8k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
96
6.2k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
49
14k
It's Worth the Effort
Avatar for 3n 3n
186
28k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
301
21k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
54
13k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
272
27k

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.