数値を表示するCellをつくる

[masayuki14]

数値を表示するコンポーネント

• border で囲む
• Margin Paddingはとりあえずなし
• Centerに表示する
• Inline にしておく

[masayuki14]

const className = {
  cell: {
    display: 'inline',
    width: 360,
    height: 360
  }
}

function Cell() {
  return (
    <div className={className.cell}>
      10
    </div>
  )
}

export default Cell;

とりあえずのコードがうごかない。

[masayuki14]

Failed to compile
/Users/morisaki/ghq/github.com/masayuki14/kukupad/src/components/atomos/Cell.tsx
TypeScript error in /Users/morisaki/ghq/github.com/masayuki14/kukupad/src/components/atomos/Cell.tsx(11,6):
'React' refers to a UMD global, but the current file is a module. Consider adding an import instead.  TS2686

     9 | function Cell() {
    10 |   return (
  > 11 |     <div className={className.cell}>
       |      ^
    12 |       10
    13 |     </div>
    14 |   )

[masayuki14]

• import React from 'react'; が抜けてた
• className は string だ
  の2点が原因

[masayuki14]

props から数値をもらおうとすると、エラー
https://awesome-linus.com/2019/11/19/typescript-curly-bracket-type-any-error/

関数の引数に型指定をしろよ、と。

[masayuki14]

Hooksをつかう。
https://ja.reactjs.org/docs/hooks-state.html

ちょっとわかってきた。