Build a Quiz App in React – Step by Step with Source Codes ( Part 1)

In this tutorial, I would take you through building a simple quiz application in React. As we go through, I would be explaining the pieces of codes as well.

We would cover the following:

• Before you begin (Prerequisites)
• Step 1: Setup the QuizData
• Step 2: Add the StyleSheet
• Step 3: Add the App Component
• Step 4: Create the Quiz Component

Also, remember to go along with the video.

Before you begin:

• Install Node.js
• Also install VS Code (or any other IDE you are comfortable with)
• run the command npx create-react-app quiz-app  to create the app
• Then navigate into the quiz-app folder using the command cd quiz-app
• Start the application by running the command npm start. Then check that the application started on port 3000
• Delete all the files in the src folder

Step 1: Set up the Questions Service (QuizData Component)

The question data bank is simply a list of questions along with options and a correct answer. Each item in the data bank has

• an id
• a question
• options
• correct answer

To set up the question service, create a folder named components in the src folder. Then create a file called QuizData.js in the components folder. Add the following inside. Feel free to change up the questions list, or even add more questions!

export const QuizData = [
    {
        id: 0,
        question: `What is the capital of Nigeria?`,
        options: [`New Delhi`, `Abuja`, `Owerri`, `Enugu`],
        answer: `Abuja`
    },
    {
        id: 0,
        question: `What is the capital of India?`,
        options: [`New Delhi`, `Abuja`, `Mumbai`, `Aba`],
        answer: `New Delhi`
    },
    {
        id: 0,
        question: `What is the capital of Australia?`,
        options: [`Melbourne`, `Akokwa`, `Owerri`, `Sydney`],
        answer: `Sydney`
    },
    {
        id: 0,
        question: `What is the capital of Turkey?`,
        options: [`Rijadh`, `Ankara`, `Istanbul`, `Abakaliki`],
        answer: `Ankara`
    },
    {
        id: 0,
        question: `What is the capital of Syria?`,
        options: [`Syria`, `Damascus`, `Anambra`, `Enugu`],
        answer: `Damascus`
    },
]

Step 2: Add a Stylesheet

Let’s now add a stylesheet to control the appearance of the application.  The stylesheet is given below. So just create a file in the src folder and add the styles in it

.App{
    text-align: center;
    font-family: Arial;
}

/* The answer selecteed by the user */
.selected {
    background-color: orange;
}

/* The list of options */
.options {
    padding: 8px;
    border: 2px solid #000;
    cursor: pointer;
}

ul {
    list-style-type: none;
}

body{
    font-family: Verdana;
    font-size: 18px;
    background-color: #2980B9; 
}

Step 3: Create the Index.js File (App component)

This file would be the entry point of our quiz application. I would contain the App function which would be mounted at the root element of the index.html file. You can take a look at the index.html file locate inside the public folder (but don’t modify it!)

import React from 'react'
import ReactDOM from 'react-dom'
import Quiz from './components/Quiz'

import './styles.css';

function App() {
    return (
        <div className="App">
            <Quiz />
        </div>
    )
}

const rootElement = document.getElementById('root');
ReactDOM.render(<App></App>, rootElement) //renders the component(first parameter) as a child of the element(second parameter)

Step 4: Create the Quiz Component

This is the component that would manage all the logic associated with the quiz.  This would be a class component.

So create a file called Quiz.js inside the components folder. The initial content is shown below:

import React, { Component } from 'react'
import {QuizData} from './QuizData';

export class Quiz extends Component {
    render() {
        return (
            <div>
                
            </div>
        )
    }
}

export default Quiz

Note that we have imported the QuizData component as well as the React.

At this point, you have completed the Part 1 of out quiz application. In the next part we would now work on displaying the questions and also responding to user actions. I recommend you watch the video as well.