React Quiz App Tutorial (w/ starter code + working example) | Beginner React Projects

In this beginner react project we'll look at how to build a quiz app using React hooks.
🚨 For more projects check out codecoyotes.com
🚨 🚨 Starter/Finished Code Repo: github.com/chrisblakely01/qui...
Run the STARTER CODE:
1) git clone github.com/chrisblakely01/qui...
2) cd quiz-app/starter
3) npm install
4) npm start
Run the FINISHED CODE:
1) git clone github.com/chrisblakely01/qui...
2) cd quiz-app/final
3) npm install
4) npm start
What we'll learn:
- Managing complex state objects
- Conditionally rendering elements
- Working with multiple state hooks to create a dynamic UI
🚨 🚨 Get React Project ideas with tips and starter code straight to your inbox: bit.ly/2CoTD6y
COME SAY HI:
Blog: www.jschris.com
Twitter: / chrisblakely01
Email: [e-mail]
This is a new channel so would love your feedback in the comments.
Don't forget to like, share, and subscribe! Thanks for watching!

[@MohamadMohamad-pl4eb]

you are the only youtuber than i dont have to speed my video to watch you,
a lot of stuff with only 12 min, keep it up

[@santra528]

Thanks Chris for the turtorial. I am new to Angular and I was building quiz app using Angular and I was not sure
how to go about the logic to calculate the score. Watching this video I was able to implement the logic
in my quiz app using Angular. Thanks again!

[@mrgames-Will]

Great tutorial, Chris! Thank you!

[@TheMaxZakh]

Fantastic easy to follow explanation!

[@Screwfacecapone]

Nice! I tried it out for myself, and altered it to add additional questions and load them from a JSON doc. Thanks a lot!

[@sergiob3698]

Good luck with your new channel. Thanks for sharing!

[@ChrisBlakely]

Thank you!

[@achtube85]

Thanks for this! I learnt a lot! Subbed right away :)
I have to confess, though, that I found that, for a non-native English speaker like me, not only your accent is a bit challenging (although beautiful!) but also you speak quite fast, so for the first time ever while watching web dev toturials, I set the speed to x0.75 in order to have enough time to process better :)

[@ChrisBlakely]

Thank you for subbing! Yes I’m still working on talking slower to suit more people, although talking slow doesn’t come natural to me 😂 thanks again for watching !

[@raynax3702]

Your projects are awesome man. Hope you get millions sub soon♥️

[@ChrisBlakely]

Thanks man!! I hope I get to a million as well 😂

[@lucianolimafer6305]

Liked and subscribed. Thanks for this tutorial ..... awesome!!!

[@codingwitheric]

Great videos man!

[@lacheporter6675]

Spoilers!!! this is how I made my reset button to reset state (extra credit).
Just create a function that sets the usestate value back to the orignal value.
I did name some variables differently. Hope this hint helps for those learning.
const [currentQuestion, setCurrentQuestion] = useState(0);
const [showScore, setShowScore] = useState(false);
const [score, setScore] = useState(0);
const resetStateClick =()=>{
setCurrentQuestion (0)
setShowScore(false)
setScore(0)
}
Put this button inside your score div
Retry
For recording the score after hitting retry:
Add another constant:
const [recordedScore, setRecordedScore] = useState(0);
Put this in the resetStateClick from above.
setRecordedScore(score)
Add a div.

Your Last Score: {recordedScore}

[@chandrikap8168]

Thank you so much!! You made my life easier!!

[@dimasaaron3759]

Thanks for video, Very useful & GBU Chris.

[@trungnguyen8252]

thank Chris ! it's useful for me

[@bennyakaz]

Bro this was great, thank you

[@crazyiron9003]

Thankyou OG.Ceb, back to back ti winner.

[@AminSani]

That was very useful , Thank you so much

[@ChrisBlakely]

Glad it was helpful!

[@musadanjuma6603]

Liked and Subscribed immediately, thanks for this tutorial, it is exactly what I was looking for...

[@ChrisBlakely]

Thanks so much , I’m glad you found this helpful !

[@musadanjuma6603]

@@ChrisBlakely most welcome!!

[@muhammadhamzashabbir8364]

