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

3rd party scriptでもReactを使いたい！ Preact + Reactのハイブリッド開発

1

590

PHP でアセンブリ言語のように書く技術

1

160

カスタムしながら理解するGraphQL Connection

1

1.5k

Nurturing OpenJDK distribution: Eclipse Temurin Success History and plan

0

490

2024/11/8 関西Kaggler会 2024 #3 / Kaggle Kernel で Gemma 2 × vLLM を動かす。

4

640

Realtime API 入門

0

140

CSC509 Lecture 12

0

140

macOS でできるリアルタイム動画像処理

9

2.3k

現場で役立つモデリング　超入門

15

3.1k

CSC509 Lecture 11

0

180

LLM生成文章の精度評価自動化とプロンプトチューニングの効率化について

2

170

AWS Lambdaから始まった Serverlessの「熱」とキャリアパス / It started with AWS Lambda Serverless “fever” and career path

0

170

Featured

See All Featured

Designing Experiences People Love

138

23k

Code Review Best Practice

64

17k

How to train your dragon (web standard)

88

5.7k

Refactoring Trust on Your Teams (GOTO; Chicago 2020)

31

2.7k

4 Signs Your Business is Dying

180

21k

25

5k

Being A Developer After 40

86

590k

Rails Girls Zürich Keynote

93

13k

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

226

22k

Distributed Sagas: A Protocol for Coordinating Microservices

329

21k

Teambox: Starting and Learning

133

8.8k

10 Git Anti Patterns You Should be Aware of

654

59k

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.