Más contenido relacionado Similar a Components in AngularJS and React (20) 4. WHY TO AVOID ngCONTROLLER
No Isolation
Hard To Test
Not Composable
Tight Coupling
Uncontrolled Mutation
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>
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 items = this.state.items ...
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. 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>
);
}
});
19. REACT SUMMARY
Components all the way down
No assumptions about your stack
Plain JavaScript. No DSLs, just syntax sugar.
ES6, Browserify/Webpack, ClojureScript etc.
23. var ItemList = React.createClass( /* ... */ );
angular.module('app', ['react'])
.directive('itemList', function(reactDirective) {
return reactDirective(ItemList);
});
});
