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