Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Introduction to React.js

Avatar for Roman Liutikov Roman Liutikov
November 20, 2016
Programming
0
78

Introduction to React.js

Overview of core concepts in React.js

Avatar for Roman Liutikov

Roman Liutikov

November 20, 2016
Tweet

More Decks by Roman Liutikov

See All by Roman Liutikov
ClojureScript × Type Inference
Avatar for Roman Liutikov roman01la
0
43
React Kyiv – Dec 19, 2017
Avatar for Roman Liutikov roman01la
1
220
React & ClojureScript in production at Attendify
Avatar for Roman Liutikov roman01la
0
190
Web Apps performance & JavaScript compilers
Avatar for Roman Liutikov roman01la
3
120
React Native: Native Mobile Development in JavaScript @ LvivJS 2016
Avatar for Roman Liutikov roman01la
0
140
React Native: Are we there yet? (Pokémon edition) @ VinnytsiaJS '16
Avatar for Roman Liutikov roman01la
0
380
React Native: Native mobile development with JavaScript
Avatar for Roman Liutikov roman01la
0
180
ClojureScript, что ты такое?
Avatar for Roman Liutikov roman01la
1
210
ClojureScript: what are you?
Avatar for Roman Liutikov roman01la
2
130

Other Decks in Programming

See All in Programming
基礎から学ぶ大画面対応(Learning Large-Screen Support from the Ground Up)
Avatar for Tomoya Miwa tomoya0x00
0
410
AIと私たちの学習の変化を考える - Claude Codeの学習モードを例に
Avatar for azukiazusa azukiazusa1
8
3.5k
プロポーザル駆動学習 / Proposal-Driven Learning
Avatar for mackey0225 mackey0225
2
1.2k
Processing Gem ベースの、2D レトロゲームエンジンの開発
Avatar for tokujiros tokujiros
2
120
Android端末で実現するオンデバイスLLM 2025
Avatar for Masayuki Suda masayukisuda
1
120
Improving my own Ruby thereafter
Avatar for monochrome sisshiki1969
1
160
TDD 実践ミニトーク
Avatar for Daisuke Garaike contour_gara
1
290
Tool Catalog Agent for Bedrock AgentCore Gateway
Avatar for matsukada licux
6
2.3k
Compose Multiplatform × AI で作る、次世代アプリ開発支援ツールの設計と実装
Avatar for Takeshi Hagikura thagikura
0
140
go test -json そして testing.T.Attr / Kyoto.go #63
Avatar for utagawa kiki utgwkk
3
280
今だからこそ入門する Server-Sent Events (SSE)
Avatar for NearMeの技術発表資料です nearme_tech
PRO
0
110
MCPとデザインシステムに立脚したデザインと実装の融合
Avatar for Yuku Kotani yukukotani
4
1.4k

Featured

See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
48
9.7k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
3
620
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
379
70k
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
57
5.8k
Side Projects
Avatar for Sacha Greif sachag
455
43k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
6.1k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
368
19k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
160
23k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
352
21k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
210k
Code Review Best Practice
Avatar for Trisha Gee trishagee
70
19k

Transcript

  1. UI is a hierarchical tree structure

  2. DOM is also a tree structure <html> <head> </head> <body>

    <h1>Hello!</h1> <div></div> </body> </html>

  3. React.js application is a tree structure of React components <Root>

    <Child /> <Child> <Child>Hello!</Child> <Child /> </Child> </Root>

  4. Components share data through tree hierarchy

  5. A component may have an internal state When state is

    updated, component and its children are also updated (re-rendered).

  6. Component lifecycle

  7. Rendering optimization If props or state didn’t change, there’s no

    reason to update (re-render) a component.

  8. Child to parent communication Parent component may pass a callback

    function, which changes a state of the component, to child component.