【マルバツゲーム】盤面を描画するの巻

・JSXの構文の中に波かっこ{}を使うと、JavaScriptの式が書けます。つまり、変数(プロパティ)を参照したり、関数(メソッド)が呼び出せるのです。

・Js・CSSが読み込めてない →えっていうかそもそもHTMLの知識なのでは

いまだにフォルダ構成とCSSの関係がよくわかっていない…

→ ☆chromeにreact用の拡張があるのでこれ使いました。https://qiita.com/pepo/items/beccd5f1e83ce2b93376

・このサイトのこの考え方超重要 「よくある効かないcssの原因」

  ①外部CSSファイル自体がそもそも読み込めていない

  ②idなのかclassなのか

  ③名前の付け方があっているかの確認

  ④そのcssの優先順位があっているかの確認

  ⑤cssの記述が全角文字や書式のミスで動いていない
  …

  書いた人は絶対頭イイ
    http://www.tecblo.com/other/1475.html

→ 外部ファイル化せずべた書きしたら通りましたー。 なんだそれ…

属性は変数としてコンポーネントのpropsプロパティに納められます.

例のサイト様の章立てに沿って書いてみました。

■01 コードを書く前に素材を整える

■02 マス目の要素をつくってページに差し込む

■03 9マスの盤面を組み立てる

 [ 
 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} />;
    }
]

■04 クリックしたマス目に印をつける

[・ECMAScript 6には、アロー関数式=>が採り入れられました]

このサイトほんとにすごい 天才か

記述がすごく豊富 偉い すごい