This document discusses React, a JavaScript library for building user interfaces. It provides an overview of React concepts like components, JSX, state and props, and the virtual DOM. Benefits of React mentioned include being fast, modular, state-based, independent and high-performance due to the virtual DOM. The document also briefly introduces React Native, which allows building native mobile apps using React.
16. › Facebook, Mother of dragons __
¬ Started by Facebook in 2013.
¬ Motivation — Building Large apps with data.
¬ Over 45k+ Star on Github.
¬ Sites Using React:
¬ Facebook, Instagram, Dropbox, PayPal, Uber, …
#irDevConf ■ @sia_mac
17. › Meet React __
#irDevConf ■ @sia_mac
NOT Another Framework!
Just a library for creating User Interfaces.
18. › Meet React __
#irDevConf ■ @sia_mac
Renders your User Interfaces
and responds to Events.
19. › Meet React __
#irDevConf ■ @sia_mac
React just “V” in ‘MVC’ (View)
20. › Meet React __
#irDevConf ■ @sia_mac
¬ React Has …
¬ No Controllers. No Directives.
¬ No Templates. No Global EventListener.
¬ No Models. No View Models.
¬ No Dirty Checking.
21. › Meet React __
#irDevConf ■ @sia_mac
Everything is a Component!
Everything is a Component!
Everything is a Component!
Everything is a Component!
Everything is a Component!
27. › The Most important in Performance: __
#irDevConf ■ @sia_mac
Virtual DOM
28. › Virtual DOM: __
¬ Simple & Fast & Smart.
¬ On Every update:
¬ React builds a new virtual DOM subtree.
¬ Diffs it with the old One.
¬ Computes the minimal set of DOM mutations and puts
them in a queue.
¬ Batch executes all updates.
#irDevConf ■ @sia_mac
29. › JSX Allows you to write JS and XML Together: __
#irDevConf ■ @sia_mac
React JSX is a Sugar–Syntax for JS!
30. › Traditional Data flows: __
¬ No Framework: Any component can communicate with
any other component.
¬ BackboneJS: Pub–Sub.
¬ AngularJS: 2–way binding and $digest loop.
¬ ReactJS: 1–way data flow:
¬ Data handed from Parent to Child “Props”.
#irDevConf ■ @sia_mac
39. › State & Props: __
¬ Every Component has ‘state’ and ‘props’.
¬ ‘state’ is mutable and ‘props’ is immutable.
¬ Re-Render (Virtual DOM) the whole app once the
`state` changes.
#irDevConf ■ @sia_mac
40. › Why React? __
#irDevConf ■ @sia_mac
¬ Fast and Smart.
¬ Unidirectional data flow from parent components to child
components.
¬ Isomorphic (JS apps that can run both client-side and
server-side)
¬ Easy to debug & testable.
¬ Use JSX with familiar HTML like syntax for writing react
apps.