Reactで作る「令和」パズル

#背景
仕事で使うので、Reactの勉強がてらパズルを作ってみた。
話題の「令和」と「平成」を使ったやつ…（すでにちょっと遅い感じも…）

#完成品
下記のようなものができました。
スタートを押すと開始され、「令和」で揃えると完了！

See the Pen reiwa puzzle by hashito (@hashito) on CodePen.

###TODO(残課題)

• ウィンドウを小さくすると正しく表示されない
• HTMLからの定義をもらってlevelやら大きさを可変させたい
• もう少し…コードを整理したい

#詰まった所
##thisでstateが参照できない。
下記のようなコードで何度確認してもthis.stateが定義されていない！

class Puzzle extends React.Component {
  constructor(props) {
    super(props);
    ....
  render() {
    return (
      <span
        className="puzzle"
        cal={this.state.y}

###解決
コンストラクタでthis.render=this.render.bind(this);がされていない…
はい、ドキュメントを読みましょうってことですね。

class Puzzle extends React.Component {
  constructor(props) {
    super(props);
    this.render=this.render.bind(this);
    ....
  render() {
    return (
      <span
        className="puzzle"
        cal={this.state.y}

##renderが呼び出されない
コンストラクタで受け取ったpropsを下記のようにstateに直接引き渡しをしていた。
コンストラクタはインスタンス生成時にしか呼び出されなかった…

class Puzzle extends React.Component {
  constructor(props) {
    super(props);
    this.state= props;
    ....
  render() {
    return (
      <span
        className="puzzle"
        cal={this.state.y}

下記のように改善…
しかし、更新されず…

class Puzzle extends React.Component {
  constructor(props) {
    super(props);
    this.state.y {y:props.y};
    ....
  render() {
    return (
      <span
        className="puzzle"
        cal={this.state.y}

###解決
純粋にそのままpropsを見ればよかったのだ…

class Puzzle extends React.Component {
  constructor(props) {
    super(props);
    ....
  render() {
    return (
      <span
        className="puzzle"
        cal={this.props.y}

#感想
Reactは結構**「こうしてください！」**ってのが多い感じがした。
書き方やロジックが矯正されるので誰が書いても同じようなコードになるのが利点なのかな…
オブジェクト構成とかも…