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

Kubernetes History Inspector(KHI)を触ってみた

0

220

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

1

240

ISUCON14公式反省会LT: 社内ISUCONの話

0

190

Honoとフロントエンドの型安全性について

5

330

AIの力でお手軽Chrome拡張機能作り

0

170

AWS Lambda functions with C# 用の Dev Container Template を作ってみた件

0

240

DevinとCursorから学ぶAIエージェントメモリーの設計とMoatの考え方

1

670

“あなた” の開発を支援する AI エージェント Bedrock Engineer / introducing-bedrock-engineer

11

1.9k

JavaScriptツール群「UnJS」を5分で一気に駆け巡る！

9

1.8k

富山発の個人開発サービスで日本中の学校の業務を改善した話

4

380

GitHub Actions × RAGでコードレビューの検証の結果

0

250

『品質』という言葉が嫌いな理由

0

160

Featured

See All Featured

It's Worth the Effort

184

28k

Distributed Sagas: A Protocol for Coordinating Microservices

330

21k

The Success of Rails: Ensuring Growth for the Next 100 Years

44

7k

For a Future-Friendly Web

176

9.5k

Creating an realtime collaboration tool: Agile Flush - .NET Oxford

27

1.9k

Java REST API Framework Comparison - PWX 2021

28

8.4k

The Power of CSS Pseudo Elements

75

5.5k

I Don’t Have Time: Getting Over the Fear to Launch Your Podcast

31

2.1k

Code Review Best Practice

66

17k

[RailsConf 2023] Rails as a piece of cake

53

5.2k

Testing 201, or: Great Expectations

42

7.2k

Easily Structure & Communicate Ideas using Wireframe

193

16k

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.