Understanding
React

 slid.es/w33ble/understanding-react 

Created By


Joe Fleming
@w33ble

We'll Cover

  • Where React fits
  • React internals
  • Example components

Where React Fits

React isn't an MVC framework.
  • Reactive view library
  • Create reusable UI components
  • Composable user interfaces

Declarative Programming

Expresses the logic of a computation without describing its control flow
Example: A SQL Query

Dataflow Programming

Emphasizes the movement of data and models programs as a series of connections
Example: An assembly line

Reactive Programming

Oriented around data flows and the propagation of change
Example: A Spreadsheet

Why reactive programming?

  • Self-updating components
  • Decoupled components
  • Less code
  • Less errors
  • Faster development

React Internals



The Virtual DOM

Why a Virtual DOM?


  • Only sends updates
  • Reduces repaints & reflows
  • Visible speed increase

Repaints

Whenever an element's visible state is changed without altering the layout of the document
  • Display, visibility, .hide(), .show()
  • Changing the background color
  • Adding/removing a border
  • Changing font size or styling

Reflows

When the render engine calculates positions and geometries of elements in the document
  • DOM tree change
  • Style affecting the layout
  • Changing the className
  • Resizing the window
Then it's all repainted

Sub-tree Rendering


 

Selective Sub-Tree Rendering


Requires custom shouldComponentUpdate()

React Internals



Batching Updates

Why Batch Updates?

  • Less repaints & reflows

React Components

React doesn't use templates
  • Javascript to render markup
  • Unifies markup and view logic
  • No needless separation of technologies

It's all Javascript
...but, JSX?!

About JSX

JSX is a JavaScript XML syntax transform
  • Similar to HTML
  • Generates Javascript
  • Syntactic sugar
  • Optional extension

JSX

// COMPONENT CODE/** @jsx React.DOM */
var HelloMessage = React.createClass({
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});
// APPLICATION CODEvar el = document.querySelector('#output');React.renderComponent(<HelloMessage name="Joe" />, el);

Javascript

// COMPONENT CODEvar HelloMessage = React.createClass({
  render: function() {
    return React.DOM.div({}, "Hello ", this.props.name);
  }
});
// APPLICATION CODE
var el = document.querySelector('#output');React.renderComponent(HelloMessage({name: "Joe"}), el);

Coffeescript

# COMPONENT CODE{div} = React.DOMHelloMessage = React.createClass
  render: ->
    div {}, "Hello ", this.props.name
# APPLICATION CODEel = document.querySelector('#output');React.renderComponent HelloMessage(name: "Joe"), el

Use State

When event handlers may change to trigger a UI update

  • Keep components as stateless as possible
  • Minimal amount of data needed to represent your app
  • Delegate as much as possible to parent components

Avoid State

as much as possible

  • Computed data
  • Other React components
  • Don't duplicate this.props

What About Application Data?

Use Props
  • Pass data from parent to child
  • Useful for static rendering

Component Construction

Thinking in React

  • Break UI into reusable components
  • Determine how data is passed around
  • Wire everything up

Component Breakdown


Data Flow


Time for Code!

Understanding React Examples

Thanks!

Twitter: @w33ble
Github: w33ble

Credits

Made with Slides.com