writing scalable react applications: introduction
TRANSCRIPT
![Page 1: Writing Scalable React Applications: Introduction](https://reader036.vdocuments.site/reader036/viewer/2022062503/58cea5901a28abb26e8b5fe1/html5/thumbnails/1.jpg)
![Page 2: Writing Scalable React Applications: Introduction](https://reader036.vdocuments.site/reader036/viewer/2022062503/58cea5901a28abb26e8b5fe1/html5/thumbnails/2.jpg)
Web history
![Page 3: Writing Scalable React Applications: Introduction](https://reader036.vdocuments.site/reader036/viewer/2022062503/58cea5901a28abb26e8b5fe1/html5/thumbnails/3.jpg)
React is small
![Page 4: Writing Scalable React Applications: Introduction](https://reader036.vdocuments.site/reader036/viewer/2022062503/58cea5901a28abb26e8b5fe1/html5/thumbnails/4.jpg)
Development tools
![Page 5: Writing Scalable React Applications: Introduction](https://reader036.vdocuments.site/reader036/viewer/2022062503/58cea5901a28abb26e8b5fe1/html5/thumbnails/5.jpg)
Trending
![Page 6: Writing Scalable React Applications: Introduction](https://reader036.vdocuments.site/reader036/viewer/2022062503/58cea5901a28abb26e8b5fe1/html5/thumbnails/6.jpg)
Prerequisite
![Page 7: Writing Scalable React Applications: Introduction](https://reader036.vdocuments.site/reader036/viewer/2022062503/58cea5901a28abb26e8b5fe1/html5/thumbnails/7.jpg)
Babel ▫ babel-preset-react▫ babel-preset-es2015▫ babel-plugin-transform-class-properties
![Page 8: Writing Scalable React Applications: Introduction](https://reader036.vdocuments.site/reader036/viewer/2022062503/58cea5901a28abb26e8b5fe1/html5/thumbnails/8.jpg)
What is React? ▫ No models▫ No controllers▫ No templates▫ No directives▫ No services▫ Only components
![Page 9: Writing Scalable React Applications: Introduction](https://reader036.vdocuments.site/reader036/viewer/2022062503/58cea5901a28abb26e8b5fe1/html5/thumbnails/9.jpg)
React Components
![Page 10: Writing Scalable React Applications: Introduction](https://reader036.vdocuments.site/reader036/viewer/2022062503/58cea5901a28abb26e8b5fe1/html5/thumbnails/10.jpg)
EmployeeList
![Page 11: Writing Scalable React Applications: Introduction](https://reader036.vdocuments.site/reader036/viewer/2022062503/58cea5901a28abb26e8b5fe1/html5/thumbnails/11.jpg)
JSX ▫ Syntax sugar for Javascript▫ Similar to HTML▫ Still Javascript▫ HTML attributes = JSX properties▫ Transpiled by Babel
![Page 12: Writing Scalable React Applications: Introduction](https://reader036.vdocuments.site/reader036/viewer/2022062503/58cea5901a28abb26e8b5fe1/html5/thumbnails/12.jpg)
JSX after transpile
![Page 13: Writing Scalable React Applications: Introduction](https://reader036.vdocuments.site/reader036/viewer/2022062503/58cea5901a28abb26e8b5fe1/html5/thumbnails/13.jpg)
EmployeeListItem
![Page 14: Writing Scalable React Applications: Introduction](https://reader036.vdocuments.site/reader036/viewer/2022062503/58cea5901a28abb26e8b5fe1/html5/thumbnails/14.jpg)
Lifecycle Methods
![Page 15: Writing Scalable React Applications: Introduction](https://reader036.vdocuments.site/reader036/viewer/2022062503/58cea5901a28abb26e8b5fe1/html5/thumbnails/15.jpg)
Component state
![Page 16: Writing Scalable React Applications: Introduction](https://reader036.vdocuments.site/reader036/viewer/2022062503/58cea5901a28abb26e8b5fe1/html5/thumbnails/16.jpg)
Use state in render
![Page 17: Writing Scalable React Applications: Introduction](https://reader036.vdocuments.site/reader036/viewer/2022062503/58cea5901a28abb26e8b5fe1/html5/thumbnails/17.jpg)
Add handlers
![Page 18: Writing Scalable React Applications: Introduction](https://reader036.vdocuments.site/reader036/viewer/2022062503/58cea5901a28abb26e8b5fe1/html5/thumbnails/18.jpg)
Use function passed via props
![Page 19: Writing Scalable React Applications: Introduction](https://reader036.vdocuments.site/reader036/viewer/2022062503/58cea5901a28abb26e8b5fe1/html5/thumbnails/19.jpg)
Break UI into components
Establish communication between components using props
![Page 20: Writing Scalable React Applications: Introduction](https://reader036.vdocuments.site/reader036/viewer/2022062503/58cea5901a28abb26e8b5fe1/html5/thumbnails/20.jpg)
Virtual DOM ▫ Result of render()▫ Simple object representing DOM▫ Very fast
![Page 21: Writing Scalable React Applications: Introduction](https://reader036.vdocuments.site/reader036/viewer/2022062503/58cea5901a28abb26e8b5fe1/html5/thumbnails/21.jpg)
Virtual DOM benchmarks
![Page 22: Writing Scalable React Applications: Introduction](https://reader036.vdocuments.site/reader036/viewer/2022062503/58cea5901a28abb26e8b5fe1/html5/thumbnails/22.jpg)
Render 1000 elements
![Page 23: Writing Scalable React Applications: Introduction](https://reader036.vdocuments.site/reader036/viewer/2022062503/58cea5901a28abb26e8b5fe1/html5/thumbnails/23.jpg)
Reconciliation ▫ Initial render() call▫ Save result (snapshot)▫ Update component (setState or props
change)▫ Lifecycle methods▫ Call render()▫ Compare snapshots▫ Update only changed nodes
![Page 24: Writing Scalable React Applications: Introduction](https://reader036.vdocuments.site/reader036/viewer/2022062503/58cea5901a28abb26e8b5fe1/html5/thumbnails/24.jpg)
Updating DOM node
![Page 25: Writing Scalable React Applications: Introduction](https://reader036.vdocuments.site/reader036/viewer/2022062503/58cea5901a28abb26e8b5fe1/html5/thumbnails/25.jpg)
To be continued.. ▫ Lifecycle methods▫ DOM events▫ Application structure▫ Data organization
![Page 26: Writing Scalable React Applications: Introduction](https://reader036.vdocuments.site/reader036/viewer/2022062503/58cea5901a28abb26e8b5fe1/html5/thumbnails/26.jpg)
Read this ▫ React docs▫ Presentational and Container Compon
ents▫ Higher Order Components
▫ Webpack▫ Babel
![Page 27: Writing Scalable React Applications: Introduction](https://reader036.vdocuments.site/reader036/viewer/2022062503/58cea5901a28abb26e8b5fe1/html5/thumbnails/27.jpg)
Questions?