Introduction to React.js

November 20, 2016

94

Introduction to React.js

Overview of core concepts in React.js

Roman Liutikov

November 20, 2016

More Decks by Roman Liutikov

See All by Roman Liutikov

ClojureScript × Type Inference

0

48

React Kyiv – Dec 19, 2017

1

230

React & ClojureScript in production at Attendify

0

200

Web Apps performance & JavaScript compilers

3

140

React Native: Native Mobile Development in JavaScript @ LvivJS 2016

0

160

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

0

430

React Native: Native mobile development with JavaScript

0

210

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

1

230

ClojureScript: what are you?

2

140

Other Decks in Programming

See All in Programming

変化を抱擁するドキュメントの作り方 - ビジネスルール駆動開発がもたらす、コードとの新しい関係

2

220

MVNOの申込からeSIM開通までをiOSアプリでつなぐ- 本人確認・MNP・通信事業者基盤をまたぐ実装

0

460

FreeBSDでZabbixを動かす

0

320

Omarchy Tokyo やると聞いて UMPC 買ってセットアップしてきた

0

160

海上で動くGoサーバー: goroutineとchannelでさばく航行データストリーム

0

910

スマートフォンでモールス信号を送受信する〜スマートフォンのLEDとカメラで作る光通信の設計と実装〜

0

170

LoopHub - ローカルで動く GitHub で、AI と共同開発

1

570

世界の中心で、AI（App Intents）をさけぶー App Intents中心設計の実践ガイド

0

650

AI Agent時代のリアーキテクチャ戦略と実践

9

4.9k

[Rails World 2026] Durable orchestration on Rails: from continuation to workflow

0

140

AI × TiDD / 2026.09.05 Redmine 大阪

1

180

Java 27新機能 / Java 27 new features

2

160

Featured

See All Featured

Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline

PRO

0

440

Put a Button on it: Removing Barriers to Going Fast.

60

4.6k

Prompt Engineering for Job Search

0

460

Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End

254

22k

Principles of Awesome APIs and How to Build Them.

128

18k

"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)

230

23k

Darren the Foodie - Storyboard

PRO

4

3.9k

The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024

28

3.6k

Digital Ethics as a Driver of Design Innovation

PRO

1

430

Performance Is Good for Brains [We Love Speed 2024]

12

1.8k

GitHub's CSS Performance

1033

470k

10 Git Anti Patterns You Should be Aware of

PRO

659

62k

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.