Oh My God !! You are legend Bro Thank You so much ,,,,,,,you make my day

[@dubbsy_]

Awesome video man... how would you add in Fade-out / fade-in style transitions between questions?

[@dimalavrenov3916]

I am now seriously busy learning react. Initially, I created state, setState, etc. myself, in order to understand how it works under the hood. Now, when I don’t need to write it all by hand, I grasp everything on the fly, so I also understand the theory. Thanks for the lessons. For beginner web developers, this is a very good start. Hello from Russia and thanks again😍

[@dimalavrenov3916]

For starters, cheating on a video is a good topic, but then you need to learn how to do it yourself, looking at the code that you previously copied. For example, I do my own social media. car network. In addition, I do such small projects, and I look at the code of people who have been spinning in this area for more than one year, I also do practice at freecodecamp, whoever has not heard of this, I advise! Well, I watch interviews to see how others answer frequently asked questions.

[@JayLim-bn9fh]

hi, from Pakistan. Goodluck on your coding journey.

[@bhaveshkumarreddy46]

Simply Superb

[@magdasokolovic]

nice video, thanks Chris

[@ChrisBlakely]

Thanks for watching!

[@ThePercivalGlyde]

great man thanks

[@kabir0x23]

amazing, thanks..

[@AzizKhaddaoui]

wow very nice. thank you for the show

[@ChrisBlakely]

Glad you enjoyed it

[@ichbindiego19]

Muchas gracias excelente, saludos desde México.

[@anasssanba]

i'm so happy it's my first time doing that quiz app haha it's look the same as yours xD

[@dmitrybutakov1]

Thank you man! Good luck!Strong like and subscribe

[@veterancode2523]

ruclips.net/video/_Vq1Ba26lX4/видео.html

[@hritikchaudhary5470]

Awesome 👍

[@hariskhan804]

brilliant

[@user-rx5yz7hp6t]

Thanks Alot

[@ferrino4145]

You did some serious magic here Sir, and also saved my...programme :D

[@ChrisBlakely]

Glad I could help!

[@shaheensiddiqui1952]

sit it was so much useful

[@frankagu924]

Beautiful

[@rangabharath4253]

awesome

[@tumon001]

Thanks Bro

[@elsaiedsamaka7373]

nice and easy ,thank you +_+

[@OleksandrRaduka]

thanks

[@ahusyn]

I see you have a css class for .correct and .incorrect ready to show if the answer was correct or not, however I wanted to see how that could be implemented? once clicked on answer, where would that go?

[@noumankhan4381]

thankyou

[@SatyamGupta-yq1pt]

Thanks bro

[@ChrisBlakely]

Thank you for watching!

[@DhiaMagicien]

I F**king love this tutotial ❤
Its so excellent dude !
Maybe u can reDo it again with a countdown Timer?

[@ChrisBlakely]

Haha thanks Dhia!
Yeah I went a bit too fast in this video so I'm planning to do a second version, maybe using Redux/context API as well.

[@mohammedshoaib2755]

Great

[@replayzor]

This is so easy too bad you don't make them anymore they are so helpfull Thanks

[@yeminhtun2543]

great..

[@Bep33]

Great vid! How would you make the correct option turn green to show the user they got the answer right?

[@shibanipattnaik5419]

Hi, did you find solution? i am trying to do the same.

[@veterancode2523]

ruclips.net/video/_Vq1Ba26lX4/видео.html

[@yuvanhanwat9929]

If we want to show all questions in only one page then what should be the changes in this code. Please help.

[@NotiCuriosidades]

Hi. Great video. A couple of questions. Is it possible to display the questions and answers randomly? 2. Is it possible to see the questions and correct answers at the end? I.e. see all the questions along with the correct answers.

[@veterancode2523]

ruclips.net/video/_Vq1Ba26lX4/видео.html

[@windzordave2411]

That's awesome man! However, how do I get the value(string) of the user's choice?

[@ChrisBlakely]

Thanks for the comment man - I can't exactly remember this but I'm pretty sure there is an onClick function that gets called when the user clicks an answer, you could get it from within that function and store it in state or whatever

[@windzordave2411]

@@ChrisBlakely Yep! I figured it out. Your work is a great help! Thank you

