writing scalable react applications: introduction
TRANSCRIPT
Web history
React is small
Development tools
Trending
Prerequisite
Babel ▫ babel-preset-react▫ babel-preset-es2015▫ babel-plugin-transform-class-properties
What is React? ▫ No models▫ No controllers▫ No templates▫ No directives▫ No services▫ Only components
React Components
EmployeeList
JSX ▫ Syntax sugar for Javascript▫ Similar to HTML▫ Still Javascript▫ HTML attributes = JSX properties▫ Transpiled by Babel
JSX after transpile
EmployeeListItem
Lifecycle Methods
Component state
Use state in render
Add handlers
Use function passed via props
Break UI into components
Establish communication between components using props
Virtual DOM ▫ Result of render()▫ Simple object representing DOM▫ Very fast
Virtual DOM benchmarks
Render 1000 elements
Reconciliation ▫ Initial render() call▫ Save result (snapshot)▫ Update component (setState or props
change)▫ Lifecycle methods▫ Call render()▫ Compare snapshots▫ Update only changed nodes
Updating DOM node
To be continued.. ▫ Lifecycle methods▫ DOM events▫ Application structure▫ Data organization
Read this ▫ React docs▫ Presentational and Container Compon
ents▫ Higher Order Components
▫ Webpack▫ Babel
Questions?