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
42
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
130
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
XP, Testing and ninja testing
Avatar for seki at druby.org m_seki
2
140
つよそうにふるまい、つよい成果を出すのなら、つよいのかもしれない
Avatar for irof irof
1
300
Go Modules: From Basics to Beyond / Go Modulesの基本とその先へ
Avatar for kuro kuro_kurorrr
0
120
都市をデータで見るってこういうこと　PLATEAU属性情報入門
Avatar for nokonoko1203 nokonoko1203
1
550
Team topologies and the microservice architecture: a synergistic relationship
Avatar for Chris Richardson cer
PRO
0
950
FormFlow - Build Stunning Multistep Forms
Avatar for Yonel Ceruto González yceruto
1
190
F#で自在につくる静的ブログサイト - 関数型まつり2025
Avatar for pizzacat83 pizzacat83
0
310
複数アプリケーションを育てていくための共通化戦略
Avatar for irof irof
10
4k
Cursor AI Agentと伴走する アプリケーションの高速リプレイス
Avatar for どすこい daisuketakeda
1
120
Elixir で IoT 開発、 Nerves なら簡単にできる！？
Avatar for pojiro pojiro
1
150
カクヨムAndroidアプリのリブート
Avatar for Nabe numeroanddev
0
430
社内での開発コミュニティ活動とモジュラーモノリス標準化事例のご紹介/xPalette and Introduction of Modular monolith standardization
Avatar for Mitsuharu Maruyama m4maruyama
1
130

Featured

See All Featured
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
693
190k
Designing Experiences People Love
Avatar for Jonathan Moore moore
142
24k
Designing for Performance
Avatar for Lara Hogan lara
609
69k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
357
30k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
107
19k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
31
1k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
184
22k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
29
2.7k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
30
5.8k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
351
20k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
134
9.3k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
512
110k

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.