Introduction to React.js

November 20, 2016

76

Introduction to React.js

Overview of core concepts in React.js

Roman Liutikov

November 20, 2016

Tweet

More Decks by Roman Liutikov

See All by Roman Liutikov

ClojureScript × Type Inference

0

35

React Kyiv – Dec 19, 2017

1

220

React & ClojureScript in production at Attendify

0

190

Web Apps performance & JavaScript compilers

3

120

React Native: Native Mobile Development in JavaScript @ LvivJS 2016

0

130

React Native: Are we there yet? (Pokémon edition) @ VinnytsiaJS '16

0

360

React Native: Native mobile development with JavaScript

0

180

ClojureScript, что ты такое?

1

200

ClojureScript: what are you?

2

130

Other Decks in Programming

See All in Programming

短期間での新規プロダクト開発における「コスパの良い」Goのテスト戦略」 / kamakura.go

2

170

週次リリースを実現するためのグローバルアプリ開発

1

100

Jakarta EE meets AI

0

260

[JAWS-UG横浜 #76] イケてるアップデートを宇宙いち早く紹介するよ！

0

490

testcontainers のススメ

1

120

わたしの星のままで一番星になる ~ 出産を機にSIerからEC事業会社に転職した話 ~

0

180

create_tableをしただけなのに〜囚われのuuid編〜

0

270

menu基盤チームによるGoogle Cloudの活用事例~Application Integration, Cloud Tasks編~

yoshifumi_ishikura

0

110

GitHubで育つコラボレーション文化 : ニフティでのインナーソース挑戦事例 - 2024-12-16 GitHub Universe 2024 Recap in ZOZO

0

100

KubeCon + CloudNativeCon NA 2024 Overviewat Kubernetes Meetup Tokyo #68 / amsy810_k8sjp68

0

260

「Chatwork」Android版アプリを支える単体テストの現在

0

180

Zoneless Testing

rainerhahnekamp

0

120

Featured

See All Featured

458

140k

Making the Leap to Tech Lead

133

9k

The Language of Interfaces

154

24k

85

9.4k

The Art of Delivering Value - GDevCon NA Keynote

8

1.2k

XXLCSS - How to scale CSS and keep your sanity

247

1.3M

Distributed Sagas: A Protocol for Coordinating Microservices

330

21k

A better future with KSS

238

17k

StorybookのUI Testing Handbookを読んだ

27

5.3k

10 Git Anti Patterns You Should be Aware of

656

59k

Understanding Cognitive Biases in Performance Measurement

26

1.5k

Music & Morning Musume

46

6.2k

Transcript

UI is a hierarchical tree structure
DOM is also a tree structure <html> <head> </head> <body>
<h1>Hello!</h1> <div></div> </body> </html>
React.js application is a tree structure of React components <Root>
<Child /> <Child> <Child>Hello!</Child> <Child /> </Child> </Root>
Components share data through tree hierarchy
A component may have an internal state When state is
updated, component and its children are also updated (re-rendered).
Component lifecycle
Rendering optimization If props or state didn’t change, there’s no
reason to update (re-render) a component.
Child to parent communication Parent component may pass a callback
function, which changes a state of the component, to child component.