class Codelab extends React.Component {
render(){
return (
<div>
<h1>Hello, {this.props.name}</h1>
<h2>{this.props.number}</h2>
<div>{this.props.children}</div>
</div>
);
}
}
//Prop의 타입을 Checking
Codelab.propTypes = {
name : React.PropTypes.string,
number : React.PropTypes.number.isRequired
};
//Prop에 디폴트 값을 준다.
Codelab.defaultProps = {
name : 'unknown'
};
class App extends React.Component {
render(){
return(
<Codelab name={this.props.name} number={this.props.number}>{this.props.children}</Codelab>
);
}
}
ReactDOM.render(<App name="Jeewoo" number={5}>I'm 23 years old.</App>,document.getElementById('root'));
This is Javascript Code
<div id='root'></div>
This is HTML Code