[Introduction to React] A complete guide to creating a quiz app | Easily implement score display and question management!

programming

I want to learn React, but I don't know what to make.
A quiz app is recommended for such beginners.
It contains all the basics of React, such as screen display, state management, and event handling.
In addition, adding a scoring function will expand the scope of what you can learn.
In this article,Building a quiz app with scores from scratch using ReactThe steps to
Words and structures that even elementary school students can understandWe will explain it in an easy-to-understand manner.

What is a quiz app? Explaining the basics

What is the structure of a quiz app?

First, let's explain the basic structure of a quiz app.

  • Question setting
  • Select your answer
  • Correct or incorrect?
  • Next question
  • Score calculation and display

Through this mechanism,useStateorEvent HandlingThis will deepen your understanding.

Why use React?

React is a library that excels at switching screens and managing states.

  • Create the look with less code
  • Changes are reflected immediately on the screen
  • Easy data management

By utilizing these features,Ability to create apps efficientlyYou will acquire the skills.

Considering the screen layout of a React quiz app

Breaking down the actual UI structure

Create a screen like the one below.

  • "Start button"
  • "Quiz text and options"
  • "Score display"
  • "Again button"

In React, the basic principle is to think about components in smaller parts.

Roles of each component

For example, divide it as follows:

  • App.js: Putting the whole together
  • Question.js: Show problem
  • Score.js: Score display

By doing this,Better code visibility and easier modificationIt will be.

Create quiz data

First, prepare the quiz data

Prepare the questions as an array like this:

const quizData = [ { question: "What is the capital of Japan?", options: ["Osaka", "Tokyo", "Fukuoka", "Sapporo"], answer: "Tokyo" }, { question: "What is 1 + 1?", options: ["1", "2", "3", "4"], answer: "2" } ];

Data points

  • Objects in an arrayPut
  • It consists of three elements: question, choice, and answer.

This structure will be easier to reuse in future apps.

A detailed explanation of how to create a score function

Manage scores with useState

In React,useState HookUse to keep track of your scores.

const [score, setScore] = useState(0);

Processing when checking answers

Once you click on an option, check to see if it's correct.

const handleAnswer = (selectedOption) => { if (selectedOption === quizData[currentQuestion].answer) { setScore(score + 1); } setCurrentQuestion(currentQuestion + 1); };

If the answer is correct, add points, you can easily increase your score using this mechanism.

The complete code put together

import React, { useState } from "react"; const quizData = [ { question: "What is the capital of Japan?", options: ["Osaka", "Tokyo", "Fukuoka", "Sapporo"], answer: "Tokyo" }, { question: "What is 1 + 1?", options: ["1", "2", "3", "4"], answer: "2" } ]; const App = () => { const [currentQuestion, setCurrentQuestion] = useState(0); const [score, setScore] = useState(0); const [isFinished, setIsFinished] = useState(false); const handleAnswer = (selectedOption) => { if (selectedOption === quizData[currentQuestion].answer) { setScore(score + 1); } const nextQuestion = currentQuestion + 1; if (nextQuestion < quizData.length) { setCurrentQuestion(nextQuestion); } else { setIsFinished(true); } }; const restartQuiz = () => { setCurrentQuestion(0); setScore(0); setIsFinished(false); }; return (
    <div style="{{" padding: "2rem" }}>
      {isFinished ? (
        <div>
          <h2>Your score: {score} / {quizData.length}</h2>
          <button onclick="{restartQuiz}">once again</button>
        </div>
      ) : (
        <div>
          <h2>{quizData[currentQuestion].question}</h2>
          {quizData[currentQuestion].options.map((option, idx) =&gt; (
            <button key="{idx}" onclick="{()" > handleAnswer(option)} style={{ display: &quot;block&quot;, margin: &quot;1rem 0&quot; }}&gt; {option}
            </button>
          ))}
        </div>
      )}
    </div>
  ); }; export default App;

summary

  • Quiz App is perfect for React beginners
  • Learn the basics of state management and event handling
  • The addition of a scoring function helps you develop practical skills.

Please actually write the code.The Basics and Fun of ReactPlease experience it.

▶ Check out these related articles:

[Introduction to React] Learn by making a rock-paper-scissors game! Implementation guide for beginners
A must-see for beginners who want to learn the basics of React! An easy-to-understand explanation of how to create a rock-paper-scissors game. You can learn useState and event handling carefully with examples.
programmingschool21.com
Copied title and URL