[@saldanasal1353]

Is possible to save the answers into SQL ?

[@renatico7733]

Great video, I want to do a different quiz where each answer gives some points, like answer1 gives 1 point and so on, and the correct answer gives 5 points. At the end of the Quiz it sums up all the points and shows them to the user, any clues to implement this point system here?

[@veterancode2523]

Try this videos it will help you ruclips.net/video/_Vq1Ba26lX4/видео.html

[@andresramirez4469]

i did my own quiz, (Similar to yours but i used form and split up components, and used radio buttons) but when i was trying to do the score i had so much trouble getting it to increment the score. Until i looked at your video. I dont see how putting in answerOption.isCorrect as an argument at the handleAnswerButtonClick would make it work. Could you explain that or somebody else on here?

[@osuntuyiemilos5803]

Hi, I also tried radio buttons but when I click on one option the other options on the next question gets clicked also. How did you navigate this issue? Thanks

[@Rupali_-pk1jk]

plz give css of this project

[@TopTalentBridge]

Hello chris,
I am not able to the logic of displaying the previous state please help me with it please share the code

[@Abogida11]

I think you need to save the scores in Local storage and display it

[@lacheporter6675]

Check my above comment if your still stuck might help

[@joyprokash4016]

damn fast talking style :3

[@juguetestoys1137]

Hi, your video is great.
How can I put an Alert (this answer is incorrect, the correct answer is .... HERE SHOW THE CORRECT ANSWER")

[@veterancode2523]

ruclips.net/video/_Vq1Ba26lX4/видео.html

[@DonovanNagel]

How would you add a 'Click to start again' button to this?

[@ashprasad9075]

When the code displays the score, set a button which will display the first question and set score to 0

[@veterancode2523]

ruclips.net/video/_Vq1Ba26lX4/видео.html

[@abdullahajmal6888]

react native ?

[@varshas565]

when answer is correct and incorrect how we display colors

[@ChrisBlakely]

use a template string to apply a class to the background depending on the isCorrect boolean (or whatever I named it)

[@zekisebsib6061]

what if i want an image instead of a text message?? can some one help me out

[@KkrishnaSaxena]

how did you do it ??

[@zekariassebsib269]

@@KkrishnaSaxena fixed it thanks for asking

[@kulsoomsiddiqui7425]

I score 4 and wanna show that you are lost. how can i do it?

[@shubhambhavsar23]

Hey, inside of score section add this {score < questions.length ? Try again : You won!}

[@veterancode2523]

ruclips.net/video/_Vq1Ba26lX4/видео.html

[@turgutguvercin927]

There are 8 books in the Harry Potter Series.

[@thomasters9427]

good tutorial but rather than go at a million miles an hour, why dont you just slow down and make the video longer?

[@ChrisBlakely]

Thanks for the feedback! Yep I’m still trying to find the balance between speed and video length :)

[@vataidomonkos1783]

@@ChrisBlakely I really liked the speed. You can download the files and follow what he is doing. I personally like pausing and rewinding past 10-20 seconds if i don't understand something, more than having to increase the play speed because i'm watching the dude mistype something 4th time or simply because he speaks super slowly and loses his train of thought.
Thanks for the vid, was super helpful to me.

[@Emma2491]

Please calm down when you speak :)

[@a_dev7599]

Thanks for the tutorial. I am trying to change border color depending if the answer is correct or wrong with template literals, as suggested but I am doing ir wrong. Please advise how to correct it: {
handleAnswerOptionClick(answerOption.correct);

}}>

[@sherazliaqat2814]

try this className={`button ${
answerOption.isCorrect ? "correct" : "incorrect"
}`}

[@veterancode2523]

ruclips.net/video/_Vq1Ba26lX4/видео.html

[@venkatapenumatsa3959]

did anyone figure out, how to add the "Start Again" button at the end of the quiz? I added the below code and seem nothing is happening...! Appreciate any help

You scored {score} out of {questions.length}
setCurrentQuestion(0)}
>
Reset

[@veterancode2523]

ruclips.net/video/_Vq1Ba26lX4/видео.html

[@dejansekulic4199]

Good luck with your new channel.Thanks for sharing!

[@ChrisBlakely]

Thank you so much!