React Quiz App Tutorial (w/ starter code + working example) | Beginner React Projects
Вставка
- Опубліковано 11 лют 2025
- 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/chr...
Run the STARTER CODE:
1) git clone github.com/chr...
2) cd quiz-app/starter
3) npm install
4) npm start
Run the FINISHED CODE:
1) git clone github.com/chr...
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: hello@jschris.com
This is a new channel so would love your feedback in the comments.
Don't forget to like, share, and subscribe! Thanks for watching!
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
Nice! I tried it out for myself, and altered it to add additional questions and load them from a JSON doc. Thanks a lot!
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}
Thank you so much!! You made my life easier!!
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!
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 :)
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 !
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😍
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.
hi, from Pakistan. Goodluck on your coding journey.
Great tutorial, Chris! Thank you!
Your projects are awesome man. Hope you get millions sub soon♥️
Thanks man!! I hope I get to a million as well 😂
Good luck with your new channel. Thanks for sharing!
Thank you!
Liked and Subscribed immediately, thanks for this tutorial, it is exactly what I was looking for...
Thanks so much , I’m glad you found this helpful !
@@ChrisBlakely most welcome!!
i'm so happy it's my first time doing that quiz app haha it's look the same as yours xD
Thanks for video, Very useful & GBU Chris.
Fantastic easy to follow explanation!
That was very useful , Thank you so much
Glad it was helpful!
Thankyou OG.Ceb, back to back ti winner.
Liked and subscribed. Thanks for this tutorial ..... awesome!!!
Oh My God !! You are legend Bro Thank You so much ,,,,,,,you make my day
Great videos man!
Bro this was great, thank you
thank Chris ! it's useful for me
Thank you man! Good luck!Strong like and subscribe
ua-cam.com/video/_Vq1Ba26lX4/v-deo.html
nice video, thanks Chris
Thanks for watching!
wow very nice. thank you for the show
Glad you enjoyed it
great man thanks
amazing, thanks..
Awesome video man... how would you add in Fade-out / fade-in style transitions between questions?
Simply Superb
You did some serious magic here Sir, and also saved my...programme :D
Glad I could help!
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?
Muchas gracias excelente, saludos desde México.
Perfect
thanks
Awesome 👍
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.
ua-cam.com/video/_Vq1Ba26lX4/v-deo.html
sit it was so much useful
Hello chris,
I am not able to the logic of displaying the previous state please help me with it please share the code
I think you need to save the scores in Local storage and display it
Check my above comment if your still stuck might help
This is so easy too bad you don't make them anymore they are so helpfull Thanks
Beautiful
Thanks Alot
I F**king love this tutotial ❤
Its so excellent dude !
Maybe u can reDo it again with a countdown Timer?
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.
Great vid! How would you make the correct option turn green to show the user they got the answer right?
Hi, did you find solution? i am trying to do the same.
ua-cam.com/video/_Vq1Ba26lX4/v-deo.html
brilliant
Thanks bro
Thank you for watching!
Hi, your video is great.
How can I put an Alert (this answer is incorrect, the correct answer is .... HERE SHOW THE CORRECT ANSWER")
ua-cam.com/video/_Vq1Ba26lX4/v-deo.html
If we want to show all questions in only one page then what should be the changes in this code. Please help.
awesome
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?
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
nice and easy ,thank you +_+
plz give css of this project
Great
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?
Try this videos it will help you ua-cam.com/video/_Vq1Ba26lX4/v-deo.html
great..
That's awesome man! However, how do I get the value(string) of the user's choice?
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
@@ChrisBlakely Yep! I figured it out. Your work is a great help! Thank you
Is possible to save the answers into SQL ?
damn fast talking style :3
How would you add a 'Click to start again' button to this?
When the code displays the score, set a button which will display the first question and set score to 0
ua-cam.com/video/_Vq1Ba26lX4/v-deo.html
what if i want an image instead of a text message?? can some one help me out
how did you do it ??
@@KkrishnaSaxena fixed it thanks for asking
There are 8 books in the Harry Potter Series.
when answer is correct and incorrect how we display colors
use a template string to apply a class to the background depending on the isCorrect boolean (or whatever I named it)
I score 4 and wanna show that you are lost. how can i do it?
Hey, inside of score section add this {score < questions.length ? Try again : You won!}
ua-cam.com/video/_Vq1Ba26lX4/v-deo.html
react native ?
good tutorial but rather than go at a million miles an hour, why dont you just slow down and make the video longer?
Thanks for the feedback! Yep I’m still trying to find the balance between speed and video length :)
@@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.
Please calm down when you speak :)
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);
}}>
try this className={`button ${
answerOption.isCorrect ? "correct" : "incorrect"
}`}
ua-cam.com/video/_Vq1Ba26lX4/v-deo.html
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
ua-cam.com/video/_Vq1Ba26lX4/v-deo.html
Good luck with your new channel.Thanks for sharing!
Thank you so much!
thankyou
Thanks Bro