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?

More than 3 years have passed since last update.

React チュートリアル パート3 (useStateフック)

Last updated at Posted at 2022-01-15

image.png

目標:military_medal:

ReactJsの新機能、**”useState( )フック”**を使ってみましょう:bangbang:

App.jsに記述

下記の様に記述します!
image.png

【1行目】 useStateをimportします

【7行目】 countというstateを設定します。これで、countを自由自在に変更させることができます!

【13行目】 **{count}は、ブラウザに表示させるための記述になります。このように変数を表示させるためには、{}**で囲みます。

【16行目】 buttonをクリックすると、countが1増加する機能をつけています。

【21行目】 buttonをクリックすると、countがにする機能をつけています。

動きをみてみましょう:fire::fire:

2022-01-15_21h59_01.gif

たったこれだけの記述で簡単に、機能を実装することができました:bangbang:

次回:bell:

:white_check_mark: useEffect()を使います:bangbang:

参考

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?