React.js Internals with Nick Niemeir

Thu, Sep 4, 2014 – In JavaScript you create a virtual DOM, react diffs changes between the last virtual DOM and the next, mutating the real DOM only as necessary to reflect the changes. This has huge implications for cognitive overhead as well as performance. We are going to enter the source where that virtual DOM gets created using calls to `React.DOM[element](attributes, contents)`

Hangout Notes

React: a robust functional view layer.

View code and templating are combined as JavaScript.

In JavaScript you create a virtual DOM, react diffs changes between the last virtual DOM and the next, mutating the real DOM only as necessary to reflect the changes. This has huge implications for cognitive overhead as well as performance.

We are going to enter the source where that virtual DOM gets created using calls to React.DOM[element](attributes, contents)

Example usage


var React = require('react')
  , d = React.DOM // Alias React.DOM for easier typing

var vDom =
  d.div({className: 'conainer'}
    , d.div({className: 'contents'},
      { start: d.p({}, 'Foo, bar, baz')
      , middle: d.a({href: 'http://github.com'}, 'github')
      , end: d.p({}, ['Weee', 'eeeeeee', 'eeee'])
      }
    )
  )

console.log(JSON.stringify(vDom, null, 2))

Creating the template interface- https://github.com/facebook/react/blob/master/src/browser/ReactDOM.js#L45

The actual function called for a tag (eg. React.DOM.div)- https://github.com/facebook/react/blob/master/src/core/ReactDescriptor.js#L136-188

Mixed in component pieces- https://github.com/facebook/react/blob/master/src/core/ReactComponent.js#L217

https://github.com/facebook/react/blob/master/src/core/ReactMultiChild.js#L178 Util to traverse all children- https://github.com/facebook/react/blob/master/src/utils/traverseAllChildren.js#L185

https://github.com/facebook/react/blob/master/src/browser/ui/ReactBrowserComponentMixin.js

If you were here, they'd be clicking and tapping.
Contact us to find out about being a sponsor.

Just updates on hangouts. No spam. No one else gets your email.