React Quiz: Building a Simple Quiz Application
React, a popular JavaScript library, makes it convenient to create user interfaces. Let's delve into building a simple quiz application in React to understand various aspects. This article will cover components, state, props, event handling, and conditional rendering.
1. Setting up the Project
Firstly, initiate a new React project using Create React App:
npx create-react-app react-quiz
cd react-quiz
2. Designing the Components For our quiz, we'll need the following components:
3. Creating the Data Model We'll use a simple data model for our quiz:
const questions = [
{
id: 1,
text: 'What is the capital of France?',
options: ['London', 'Paris', 'Berlin', 'Madrid'],
correct: 'Paris'
},
// ...add more questions similarly
];
4. Building the Components Start by creating the main `Quiz` component:
import React, { useState } from 'react';
function Quiz() {
const [currentQuestion, setCurrentQuestion] = useState(0);
const [score, setScore] = useState(0);
const [showResult, setShowResult] = useState(false);
const handleAnswerOptionClick = (answer) => {
if (questions[currentQuestion].correct === answer) {
setScore(score + 1);
}
const nextQuestion = currentQuestion + 1;
if (nextQuestion < questions.length) {
setCurrentQuestion(nextQuestion);
} else {
setShowResult(true);
}
};
return (
<div className="quiz">
{showResult ? (
<Result score={score} />
) : (
<>
<Question data={questions[currentQuestion]} />
<Options
data={questions[currentQuestion].options}
onOptionClick={handleAnswerOptionClick}
/>
</>
)}
</div>
);
}
Now, the `Question` component:
function Question({ data }) {
return (
<div className="question">
{data.text}
</div>
);
}
Then, the `Options` component:
function Options({ data, onOptionClick }) {
return (
<div className="options">
{data.map((option, index) => (
<button key={index} onClick={() => onOptionClick(option)}>
{option}
</button>
))}
</div>
);
}
Finally, the `Result` component:
function Result({ score }) {
return (
<div className="result">
Your score is: {score}
</div>
);
}
5. Styling Components While this article doesn't delve deeply into styling, using CSS modules or styled-components would be a good choice for keeping styles modular and organized. 6. Enhancements There are numerous ways to enhance this basic quiz application:
Conclusion Through this simple quiz application, you've learned some fundamental aspects of React:
With React’s flexibility, scalability, and vast community, you can expand upon this basic structure to create more complex and interactive quiz applications. Dive deeper into React's ecosystem, explore its documentation, and keep building!
UPCET Exam
Click Here
SAAT Exam
Click Here
MHT CET Exam
Click Here
IPU CET Exam
Click Here
KCET Exam
Click Here
COMEDK UG Exam
Click Here
VITEEE Exam
Click Here
BITSAT
Click Here
DSAT: Dayanand Sagar Admission Test
Click Here
Career In Animation in india
Click Here
Merchant Navy Courses in india
Click Here
Interior Design Career in india
Click Here
UGC NET Exam
Click Here
B. Ed Exam
Click Here
AFCAT - Air Force Common Admission Test
Click Here
GATE Exam
Click Here
Joint Entrance Examination (JEE)
Click Here
Common Admission Test (CAT)
Click Here
CDS - Combined Defence Services Exam
Click Here