Portfolio


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>리액트 1분만에 추가해보기!</title>
  </head>
  <body>
    <h1>내 html에 리액트 1분만에 추가해보기!</h1>
    <p>단 1분만에 설치없이 리액트를 추가할 수 있다구요?</p>
  </body>
</html>


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>리액트 1분만에 추가해보기!</title>
  </head>
  <body>
    <h1>내 html에 리액트 1분만에 추가해보기!</h1>
    <p>단 1분만에 설치없이 리액트를 추가할 수 있다구요?</p>
		<!-- 추가된 <div> -->
    <div id="root"></div>
  </body>
</html>



<!-- ... 기존의 html ... -->
	
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script> 
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<script src="hello_button.js"></script>
</body>


// react 컴포넌트 정의하기
const el = React.createElement;

class HelloButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = { liked: false };
  }

  render() {
    if (this.state.liked) {
      return 'Hello World!';
    }

    return el(
      'button',
      { onClick: () => this.setState({ liked: true }) },
      'Hello'
    );
  }
}


const domContainer = document.querySelector('#root');
ReactDOM.render(el(LikeButton), domContainer);


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>리액트 1분만에 추가해보기!</title>
  </head>
  <body>
    <h1>내 html에 리액트 1분만에 추가해보기!</h1>
    <p>단 1분만에 설치없이 리액트를 추가할 수 있다구요?</p>
    <div id="root"></div>

	
    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script> 
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
		<script src="hello_button.js"></script>
  </body>
</html>

index.html


// react 컴포넌트 정의하기
const el = React.createElement;

class HelloButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = { liked: false };
  }

  render() {
    if (this.state.liked) {
      return 'Hello World!';
    }

    return el(
      'button',
      { onClick: () => this.setState({ liked: true }) },
      'Hello'
    );
  }
}

// DOM에 리액트 컴포넌트 랜더링하기
const domContainer = document.querySelector('#root');
ReactDOM.render(el(HelloButton), domContainer);

hello_button.js


return el(
      'button',
      { onClick: () => {
          this.setState({ liked: true });
          for (let i = 0; i < 10; i++) {
            console.log(`hello world ${i}`);            
          }
        } 
      },
      'Hello'
    );