このリポジトリはハックツトレジャーvol2 で行われた
「ハッカソンで使えるReactハンズオン入門編 by 株式会社ハックツ」の資料となります。

環境構築の手間を省くために、CodeSandboxを使用することを想定しています。
もちろん自分でReactの環境を作成し実行しても構いません。

まずは、CodeSandboxにアクセスします。
以下のような画面が表示されていたらOKです！

この時点で、すでにReactの環境が整っています！
今回は、現在表示されている App.js ファイルのみを触っていきます！

試しに、コードを変更してみましょう！
step0/App.jsをコピーして、CodeSandboxに貼り付けてみましょう。

以下のように表示されていたら、OKです！

ブラウザ表示の下部を上に上げることでコンソールを見ることもできます！

ここまでできたら完璧です！
では、順次進めていってください！！

※大枠のコードは全て用意していますが、コピペをするより実際に書いた方がより理解が深まるので、あまり分かっていないよという人は是非写経してみてください！

useStateを使うと、要素の表示非表示を制御することができます。
step1/App.jsをコピーまたは写経して、どのように動くか見てみましょう！

「開く」ボタンを押したら"Hello"が表示され、
「閉じる」ボタンを押したら非表示になることが確認できたらOKです！

useStateのsetState(更新関数)で、前の値を元に値を更新する場合には引数に関数を挿入します。
この関数の引数には、現在のステートが入ります。

step2/App.jsは一つのボタンでダイアログの表示非表示を切り替えるものです。
コピーまたは写経して、どのように動くか見てみましょう！

「開く」を押したら"Hello"が表示されボタンの文言が変わり、
「閉じる」を押したらその逆の動きをすることが確認できたらOKです！

このように、元のステートを使ってステートを更新する場合には、
setStateに関数を入れましょう。

次は、useStateを使ったコードを修正してみましょう！
App.jsにstep3/bad/App.jsをコピーしてみてください。

コードだけを見ると、ボタンを押せばnumを+1し、その値を使ってsumを更新しているため問題なさそうに見えます。

しかし、このコードを反映させてみると以下のように予期していない動きになってしまいます。

このコードを修正して正しく動かしてみましょう！
修正ポイントは2つあります。

もし、上手くいかない場合には解答例をstep3/good/App.jsに置いているので、
参考にしてみてください！

正しい動き

ここでは、useEffectが実行されるタイミングを理解します！

まずは、step4/App.jsのコードをコピーまたは写経してみましょう！

このコードは、それぞれボタンを押すと上部の数字がカウントアップされていくコードとなります。
num1, num2はそれぞれuseStateで管理してあります。

useEffectは、第二引数に入れる値によって実行されるタイミングが変わります。
タイミングは以下のようになります。

• 空の配列: 初回のみ
• 配列: 初回と、配列に入っている値が更新された時
• 何も入れない: 初回と、管理している全ての値が更新された時

実行された時の出力はconsoleにはき出されるので、ボタンを押して動きを確認してみてください！

※注意: React18ではStrictModeというものが設定されており、開発環境では初回のマウントが2度実行されてしまいます。そのため、初回のタイミングで実行されるものが2度実行されます。
これはバグではないのでご注意ください。
もし気になる方は、index.jsを編集しStrictModeを削除すれば、1度だけしか動いていないことが確認できます！

useEffectは外部からデータを取得するときに使用されます。
今回は犬の画像をランダムで取得できるAPIを使って試してみます！

step5/App.jsのコードをコピーまたは写経してみましょう。
以下のように画像が表示されていれば成功です！

今回クリーンアップ処理で通信を切るということをしていますが、
この処理を消してみるとStrictModeの影響により画像が2回取得され、画像が切り替わるように表示されることを確認してみましょう。
このようにクリーンアップ処理を書くことによって、余計な処理を無くしていることが分かります。

ここでは、setIntervalとuseEffectを使って、ストップウォッチを作ってみます。

step6/bad/App.jsのコードをコピーしてみましょう。
このコードはうまく動きません。

こちらも修正ポイントは2つあります!

もし、上手くいかない場合には解答例をstep6/good/App.jsに置いているので、
参考にしてみてください！

正しい動き

ここまで終わったら、useState, useEffectについて少しだけでも理解が深まったかと思います！

Reactフックはこれ以外にもたくさんあります。
たくさんコードを書いて、勉強しましょう！

今回はここまでとなります。お疲れ様でした！！