#2 React.js でプログラミング・プラモデル Vol.3 「BlackJack」：App コンポーネントの処理を実装する

これまで

前回の投稿からだいぶ空いてしまいましたが、プロプラVol.3 の連載を再開します！
前回は、ブラックジャックのルールを確認しました。

これから使う Sandbox

以下の Sandbox は、処理の枠組みのみ用意されています。

BlackJack (empty) - CodeSandbox

この連載を通して、枠組みの中に具体的な処理を埋めていくことで BlackJack アプリを作成していきます！

今回のゴール

今回は、ゲームを開始するための START ボタンを画面に表示します！

今回の設計書

この設計書を参考にして、src/App.js に具体的な処理を実装してください！

App コンポーネント
-----
■state定義
 1. isGameStart: 初期値 false
■関数定義
 1. handleClick()
   1.1 state isGameStart を true に更新する
■Task
1. {/* Task */} と書かれている箇所に以下の処理を追加する
 1.1 state isGameStart が true のとき
   1.1.1 BlackJack コンポーネントをセットする
 1.2 state isGameStart が false のとき
   1.2.1 以下の Button コンポーネントをセットする
         <Box className="center-button"><Button variant="contained" onClick={}>START</Button></Box>
   1.2.2 Button コンポーネントの onClick 属性に関数 handleClick を渡す

ヒント

・state の定義は、React.useState() を使おう！
・state の初期値を設定するときは、React.useState() の引数に値を渡そう！
・state の値を更新するときは、React.useState() から返却される更新用の関数を使おう！
・return 文で、返却するコンポーネントを場合によって変えたいときは、三項演算子を使おう！
・onClick 属性に関数を渡すとき、「 () 」を付けるべきか付けないべきか調べてみよう！

実装例

BlackJack #2 - CodeSandbox

START ボタンは表示されましたか？
このボタンを押しても、まだエラーが起きて動きません。
これから少しずつ処理を実装して、動くようにしていきましょう！

次回

次回は、トランプのデータを作成します！