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

37

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

370

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

SpringBoot3.4の構造化ログ #kanjava

2

970

パスキーのすべて ── 導入・UX設計・実装の紹介 / 20250213 パスキー開発者の集い

3

670

Flutter × Firebase Genkit で加速する生成 AI アプリ開発

0

150

社内フレームワークとその依存性解決 / in-house framework and its dependency management

1

550

技術を根付かせる / How to make technology take root

1

240

定理証明プラットフォーム lapisla.net

1

1.7k

Ruby on cygwin 2025-02

0

140

2024年のkintone API振り返りと2025年 / kintone API look back in 2024

0

210

時計仕掛けのCompose

1

280

最近のVS Codeで気になるニュース 2025/01

1

250

WebDriver BiDiとは何なのか

1

140

Lottieアニメーションをカスタマイズしてみた

0

120

Featured

See All Featured

Testing 201, or: Great Expectations

41

7.2k

How to train your dragon (web standard)

90

5.8k

Designing for Performance

604

68k

Building Flexible Design Systems

yeseniaperezcruz

328

38k

459

140k

RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub

132

33k

Save Time (by Creating Custom Rails Generators)

29

1k

Designing on Purpose - Digital PM Summit 2013

117

7.1k

Bootstrapping a Software Product

305

110k

ReactJS: Keep Simple. Everything can be a component!

666

120k

Statistics for Hackers

797

220k

Fantastic passwords and where to find them - at NoRuKo

51

3k

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.