React Tutorial 終わるまでねれま10と思ったがOverviewまでで寝ます

経緯

webアプリやポートフォリオのためにフロントエンドを少しはやっておきたい
SPAカッコイイなあ
何を血迷ったか「React ビギナーズガイド」を購入
全然わからんちんなのでとりあえず公式のチュートリアルをやってみよう

注意

自分用のメモ&進むほど疲れの見える文章になっているのはご了承ください。どしどしご指摘お願いします。

ということでReactの公式チュートリアル（英語）

reactjs.org

ここでは小さなゲーム（ Tic Tac Toe ）を作っていきながらReactで様々なアプリを作っていく上での基礎を身につけようという趣旨となっています。

流れとしては

Setup for the Tutorial -チュートリアルを進めていく上での事始め
Overview -Reactの基礎を学ぼう（components, props, state）
Completing the Game -React開発におけるもっとも一般的な技術を学ぼう
Adding Time Travel -Reactを有効に使うためのより深い理解をしよう

Before We Start the Tutorial

このチュートリアルを始める前にHTML, JavaScriptといった言語や、関数、オブジェクト、配列に関する最低限の理解はあった方が良さそう。

ちなみに僕の場合は

HTML タグくらいはわかるがコーディングしていく手順などはあまりわかっていない。
JavaScript Progateで一通り勉強した程度。jQueryも少々。
フロントではないがPythonを少し使ったりする。

といったところでしょうか。

Setup for the Tutorial

こちらのStarter CodeがTic Tac Toeの元となるコードです。 Code Penかローカルで編集できるようにしておきましょう。

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

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

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

Overview

Reactってなーに？

ReactはUIを作成するためのJavaScriptのライブラリで、複雑なUIをcomponentsと呼ばれる小さな部品で効率的に組み立てていくことができます。

Reactにはいくつかの種類のcomponentsがあります。

React.Component:

class ShoppingList extends React.Component {
  render() {
    return (
      <div className="shopping-list">
        <h1>Shopping List for {this.props.name}</h1>
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
        </ul>
      </div>
    );
  }
}

// Example usage: <ShoppingList name="Mark" />

このようなXML風の書き方で表現するができます。ここでのShoppingListはReact component classといいprop（propertiesの略）というパラメータを引き受け、renderメソッドでブラウザ上に表示します。

Reactとは独立した別物ですが、JSXという特殊なシンタックスを使うと、

return React.createElement('div', {className: 'shopping-list'},
  React.createElement('h1', /* ... h1 children ... */),
  React.createElement('ul', /* ... ul children ... */)
);

こんな感じで簡略化することもできます。

Inspecting the Starter Code

OXゲームで使うcomponent（UI部品）は

Square（マス）
Board（外枠）
Game（その他）

となっています。

Propsを使ってデータを通す

BoardクラスとSquareクラスの間でデータを通したければpropsを使おう。

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

.
.
.

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

propsを通してボードを分割したときに割り振られた値がSquareクラスに届きました。

インタラクティブなComponentを作る

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

Squareがクリックされた時のアクションを作るにはstateを使おう。もちろんアロー関数も対応していますね。

サブクラスとしてstateを定義するconstructor()をrender()と並べます。この時必ずsuper(props);を忘れない。必ずconstructorサブクラスはsuper()で始まらないといけないらしい。

class Square extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: null,
    };
  }

  render() {
    return (
      <button className="square" onClick={() => this.setState({value: 'X'})}>
        {this.props.value}
      </button>
    );
  }
}

stateを更新するときはsetState()を使います。

Overviewまとめ

component...UIを作るパーツ constructor...stateやpropsを定義するよ props..component間で値を受け渡す state...component内の状態を更新

render...何を書き出したいのか教える

やっぱjQueryを先にしっかりやったほうがいいのか
なんか掴みそうで掴みきれない➡️JSの知識不足？

今後の予定としては、改めて本を読み直すor

React 入門チュートリアル② - Qiita

Short, instructional screencast video tutorials for web developers on @eggheadio

https://goodpatch.com/blog/react-study/

ここらを参考にしてみるか？

自分の分身を作りたい

理系の大学院生だよ