Railsエンジニアが #React のチュートリアルの #Codepen で文句を言いながらやってみる

Tutorial

チュートリアル：React の導入 – React

Codepen が用意されている

他のことは良いからとりあえず開く！

Tic Tac Toe

どん！

そうそうまずは動かせるものがなくっちゃね。

こんぽーねんとのくらすのかたのかいそうこうぞうの

ね、こういうお題目って、本当意味わからないよね。

ここで ShoppingList は React コンポーネントのクラス、もしくは React コンポーネントの型です。コンポーネントは props（“properties” の略）と呼ばれるパラメータを受け取り、render メソッドを通じて、表示するビューの階層構造を返します。

render

ますます訳がわからなくなるよね。たぶん手を動かしたあとに戻ってきた方が良いよね。

render メソッドが返すのははあなたが画面上に表示したいものの説明書きです。React はその説明書きを受け取って画面に描画します。具体的には、render は、描画すべきものの軽量な記述形式である React 要素というものを返します。

<div>

このスペースとスラッシュの HTML要素「っぽいやつ」がどうやら react 独自記法っぽい。

という構文は、ビルド時に React.createElement('div') に変換されます。

Reactってそもそもビルドっていうプロセスがあるのかあ！

React記法はReact記法であって、あとはjsに置換してくれる感じかな。ok。

じゃあ HTML でも見てみるかあ

なにこれ汚っ

なに？チュートリアルのためにわざとこうしてるとか？

とりあえずそっ閉じしとこう

で何するんだっけ？

チューとルアルに戻るよ

あの、チュートリアルなのにこういうのね。やめてほしいんですよ。

Props経由で渡すとか。まだPropsがなにかも分かってないっていうのにね。

え、説明したって？聞いてない。聞いてない。

とりあえずこの二箇所を書き換えれば良いらしいな！

お、なんか動いた！

この時点でコード全体を見る

指示がこまかい、うんきっとこのチュートリアルを作った人は、物事を段階的に組み立てる、すごくちゃんとした人だ。

見てやろうじゃないか！

チュートアリアルにしてはコード長くない？

お、まだ TODO が残っているな？なにかさせるつもりらしいぞ。

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')
);

hey

おめでとうございます！ これで親である Board コンポーネントから子である Square コンポーネントに「props を渡す」ことができました。React では、親から子へと props を渡すことで、アプリ内を情報が流れていきます。

こういう流れを見てみればよいのか。

で Board がいて

1から9まで数字を持っていて

Square を render してるよね

で Square が props.value を描画していて

じゃこれ 2倍したら 2倍になるの？

なったなった！

これがコンポーネント指向ってやつかな！

たぶん。

以上

また明日。

チャットメンバー募集

何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

Twitter