新しいReactアプリ（TypeScript）の構築手順おさらい・Local State

朝活 日報 りあクト

最近運動不足が気になっているので、バランスボールに座りながら仕事できないかな？と考えています。 バランスボールは場所をとりそうなので、こちらを購入検討中。。

バランスワン フィットネスチェア（ワブリー）(GREEN)

バランスワン フィットネスチェア（ワブリー）(GREEN)

  • メディア: その他

新しいReactアプリ（TypeScript）の構築手順おさらい

テスト用にちょろっとつくりたい時のために手順をおさらい。 semantic-ui もいれます。

$ npx create-react-app APP_NAME --template typescript
$ cd APP_NAME
$ yarn start    // 起動できるか確認
$ yarn add semantic-ui-react semantic-ui-css

index.tsx に import文を追加します。

import 'semantic-ui-css/semantic.min.css';

これでだいたいサンプルコードと同じようなアプリがつくれます。 package.json は省略。。

Local State

こちらにサンプルコードをプッシュしました。

github.com

型引数がふたつセットされていますが、ひとつめは Props の型引数で、今回は必要ないので空オブジェクトになっていて、 ふたつめが Local Sate の型引数で、AppState というすぐ上で定義したもの。

this.state に値は直接代入できないので、setState() メソッドを使用する。

setState() の引数に設定できるもの

  1. 設定したい値の State オブジェクト（State に固定値を設定するとき）
  2. (prevState, props) => newState の形式の、State と Props を引数として受け取り新しい State を返す関数（動的に変更したいとき）