Reactでカウントアプリを作る[2022年版]

GitHub

はじめに

qiita に

Reactでカウントアプリを作る - Qiita

と言う記事があって、コピペして今ふうに書き直してデプロイできたのでご紹介。

https://kalz2q.github.io/react-countapp/

ソースは

https://github.com/kalz2q/react-countapp/

で、ローカルで動かすにはこれを git clone して、cd して npm install , npm start すれば動きます。

直したところ

元記事では countApp と言うプロジェクト名でしたが、

npx create-react-app countApp --template typescript

としたら今はもうプロジェクト名に大文字はダメです、と言われました。react-countapp に変更。

元記事では React の Component を import して props でデータを管理していましたが、これだと型管理がめんどうなので今ふうに useState を使って props を使わないようにしてみたところ、エラーが消えた。

import React, { useState } from "react";

const App = () => {
  const [count, setCount] = useState(0);

  const onIncrement = () => {
    setCount((prevCount) => prevCount + 1);
  };

  const onDecrement = () => {
    setCount((prevCount) => prevCount - 1);
  };

  return (
    <div>
      <div>{count}</div>
      <div>
        <button type="button" onClick={onIncrement}>
          +
        </button>
        <button type="button" onClick={onDecrement}>
          -
        </button>
      </div>
    </div>
  );
};
export default App;

感想

ほとんど Elm のコードのようにシンプルになりました。気持ちがよい。