Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React, The Virtual DOM, and why State is Evil

Mark Funk
September 27, 2014
1.1k

React, The Virtual DOM, and why State is Evil

React coming from the viewpoint of an Angular developer.

Mark Funk

September 27, 2014
Tweet

Transcript

  1. 11:50:50 AM Mark Funk: ya, so one thing to note

    when doing this 11:50:56 AM Mark Funk: dont point stuff to a primitive 11:52:15 AM Mark Funk: eg. var x = { value: 'bob' }, var b = x.value, var c = x; if you change value 'c' would be updated but not b. Thats simple javascript but it always seems to trip people up so i thought it was worth mentioning 11:57:08 AM Mark Funk: just be safe when binding, never bind to myCoolInput, bind to myCoolInput.value 4:38:47 PM Jake Coogle: heh... yup, running in to that primitives behavior you warned me about
  2. var LeadComponent = React.createClass({ render: function() { return ( <input

    type=“text” defaultValue={this.props.defaultValue}/> ); } }); React.renderComponent( <LeadComponent defaultValue=“I love this home!”/>, document.body );
  3. var LeadComponent = React.createClass({ updateValue: function(e) { this.setState({ value: e.target.value

    }); }, render: function() { return ( <input type=“text” defaultValue={this.props.defaultValue} value={this.state.value} onChange={this.updateValue}/> ); } }); React.renderComponent( <LeadComponent defaultValue=“I love this home!”/>, document.body );
  4. var Fauxbox = require(‘boomstrap/fauxbox’); var LeadCategory = React.createClass({ updateCheckedState: function(e)

    { this.setState({ value: e.target.value }); }, render: function() { return ( <Fauxbox checked={this.state.value} onChange={this.updateCheckedState}/> ); } }); React.renderComponent( <LeadCategory />, document.getElementById(‘category’) );
  5. var LeadCategory = require(‘./leadCategory’); var LeadCategoryService = require(‘./leadCategoryService’); var LeadCategories

    = React.createClass({ render: function() { return ( <div> {this.props.categories.map(function(cat) { return <Fauxbox checked={cat.checked}/> })} </div> ); } }); React.renderComponent( <LeadCategories categories={LeadCategoryService.getCategories()} />, document.getElementById(‘leadCategories’) );
  6. JSX