React, The Virtual DOM, and why State is Evil

React coming from the viewpoint of an Angular developer.

Transcript

1. React.js The Virtual DOM, and why State is Evil
2. Angular
3. Model View Controller
4. Two way Data Binding
5. <input type=“text” ng-model=“leadComment”> $scope.leadComment = “Love this home!”;
6. Dependency Injection
7. angular.module(‘leadProfile’) .controller(‘leadCtrl’, function(leadService) { leadService.getLeadInformation(); });
8. Directives
9. <bt-score score=“myScore” equal></bt-score> $scope.myScore = “72”
10. PITFALLS
11. TWO WAY DATA BINDING
12. Two way Data Binding is confusing
13. Two way Data Binding creates a web
14. Two way Data Binding is not magic
15. Two way Data Binding isn’t
16. 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
17. DEPENDENCY INJECTION
18. DIRECTIVES
19. COMPLEX API
20. GLOBAL NAMESPACE
21. <bt-score /> <bt-property-card /> <bt-lead-category /> <bt-pager /> <bt-loader /> <bt-body-loader />
22. CAN BE SLOW AS F*%&
23. There’s got to be a better way
24. React
25. Model View Controller
26. [with tables]
27. Party Like It’s 1999
28. One way Data Binding
29. Everything is a component
30. Composable
31. Always Re-render
32. Virtual DOM
33. The real DOM is SLOW.
37. The Virtual DOM is FAST.
38. Just Javascript [mostly]
39. var LeadComponent = React.createClass({ render: function() { return ( <input type=“text” defaultValue={this.props.defaultValue}/> ); } }); React.renderComponent( <LeadComponent defaultValue=“I love this home!”/>, document.body );
40. Data flows one way
41. Props n’ State
42. 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 );
43. Modules
44. 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’) );
45. Dependency Injection Global Namespace
46. Dependency Injection Global Namespace
47. ng-repeat for what?
48. 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’) );
49. JSX
50. JSX is optional
51. Simple Declarative Predictable
52. Give it Five Minutes