0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【React】100本ノック #02 Counter

Posted at

はじめに

フロントエンドスキル向上のため書籍やudemyでインプットを行っていますが、アウトプットも並行して進めるべく@Sicut_studyさんのReact100本ノックを始めることにしました。

ルール

  • 主要なライブラリやフレームワークはReactである必要がありますが、その他のツールやライブラリ(例: Redux, Next.js, Styled Componentsなど)を組み合わせて使用することは自由
  • TypeScriptを利用する

今回作るもの

ボタンを押すと、数値が増減するカウンターコンポーネント

条件

1. 表示領域: 数字を表示するエリアが存在する。
2. インクリメントボタン: このボタンをクリックすると、表示されている数字が 1 増える。
3. デクリメントボタン: このボタンをクリックすると、表示されている数字が 1 減る。
4. 初期表示: アプリを起動した際の数字は 0 である。
5. ステート管理: React の useState や useReducer を使って、カウントの数字を管理する。

成果物

使用技術

  • React
  • TypeScript
  • MUI

前回はEmotionを使いましたが、今回はMUIを使ってスタイルを実装しました。

PC

02_counter_pc.png

SP

02_counter_sp.png

感想

useStateの使い方を理解することができました。
個人的にはデザインをもうちょっとこだわって作りたかったのですが、今回はあくまでuseStateについて理解することが第一目的だったのでこのくらいで。。。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?