36 lines
847 B
JavaScript
36 lines
847 B
JavaScript
// I use this syntax when my component fits on one line
|
|
const ListItem = props => <li className="list-item">{props.item.name}</li>
|
|
|
|
// I use this when my component has no logic outside JSX
|
|
const List = ({ items }) => (
|
|
<ul className="list">{items.map(item => <ListItem item={item} />)}</ul>
|
|
)
|
|
|
|
// I use this when the component needs logic outside JSX.
|
|
const Body = props => {
|
|
let items = transformItems(props.rawItems)
|
|
return (
|
|
<div>
|
|
<h1>{props.header}</h1>
|
|
<List items={items} />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const Foo = () => <div>
|
|
<div></div>
|
|
</div>
|
|
|
|
// This is equivalent to the last example
|
|
function Page(props, context) {
|
|
return (
|
|
<div>
|
|
<Body header="My List" rawItems={props.rawItems} />
|
|
</div>
|
|
)
|
|
}
|
|
// propTypes and contextTypes are supported
|
|
Page.propTypes = {
|
|
rawItems: React.PropTypes.array.isRequired
|
|
}
|