![var App = React.createClass({
getInitialState: function() {
return {
filter: '',
items: [
{label: "Foo", active: false}
// more items ...
]
}
},
render: function() {
// do something ...
}
});
React.render(<App/>, window.app);](https://image.slidesharecdn.com/componentbasedthinking-150516101630-lva1-app6892/85/Thinking-in-Components-Comparing-AngularJS-With-React-16-320.jpg)
![var ItemList = React.createClass( /* ... */ );
angular.module('app', ['react'])
.directive('itemList', function(reactDirective) {
return reactDirective(ItemList);
});
});](https://image.slidesharecdn.com/componentbasedthinking-150516101630-lva1-app6892/85/Thinking-in-Components-Comparing-AngularJS-With-React-24-320.jpg)
Ad
More Related Content
What's hot (10)
Similar to Thinking in Components - Comparing AngularJS With React (20)
Ad
Recently uploaded (20)
![Get & Download Wondershare Filmora Crack Latest [2025]](https://cdn.slidesharecdn.com/ss_thumbnails/revolutionizingresidentialwi-fi-250422112639-60fb726f-250429170801-59e1b240-thumbnail.jpg?width=560&fit=bounds)
Ad
Thinking in Components - Comparing AngularJS With React
- 1. THINKING IN COMPONENTS COMPARING ANGULARJS WITH REACT S. Oestreicher A. Sharif @thinkfunctional @sharifsbeat
- 2. www.25th-floor.com 25th-floor Agile / Scrum Product Development, Consulting 2+ years AngularJS in production
- 4. WHY TO AVOID ngCONTROLLER No Isolation Hard To Test Not Composable Tight Coupling Uncontrolled Mutation
- 7. DIRECTIVES
- 9. <div class="main"> <search-box on-change="ctrl.updateFilter(search, active)"></search-box> <items-list data-title="Active Items" data-items="ctrl.activeItems" data-on-click="ctrl.switchStatus(item)"></items-list> <items-list data-title="Inactive Items" data-items="ctrl.inactiveItems" data-on-click="ctrl.switchStatus(item)"></items-list> </div>
- 10. app.directive('itemsList', function() { return { scope: { title: '@', items: '=', onClick: '&' }, restrict: 'EA', controller: function() {}, controllerAs: 'ctrl', bindToController: true, templateUrl: 'items-list.html' } });
- 11. <div class="items-list"> <h3>{{ctrl.title}}</h3> <span ng-if="ctrl.items.length == 0">No items available.</span> <ul class="items"> <li ng-repeat="item in ctrl.items"> <item data-set="item" on-click="ctrl.onClick({item: item})"></item> </li> </ul> </div>
- 12. LIMITATIONS More Code To Write Inherently Mutation Based Still Tightly Coupled
- 13. REACT
- 14. RETHINKING BEST PRACTICES Separation Of Technologies One-Directional Data Flow Immutability Re-render On Every Change
- 16. var App = React.createClass({ getInitialState: function() { return { filter: '', items: [ {label: "Foo", active: false} // more items ... ] } }, render: function() { // do something ... } }); React.render(<App/>, window.app);
- 17. render: function() { var filter = this.state.filter.toLowerCase(); var items = this.state.items.filter(item => _.includes(item.label.toLowerCase(), filter) ); var active = items.filter(item => item.active); var inactive = items.filter(item => !item.active); return ( <div> <Searchbar onChange={this.handleSearch}/> <h3>Active</h3> <ItemList items={active} onClick={this.handleClick}/> <h3>Inactive</h3> <ItemList items={inactive} onClick={this.handleClick}/> </div> ); }
- 18. handleClick: function(item) { // this is not recommended, better to use immutable! item.active = !item.active; this.forceUpdate(); }, handleSearch: function(text) { this.setState({filter: text}); },
- 19. var ItemList = React.createClass({ render: function() { var items = this.props.items; if (items.length == 0) { return <p>No items available.</p> } return ( <ul> {items.map((item, index) => <Item key={index} onClick={this.props.onClick} item={item} />)} </ul> ); } });
- 20. REACT SUMMARY Components all the way down No assumptions about your stack Plain JavaScript. No DSLs, just syntax sugar. ES6, Browserify/Webpack, ClojureScript etc.
- 21. ANGULARJS / REACT Data-Heavy/Realtime Apps Large Applications Eco System React Is Just The View
- 22. COMBINING ANGULAR AND REACT
- 23. ngREACT Migration Path Performance Optimization Connecting Both Frameworks
- 24. var ItemList = React.createClass( /* ... */ ); angular.module('app', ['react']) .directive('itemList', function(reactDirective) { return reactDirective(ItemList); }); });
- 26. QUESTIONS
- 27. THANK YOU.