😃

React100本ノック 2本目「Counter」(解説付き)

2024/06/18に公開

Reactのお題を消化していく、React100本ノック。
Reactの実力向上のため始めました。

ノック2本目:Counter

React100ノックの本家

https://qiita.com/Sicut_study/items/82059f9cbb5b2996e5b3

実装

カウントを作成するお題。
プラスのボタンで数字を増やし、マイナスのボタンで数字を減らす。

利用技術

  • React
  • TypeScript
  • tailwindcss

画面

https://kuni-chan-k.github.io/react-lesson/#/lesson2

コード

https://github.com/kuni-chan-k/react-lesson/blob/main/src/components/Lesson2.tsx

解説

本家ではとくに制限はなかったのですが、私が実装したときには最大値を100、最小を0としています。

制限がない場合、とても大きな値になったとき表示崩れが生じないかテストする必要があります。

このお題で「useState」「useCallback」の使い方を理解できると思います。

余力があれば、ボタンを長押ししたらカウントをより早くできるような機能を実装するのも勉強になると思います。

React本

本で勉強したい人にはこちらをオススメ

これからはじめるReact実践入門 コンポーネントの基本からNext.jsによるアプリ開発まで

GitHubで編集を提案

Discussion