nikkie-ftnextの日記

イベントレポートや読書メモを発信

サバイバルTypeScriptの「Reactでいいねボタンを作ろう」を写経（yarnが1系より新しいため不完全な開発環境にて）

はじめに

おれはPython以外使えねェんだコノヤロー！！！1 nikkieです。

少し前にReactを触る機会がありました。
少しでも理解を深めたく、このたびサバイバルTypeScriptを読み、写経しました🐟

目次

「Reactでいいねボタンを作ろう」

クリックするといいねが増えていくボタンを作ります。
このボタンは連打できます！

完成版コードはこちら

理解が深まったこと

できました（ゼイゼイ

useState

現在のstateと、stateを更新して再レンダをトリガするset関数の2つを返すんですね。
これらを使って1増やす関数（handleClick）を宣言し、onClickイベントのハンドラとします。

  const handleClick = () => {
    setCount(count + 1);
  };

JSX

以下のようにHTMLが書けるやつですが、JSXなるものだと知りました！

<span className="likeButton" onClick={handleClick}>♥ {count}</span>

{}にはTypeScriptの式っぽいものを書けるようだな〜と思っていましたが、これはReactではなく、JSXという技術のおかげだとは！

環境構築は不完全でした😭

サバイバルTypeScriptはyarn 1系（このチュートリアルに必要なもの）。
手元はyarn 3系。

% yarn --version
3.6.0

このときは進めたんですね。「新しいほうがいいだろう」と

% yarn create react-app like-button --template typescript

これでlike-buttonディレクトリができ、ファイルが置かれます。

% yarn info react
└─ react@npm:18.3.1
   ├─ Version: 18.3.1
   │
   └─ Dependencies
      └─ loose-envify@npm:^1.1.0 → npm:1.4.0

yarn startして http://localhost:3000/ をブラウザで開くとReactロゴぐるぐるします。

ここまではよかったんです！

yarn startしたままでsrc/App.tsxを変更します（以下は初めての変更）。

function App() {
  return (
    <div className="App">
      <header className="App-header">
        Hello
      </header>
    </div>
  );
}

保存するとエラー
「Failed to load config "react-app" to extend from.」

エラーメッセージでググって見つけた対処を実施。
https://github.com/facebook/create-react-app/issues/10463#issuecomment-825930347
yarn add eslint-config-react-app

これで解決すると思いきや、保存するとエラーが続きます

ブラウザ

「Compiled with problems:」

シェル

webpack compiled with 1 error
No issues found.

ブラウザにもシェルにも表示されるエラー

ERROR in [eslint] Plugin "react" was conflicted between "package.json » eslint-config-react-app » /.../like-button/.yarn/__virtual__/eslint-config-react-app-virtual-9dbc1f7046/0/cache/eslint-config-react-app-npm-7.0.1-78bab43841-a67e082180.zip/node_modules/eslint-config-react-app/base.js" and "BaseConfig » /.../like-button/.yarn/__virtual__/eslint-config-react-app-virtual-364713b7c5/0/cache/eslint-config-react-app-npm-7.0.1-78bab43841-a67e082180.zip/node_modules/eslint-config-react-app/base.js".

そもそも、.yarn/__virtual__ディレクトリなんて、ないよ？

% ls .yarn/__virtual__ 
ls: .yarn/__virtual__: No such file or directory

不思議すぎるのがpackage.jsonを開いてから（変更なしでも）保存すると、このコンパイルエラーが消えます。
なんでファイルに依るんですか...

そしてyarn startをCtrl + Cで抜けて、再度実行するとこのエラーは出ません。
ﾜｹﾜｶﾝﾅｲﾖｰ!

Ctrl + Cで抜けまくれば最後まで完走できそうだったので、すごく体験悪いけど諦めて進めました

目を通したけど私の環境にどう読み替えるのかよく分からなかったissueたち

グローバルでなくnpm install yarn@1すればサバイバルTypeScriptとバージョンが合うと思ったのですが、create react-appがエラーで通らないので、それ以上は追っていません

終わりに

環境構築にしこりを残しつつも、Reactでいいねボタンが作れました。

yarnのエラーが何言ってるか読み解けませんでした（そもそもnpm以外にyarn、npx、pnpmといっぱいあるのが、わかんない！）。
Pythonも分からない人から見たらおなじということでしょうね😅

P.S. きっかけはKobe.ts

朝のオンラインもくもく読書会に参加して、サバイバルTypeScriptを読み進めたり写経したりしていました。
オンラインもくもくサバイバルTypeScript読書会 #1 - connpass

来週は朝にオンラインもくもく会
オンラインもくもくTypeScript勉強会 #1 - connpass

7月に神戸でLT会があるようです。行ける方はぜひ！

  1. ↩