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:

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.

Admin bar avatar

kindsonthegenius

Kindson Munonye is currently completing his doctoral program in Software Engineering in Budapest University of Technology and Economics

View all posts by kindsonthegenius →

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

  1. Pingback: Build a Quiz App in React – Step by Step with Source Codes ( Part 2) — The Tech Pro

Leave a Reply

Your email address will not be published. Required fields are marked *