Build a simple Quiz App with ReactJS
A simple quiz app which will be built using both class and functional components.
 |
| Outline of the Quiz App |
The quiz app QuizMe will produce 5 general knowledge questions. For each question there will be four answer buttons. An answer should be selected , once an answer is selected the other 3 answers will be removed. Once all the questions have been answered you will be prompted to the score. And if needed you will be able to play the quiz app again with another set of different questions.
Important factors to consider
Background : You will need to install create-react-app tool and create the application , you also will need to delete the unnecessary files in the src folder since we will be developing from the beginning and start the development server.
Important : To obtain the questions and answers we need to build an API. For that i have built an offline API. Also i have built a specific style sheet to style the components.
File Structure
Inside the src folder i have created 3 directories and 1 file.
- The assets directory consists of the style sheet that styles the components.
- The components directory contains the components for the questions and the final result these will be explained in due time.
- The quizService directory contains the manual API we create to obtain the questions and the answers.
- The index. js file is the root component. This will act as the root of our application.
Specialty : Normally by using functional components react does not allow the state management features, this is because functional components mainly focuses on displaying data and not state management. But in a situation if you need to use state in functional components react provides a plug in play API named React Hooks. Such a scenario has been used in this app.
To check the git hub deployed app click here
To check the git hub repository click here
0 comments :
Post a Comment