보글보글 하면 거의 다 나오죠?

이거, 이거.

HTML CSS JS용 3개

Js 말고는 안 좋은 얘기가 없었던 것 같아요.

js

class Button extends React.Component {
  constructor() {
    super();
    this.state = {
      count: 1,
    };
  }

  updateCount() {
    this.setState((prevState, props) => {
      return { count: prevState.count + 1 }
    });
  }

  render() {
    return (<button
              onClick={() => this.updateCount()}
            >
              Clicked {this.state.count} times
            </button>);
  }
}

React.render(<Button />, document.getElementById('app'));

포크면 자기가 쓰는 URL을 마음대로 할당할 수 있어요!

https://codepen.io/yumainaura/pen/eoKMwm?editors=0110

버튼을 누르면 숫자가 늘어나겠죠.

조금씩 6 까지 밀었어요!

아무래도 construction이 초기값을 결정하는 것 같아!

카운트1이라고 쓰여 있어요.

업데이트 카운트라는 방법이 있어요!

부르는 방법이요?몰라요.
prevState.count에게 "+1"이라고 말하지 마!

렌더라고 쓰여있는 건 버튼 표시 부분이죠!

변수가 칼날로 둘러싸여 있는 것 같아요.{this.state.count}

이렇게 하면 당연히 나란히 쓸 수 있지!

줄서기 시작합니다!

일단 Codepen Save->Run을 사용하세요.

여기도 늘면 하나씩 3개씩 늘지 않을까!

좋진 않지만 예전처럼 움직이는 것 같아.신비롭네.

그럼 마지막 렌더는 뭐예요?

HTML 닫기처럼 보입니다.
그리고 HTML 쪽 아이디는 다 맡긴 것 같은데?

이 이름을 바꾸면 버튼도 안 나올 것 같은데!

설마 이 맨 위에 있는 반 이름이야?

확실히 두 이름을 적절하게 바꾸려 한다면 그대로 행동할 수 없다!
HTML 부품에 클래스 이름까지 써야 돼요!확실히 Button일 때는 글자가 대문자였어요.
소문 그대로네요, 리얼 씨!

그러므로

한순간에 건드리면 못하는 의식을 극복할 수 있다고!
프론트 데스크에 따라 개발되면 구글로 코드펜을 만져보세요!

Original by Github issue