Introduction to React.js

November 20, 2016

73

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

34

React Kyiv – Dec 19, 2017

1

220

React & ClojureScript in production at Attendify

0

170

Web Apps performance & JavaScript compilers

3

120

React Native: Native Mobile Development in JavaScript @ LvivJS 2016

0

120

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

0

320

React Native: Native mobile development with JavaScript

0

170

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

1

200

ClojureScript: what are you?

2

120

Other Decks in Programming

See All in Programming

Elm 0.19.0 Changes

0

490

Goのエラースタックトレースの歴史と今後

7

1.2k

PHP8.3の機能を振り返る / Review of PHP 8.3 features

1

110

VS Code をプロダクトにどう取り込むか

1

360

PHPはいつから死んでいるかの調査

1

400

Apache Hive 4 on Treasure Data

0

120

DMMプラットフォームがTiDB Cloudを採用した背景

8

4k

StoreKit2によるiOSのアプリ内課金のリニューアル

0

110

[技育CAMPアカデミア]アイディアを形に！【超入門】スマホアプリ開発〜リリースまでの流れをご紹介

0

360

4

890

ADRを一年運用してみた/adr_after_a_year

7

2.3k

冗長なエラーログを削減し、スタックトレースを手に入れる / Reducing Verbose Error Logs and Obtaining Stack Traces

0

490

Featured

See All Featured

Code Reviewing Like a Champion

514

39k

Making Projects Easy

108

5.5k

80

8.8k

Building an army of robots

300

41k

Rebuilding a faster, lazier Slack

73

8.2k

Testing 201, or: Great Expectations

28

6.3k

Faster Mobile Websites

299

30k

What's in a price? How to price your products and services

237

11k

実際に使うSQLの書き方徹底解説 / pgcon21j-tutorial

121

39k

Into the Great Unknown - MozCon

10

990

5 minutes of I Can Smell Your CMS

199

19k

How GitHub Uses GitHub to Build GitHub

468

290k

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.