hukurouo.com 🦉

2020-12-18 :

react day19：React入門5 三目並べ完成


https://sanmokuranabe-react.netlify.app/

デプロイした！

netlifyへデプロイ

netlifyへのデプロイが失敗して、その原因が分からずかなり悩んだ。

結局原因は以下の警告を無視していたことだった。warningsだから無視してもええかと思っていた...。結構厳しめの判定になっているらしい。

Compiled with warnings.

src\index.tsx
  Line 62:11:  The array literal notation [] is preferable  @typescript-eslint/no-array-constructor 
  Line 65:17:  The array literal notation [] is preferable  @typescript-eslint/no-array-constructor

tailwindcssの導入

https://tailwindcss.com/docs/guides/create-react-app

かなり気に入ったので、今回も使ってみる。ドキュメント通りにインストールしてみるが失敗。エラー文でggってみたらnodeのバージョンが古いのが問題っぽい。

node -vしてみたら v10.13.0 だった。現在の推奨版は v14.15.3 らしいのでこりゃいかんとアップデートする。nodistで管理していたっぽいので楽々にバージョン管理ができた。

ガリガリ描いて良い感じのUIを作る。listの中央寄せが一番苦労したかも。正解は以下だった。

  <div className="flex justify-center">
    {this.state.listIsReverse
      ? <ol reversed className="list-decimal px-10">{movesReverse}</ol>
      : <ol className="list-decimal px-10">{moves}</ol>
    }
  </div>

ユニークなkeyが無いという警告

コンソールから以下の記述が中々消えない。listにはちゃんと一意のkeyをつけているのに。

Warning: Each child in a list should have a unique "key" prop.

どうやら繰り返しで生成された要素はlistに限らずキーを着けなければダメらしい。以下でエラーは消えた。

  render() {
    return (
      <div>
        { Array(3).fill('').map((_val,i)=>{
          return (
            <div className="" key={i}>
              { Array(3).fill('').map((_val,j)=>{
                return (
                  <b key={3*i+j}>
                  {this.renderSquare(3*i + j)}
                  </b>
                  );
              })}
            </div>
          );
        })}
      </div>
    );
  }