Let's dig further into components and master them. We'll look at component composition and ownership. Learning this will help us build complex reactive UIs that are easier to manage.
Composability is a feature that lets you use a component inside another component's render method.
Let's look at a basic example of component composition. First, create a new container element. To do so, place the following code in the body tag:
<div id="container5"></div>
Here is the component composition example code. Place this code in the script tag that's compiled by Babel:
var ResponsiveImage = React.createClass({
render: function(){
var imgWidth = {
width: "100%"
}
return (
<img src={this.props.src} style={imgWidth} />
)
}
})
var Card = React.createClass({
render: function(){
var CardContainerStyle = {
maxWidth: 300,
backgroundColor: "grey"
}
return (
<div style={CardContainerStyle...