Build a Quiz App with useReducer + useContext - React Hooks Tutorial for Beginners

In this React Hooks tutorial I will show you step by step how to create a Quiz App using useReducer() + useContext(). We will start with managing state with just useState() and then refactor the code to implement useReducer() and finally useContext().

00:00 - Introduction
00:28 - Finished Quiz App demo
01:36 - Generate React app
02:40 - Create Progress component
05:00 - Create Question component
06:36 - Create Answer component
11:20 - Create Answers component
14:42 - Load sample questions data
17:55 - Implement useState hook
22:52 - Create answer click handler function to select answers
26:43 - Create next click handler function to move to the next question
33:32 - Show results to user
41:43 - Implement useReducer hook
1:03:04 - Implement useContext hook

#reactjs #javascript

[CarlosMafla]

Have you used Redux before? Do you think this pattern is a Redux killer?

[hamza]

I appreciate your work, it helps me a lot :D Thanks :D

[danieljamesross]

Excellent tutorial, thanks very much.

[bhanumathi_a]

Very useful tutorial.
Can you please tell me how to add questions from external json file, or something like API call.
Thank you so much.

[sst]

Hi, Carlos.
Thanks for sharing your great tutorial.
In watching your code, I found out a dubious line.
At around 29:00 there is a line like this:


// code in the "next" function.
answers.push(answer); ---- (1)
setAnswers(answers); ----(2)
// code int the "next" function.

I think it's somewhat redundant because you already changed the array on line (1). Besides I have been told not to change "state" directly. In my opinion (1), (2) lines can be rewritten into this using spread operator;
// setAnswers([...answers, answer]);

In your git repo, I found the redux-used version. So I leave this comment according to your lecture video.

You are immensely helpful to me. Thanks again.

[ITAPUNJABI]

if i have more then 500+ quiz how to randomize and make on category based ?

[landtechjobs]

Thanks so much Carlos!! Great tutorial!

[jalalbmnf]

Hi Carlos. Thanks for tutorial. I have a question, "rcomponent" in which extension?