• A component renders itself.
  
• If you have data you want rendered as part of it, you include it in that component's props.
  
• Props should (in general) only come from a parent component.
  
• If data is going to change, that change should take place in the state of the component that "owns" the data.
  
• This means that the component who holds the data and is listening for changes to the data is not the one that renders the data.
  

var App = React.createClass({
	getInitialState: function () {
		return {items: []}
	},
	render: function () {
		return ( <List data={this.state.items} />);
	}
});

var List = React.createClass({
	render: function() {
		var items = this.props.data.map(function (item) {
			return <li>An Item: {item.name}</li>
		});
		return (
			<ul>{items}</ul>
		);
	}
	// that's it! I don't know squat about the model, I just get a list passed into me
});

• App uses Ajax to fetch data from the server: it updates its own state with the new list.
  
• App handles adding a new item. It updates its own state with the new list
  
• App handles removing a new item. It updates it's own state with the new list.
  

Lumpy fucked around with this message at 15:28 on Jan 26, 2015

Lumpy fucked around with this message at 13:21 on Jan 30, 2015

Only registered members can see post attachments!

Lumpy fucked around with this message at 22:51 on Apr 19, 2015