리액트 교과서 - 리액트 첫걸음

/* 기본 */

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

/* 여러 요소를 표현하기 */
/* CreateElement - https://reactjs.org/docs/react-api.html#createelement */

let h1 = React.createElement('h1', null, 'Hello World');
ReactDOM.render(
  React.createElement('div', null, h1, h1),
  document.getElementById('root')
);

/* 여러 요소를 표현하기 - 컴포넌트 기반 */
class HelloWorld extends React.Component {
  render() {
    return React.createElement('h1', null, 'Hello, World!')
  }
}

ReactDOM.render(
  React.createElement(
    'div', 
    null,          
    React.createElement(HelloWorld),
    React.createElement(HelloWorld)
  ),
  document.getElementById('root')
);

/* 속성 전달하기 - Hello  '이름' 표현하기 */
/* #Template Literal - https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals
*/

class HelloWorld extends React.Component {
  render() {
    console.log(this.props); 
    return React.createElement('h1', null, `Hello ${this.props.name}`)
  }
}

ReactDOM.render(
  React.createElement(
    'div', 
    null,          
    React.createElement(HelloWorld, { name: 'kim' }),
    React.createElement(HelloWorld, { name: 'yoon'})
  ),
  document.getElementById('root')
);


/* JSX 사용하기 */
class HelloWorld extends React.Component {
  render() {
    console.log(this.props); 
    return (
      <h1>Hello {this.props.name}</h1>
    )
  }
}

ReactDOM.render(
  <div>
    <HelloWorld name='kim' />
    <HelloWorld name='yoon' />
  </div>,
  document.getElementById('root')
);