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
82

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
45
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
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
190
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
CSC307 Lecture 02
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
1
770
責任感のあるCloudWatchアラームを設計しよう
Avatar for アキキー akihisaikeda
3
160
OCaml 5でモダンな並列プログラミングを Enjoyしよう!
Avatar for Haochen Kotoi-Xie haochenx
0
120
AI前提で考えるiOSアプリのモダナイズ設計
Avatar for 野瀬田　裕樹 yuukiw00w
0
220
CSC307 Lecture 09
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
1
830
今こそ知るべき耐量子計算機暗号(PQC)入門 / PQC: What You Need to Know Now
Avatar for mackey0225 mackey0225
3
370
コントリビューターによるDenoのすゝめ / Deno Recommendations by a Contributor
Avatar for petamoriken / 森建 petamoriken
0
200
なぜSQLはAIぽく見えるのか/why does SQL look AI like
Avatar for florets1 florets1
0
440
AI & Enginnering
Avatar for codelynx codelynx
0
110
プロダクトオーナーから見たSOC2 _SOC2ゆるミートアップ#2
Avatar for Kenta Suzuki kekekenta
0
200
MDN Web Docs に日本語翻訳でコントリビュート
Avatar for uutan1108 ohmori_yusuke
0
640
AIフル活用時代だからこそ学んでおきたい働き方の心得
Avatar for shinoyu shinoyu
0
130

Featured

See All Featured
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
333
24k
<Decoding/> the Language of Devs - We Love SEO 2024
Avatar for Nikki Halliwell nikkihalliwell
1
120
Un-Boring Meetings
Avatar for Sebastian Deterding codingconduct
0
200
What does AI have to do with Human Rights?
Avatar for Per Axbom axbom
PRO
0
2k
How to Align SEO within the Product Triangle To Get 
Buy-In & Support - #RIMC
Avatar for Aleyda Solis aleyda
1
1.4k
Skip the Path - Find Your Career Trail
Avatar for Mark Kilby mkilby
0
52
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
34
2.6k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
230k
Information Architects: The Missing Link in Design Systems
Avatar for Michelle Chin soysaucechin
0
770
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
91
590k
KATA
Avatar for Megan Lloyd mclloyd
PRO
34
15k
From Legacy to Launchpad: Building Startup-Ready Communities
Avatar for Dug Song dugsong
0
140

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.