react overview
TRANSCRIPT
![Page 1: React Overview](https://reader031.vdocuments.us/reader031/viewer/2022032114/55abe7071a28abce678b45d6/html5/thumbnails/1.jpg)
![Page 2: React Overview](https://reader031.vdocuments.us/reader031/viewer/2022032114/55abe7071a28abce678b45d6/html5/thumbnails/2.jpg)
A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES
![Page 3: React Overview](https://reader031.vdocuments.us/reader031/viewer/2022032114/55abe7071a28abce678b45d6/html5/thumbnails/3.jpg)
REACT IS EASIER THAN JQUERY
![Page 4: React Overview](https://reader031.vdocuments.us/reader031/viewer/2022032114/55abe7071a28abce678b45d6/html5/thumbnails/4.jpg)
WHAT MAKES REACT DIFFERENT?
![Page 5: React Overview](https://reader031.vdocuments.us/reader031/viewer/2022032114/55abe7071a28abce678b45d6/html5/thumbnails/5.jpg)
MVC
![Page 6: React Overview](https://reader031.vdocuments.us/reader031/viewer/2022032114/55abe7071a28abce678b45d6/html5/thumbnails/6.jpg)
MV*
![Page 7: React Overview](https://reader031.vdocuments.us/reader031/viewer/2022032114/55abe7071a28abce678b45d6/html5/thumbnails/7.jpg)
BACKBONE ANGULAR EMBER KNOCKOUT
![Page 8: React Overview](https://reader031.vdocuments.us/reader031/viewer/2022032114/55abe7071a28abce678b45d6/html5/thumbnails/8.jpg)
TWO WAY DATA BINDING
CONTROLLEROR
ROUTERMODEL VIEW
![Page 9: React Overview](https://reader031.vdocuments.us/reader031/viewer/2022032114/55abe7071a28abce678b45d6/html5/thumbnails/9.jpg)
TWO WAY DATA BINDING
CONTROLLEROR
ROUTERMODEL VIEW
MODEL
MODEL
VIEW
VIEW
![Page 10: React Overview](https://reader031.vdocuments.us/reader031/viewer/2022032114/55abe7071a28abce678b45d6/html5/thumbnails/10.jpg)
SHARED MUTABLE STATE
![Page 11: React Overview](https://reader031.vdocuments.us/reader031/viewer/2022032114/55abe7071a28abce678b45d6/html5/thumbnails/11.jpg)
We should do our utmost to shorten the conceptual gap between the static
program and the dynamic process, to make the correspondence between the program and the process as trivial as
possible.
- Edsger W. Dijkstra
![Page 12: React Overview](https://reader031.vdocuments.us/reader031/viewer/2022032114/55abe7071a28abce678b45d6/html5/thumbnails/12.jpg)
TRADITIONAL DATA FLOW
![Page 13: React Overview](https://reader031.vdocuments.us/reader031/viewer/2022032114/55abe7071a28abce678b45d6/html5/thumbnails/13.jpg)
REACT DATA FLOW
DATA VIEW VIEW
VIEW
VIEW
![Page 14: React Overview](https://reader031.vdocuments.us/reader031/viewer/2022032114/55abe7071a28abce678b45d6/html5/thumbnails/14.jpg)
API
![Page 15: React Overview](https://reader031.vdocuments.us/reader031/viewer/2022032114/55abe7071a28abce678b45d6/html5/thumbnails/15.jpg)
RENDER
![Page 16: React Overview](https://reader031.vdocuments.us/reader031/viewer/2022032114/55abe7071a28abce678b45d6/html5/thumbnails/16.jpg)
CREATING COMPONENTS
![Page 17: React Overview](https://reader031.vdocuments.us/reader031/viewer/2022032114/55abe7071a28abce678b45d6/html5/thumbnails/17.jpg)
JSX RUNTIME
![Page 18: React Overview](https://reader031.vdocuments.us/reader031/viewer/2022032114/55abe7071a28abce678b45d6/html5/thumbnails/18.jpg)
NESTING COMPONENTS
![Page 19: React Overview](https://reader031.vdocuments.us/reader031/viewer/2022032114/55abe7071a28abce678b45d6/html5/thumbnails/19.jpg)
PROPERTIES
![Page 20: React Overview](https://reader031.vdocuments.us/reader031/viewer/2022032114/55abe7071a28abce678b45d6/html5/thumbnails/20.jpg)
STATE
![Page 21: React Overview](https://reader031.vdocuments.us/reader031/viewer/2022032114/55abe7071a28abce678b45d6/html5/thumbnails/21.jpg)
COMPONENT LIFECYCLE
![Page 22: React Overview](https://reader031.vdocuments.us/reader031/viewer/2022032114/55abe7071a28abce678b45d6/html5/thumbnails/22.jpg)
VIRTUAL DOM
![Page 23: React Overview](https://reader031.vdocuments.us/reader031/viewer/2022032114/55abe7071a28abce678b45d6/html5/thumbnails/23.jpg)
EVENTS
![Page 24: React Overview](https://reader031.vdocuments.us/reader031/viewer/2022032114/55abe7071a28abce678b45d6/html5/thumbnails/24.jpg)
EXAMPLES