初心者向け。React.js製の超簡単なクイズアプリの作り方
968 回閲覧されました
みなさんこんにちは、WEB制作のエンジニアのjonioです。
今回はReact.js製のクイズアプリの作り方の解説をします。
仕様とデモ画面
最初が↓です。
解答をクリックすると正解、不正解の表示が出て「第〜問目」、「問題文」、「解答」が変わります。
全ての問題の解答が終わったら全部の問題中何問正解かが表示されます。
デモ画面はここから見ることができます。
React.jsのインストール
Reactを自分のパソコンにインストールしないといけないですがここにやり方の解説をしています。
CSS
cssはindex.cssに書きます。
↓にあります。
index.cssのコードは↓にします。
コンポーネントの切り分け
今回のクイズですがコンポーネントの切り分けはこうします。
全体をAPP.jsに記述してボタンの部分をAnswer.jsxに記述をします。
Answer.jsxはまだ作ってないのでsrcディレクトリの下にcomponentsディレクトリを作ってその下に置きます。
最初の状態の表示
まず最初の状態にします、App.jsとAnswer.jsxを↓にします。
「第〜問」が変わるようにするのと問題と答えが変わるようにします。
App.jsとAnswer.jsxのコードを↓にします。
問題と解答の埋め込み方ですがまず配列で用意します。
App.jsの7行目〜32行目です。
そしてこれをAnswer.jsxの11行目〜18行目でmapメソッドを使って埋め込んでいます。
App.jsの52、53、54行目ですがApp.jsの7行目〜32行目をAnswer.jsxで使えるようにするため(親コンポーネントから子コンポーネントへ情報の受け渡し)に記述を追加しています。
Answer.jsxですが10行目にkey、12行目にkey={key}がありますがReactではliタグを付けるときは他と被らない番号をつけないといけないためにあります。
今のままでは正解、不正解を選ぶことができないので正解、不正解の判定と表示されるようにします。
正解・不正解の判定と表示
App.jsのコードを↓にします。
次は正解だった場合の数を保存します。
正解した問題数の保存
App.jsのコードを↓します。
最後は問題を全部答えた後の得点の表示ですが三項演算子を使います。
最終的な得点の表示
App.jsのコードを↓にします。
これで完成です。
最後にApp.jsとAnswer.jsxのコードを載せます。(index.cssは変更していないので載せません)