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

results matching ""

    No results matching ""