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 togetherQuestion.js
: Show problemScore.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:
1 | 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.
1 | const [score, setScore] = useState(0); |
Processing when checking answers
Once you click on an option, check to see if it's correct.
1 | 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | 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) => ( <button key= "{idx}" onclick= "{()" > handleAnswer(option)} style={{ display: "block", margin: "1rem 0" }}> {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: