React - Basic

codepen -> JS -> babel 설정 + (react + reactDOM) 추가

 

 

 

<div id="root"></div>

class Codelab extends React.Component {
  render() {
    let text = "I'm IRONMAN"
    let style = {
      backgroundColor: "aqua"
    }
    return(
    <div style={style}>{text}</div>
    );
  }
}

class App extends React.Component {
  render() {
    return(
    <Codelab/>
    )
  }
}

ReactDOM.render(<App/>,document.querySelector("#root"))

-------------------------------------------------------------------

class Codelab extends React.Component {
  render() {
    return(
      <div>
        <div>Hello {this.props.name}</div>
        <div>{this.props.children}</div>
      </div>
    );
  }
}

class App extends React.Component {
  render() {
    return(
    <Codelab name="IRONMAN">여기 값</Codelab>
    );
  }
}

ReactDOM.render(<App/>,document.querySelector("#root"))

-------------------------------------------------------------------

class Codelab extends React.Component {
  render() {
    return(
      <div>
        <div>Hello {this.props.name}</div>
        <div>{this.props.children}</div>
      </div>
    );
  }
}

class App extends React.Component {
  render() {
    return(
    <Codelab name={this.props.name}>{this.props.children}</Codelab>
    );
  }
}

ReactDOM.render(<App name="IRONMAN"> Here it is!</App>,document.querySelector("#root"))
-------------------------------------------------------------------
import * as propTypes from "https://cdn.skypack.dev/prop-types@15.7.2";
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>
    );
  }
}

Codelab.propTypes = {
  name: PropTypes.string,
  number: PropTypes.number.isRequired
};

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 number={5}> Here it is!</App>,document.querySelector("#root"))