Rails 엔지니어가 #React의 튜토리얼 #Codepen에서 불평하면서 해요.

Tutorial

자습서: React 가져오기 – React

Codepen을 준비했습니다.

다른 일은 다 좋으니 먼저 열어라!

Tic Tac Toe

펑!

옳지, 우선 움직일 수 있는 게 있어야 해.

여러 해 동안 지연되어 온 구조

아, 이런 제목은 정말 무슨 뜻인지 모르겠어요.
ShoppingList는 React 구성 요소의 범주 또는 React 구성 요소의 유형입니다.구성 요소는properties ("properties"의 약칭) 라고 불리는 파라미터를 수신하고render 방법을 통해 표시할 보기의 차원 구조를 되돌려줍니다.

render

점점 이유를 모르겠어요.아마 손을 댄 다음에 돌아오는 게 좋을 거예요.
render 방법은 화면에 표시하고 싶은 물건의 설명서를 되돌려줍니다.React는 이 설명을 받아서 화면에 그립니다.구체적으로 말하면render는 가벼운 설명 형식인 React 요소를 되돌려줍니다.

<div>

이 공간과 슬라쉬의 HTML 요소인'좋은 남자'는 마치 리얼리티 독기법인 것 같다.
이러한 구문은 작성할 때 React입니다."div"로 변환합니다.
React 원래 구축이 있었구나!
리액트 기법은 리액트 기법이고 그 다음에 js로 대체하는 느낌이죠.ok.

그럼 HTML로 가볼게요.

이게 무슨 더러운 거야.
뭐?레슨을 위해서 일부러 이러는 거예요?

아무튼 일단 이렇게 감아주세요.

그럼 뭐 했지?

루아루로 돌아가기

저기, 튜토리얼인데 이래요.나는 네가 멈추기를 바란다.
Proops를 통해서 전달하거나.프로포즈가 뭔지도 모르면서
에이, 설명했어?안 들었어.안 들었어.

어쨌든 이 두 곳을 고쳐 쓰면 돼!

어, 왜 움직여!

전체 코드 보기

지시가 매우 세밀하다. 응, 틀림없이 이 강좌를 만든 사람이고 매우 차원적으로 사물을 조직하고 매우 진지한 사람이다.

어디 보자!

튜토리얼로는 코드가 길지 않나요?
오, 토도 남았나?뭐 좀 시키려는 것 같은데.

class Square extends React.Component {
  render() {
    return (
      <button className="square">
        {this.props.value}
      </button>
    );
  }
}

class Board extends React.Component {
  renderSquare(i) {
    return <Square value={i} />;
  }

  render() {
    const status = 'Next player: X';

    return (
      <div>
        <div className="status">{status}</div>
        <div className="board-row">
          {this.renderSquare(0)}
          {this.renderSquare(1)}
          {this.renderSquare(2)}
        </div>
        <div className="board-row">
          {this.renderSquare(3)}
          {this.renderSquare(4)}
          {this.renderSquare(5)}
        </div>
        <div className="board-row">
          {this.renderSquare(6)}
          {this.renderSquare(7)}
          {this.renderSquare(8)}
        </div>
      </div>
    );
  }
}

class Game extends React.Component {
  render() {
    return (
      <div className="game">
        <div className="game-board">
          <Board />
        </div>
        <div className="game-info">
          <div>{/* status */}</div>
          <ol>{/* TODO */}</ol>
        </div>
      </div>
    );
  }
}

// ========================================

ReactDOM.render(
  <Game />,
  document.getElementById('root')
);