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
dchart: charts from deck markup
Avatar for Anthony Starks ajstarks
3
990
CSC307 Lecture 03
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
1
490
CSC307 Lecture 04
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
660
「ブロックテーマでは再現できない」は本当か？
Avatar for Takashi Kitajima inc2734
0
970
IFSによる形状設計／デモシーンの魅力 @ 慶應大学SFC
Avatar for がむ gam0022
1
300
生成AIを使ったコードレビューで定性的に品質カバー
Avatar for Chiaki Okamoto chiilog
1
260
プロダクトオーナーから見たSOC2 _SOC2ゆるミートアップ#2
Avatar for Kenta Suzuki kekekenta
0
210
今から始めるClaude Code超入門
Avatar for 448jp | OKI Yoshiya 448jp
8
8.6k
AI Schema Enrichment for your Oracle AI Database
Avatar for thatjeffsmith thatjeffsmith
0
270
15年続くIoTサービスの SREエンジニアが挑む 分散トレーシング導入
Avatar for Melonps melonps
2
190
Basic Architectures
Avatar for Denys Poltorak denyspoltorak
0
670
AIエージェント、”どう作るか”で差は出るか？ / AI Agents: Does the "How" Make a Difference?
Avatar for r-kagaya rkaga
4
2k

Featured

See All Featured
AI: The stuff that nobody shows you
Avatar for John Nunemaker jnunemaker
PRO
2
250
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
275
41k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
Tell your own story through comics
Avatar for letsgokoyo letsgokoyo
1
810
The SEO identity crisis: Don't let AI make you average
Avatar for Varn varn
0
240
Test your architecture with Archunit
Avatar for Yoan thirion
1
2.1k
The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs
Avatar for Ines Montani inesmontani
PRO
3
3k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
333
24k
Deep Space Network (abreviated)
Avatar for Tony Rice tonyrice
0
47
Exploring anti-patterns in Rails
Avatar for Elle Meredith aemeredith
2
250
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
0
410
Joys of Absence: A Defence of Solitary Play
Avatar for Sebastian Deterding codingconduct
1
290

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.