Front End Dev
@
Mirador Financial
Twitter: @browniefed
Github: @browniefed
Email: browniefed@gmail.com
var HelloMessage = React.createClass({
render: function() {
return (
<div>
Hello {this.props.name}
</div>
);
}
});
React.render(<HelloMessage name="John" />, mountNode);
var HelloMessage = React.createClass({displayName: "HelloMessage",
render: function() {
return React.createElement("div", null, "Hello ", this.props.name);
}
});
React.render(React.createElement(HelloMessage, {name: "John"}), mountNode);
<div>
Hello John
</div>
var HelloMessage = React.createClass({
render: function() {
return (
<div>
Hello {this.props.name}
</div>
);
}
});
React.render(<HelloMessage name="John" />, document.body);
React.render(<HelloMessage name="Jason" />, document.body);
<div>
Hello John
</div>
<div>
Hello Jason
</div>
div.textContent = "Hello Jason"
Diffing?
<App>
<Header>
<Nav />
</Header>
<Content>
<Post>
<PostContent id="1"/>
<PostComments id="1"/>
</Post>
</Content>
</App>
{
handleClick: function() {
},
render: function() {
return (
<button onClick={this.handleClick}>Save...</button>
)
}
}
var people = [
{ id: 1, name: 'Pete Hunt' },
{ id: 2, name: 'Ryan Florence'},
{ id: 3, name: 'Christopher Chedeau'}
];
{
getPeople: function() {
return people.map(function(person) {
return (
<li>{person.name}</li>
)
});
},
render: function() {
return (
<ul>
{this.getPeople()}
</ul>
)
}
}
Each child in an array should have a unique "key" prop. Check the render method of HelloMessage.
See http://fb.me/react-warning-keys for more information.
var people = [
{ id: 1, name: 'Pete Hunt' },
{ id: 2, name: 'Ryan Florence'},
{ id: 3, name: 'Christopher Chedeau'}
];
{
getPeople: function() {
return people.map(function(person) {
return (
<li key={person.id}>{person.name}</li>
)
});
},
render: function() {
return (
<ul>
{this.getPeople()}
</ul>
)
}
}
http://www.meetup.com/Portland-ReactJS/