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?