My very first React app! Take the quiz!

Hi Everyone,

I’ve created my very first React app outside of FCC and the first where I’ve not used CodePen. I used VS Code and deployed to GitHub pages from the terminal.

Here is the link to the app - https://mikebish13.github.io/my-quiz-app/

And here is a link to the source code - https://github.com/MikeBish13/my-quiz-app/tree/master

It’s a simple quiz app and I’d be really grateful for feedback on:

  • The set up of my files/components in the app - I’m still learning the best way to use function and state components for different parts of the app.
  • The general user experience of the app
  • Any ideas for improvements and making it more advanced

And of course, I’d love to know how you scored in the quiz!!

Cheers!!

1 Like

Good One Keep it up …

Hey bish13!

Your quiz is really nice :smiley:
As for the questions:

  • Files setup: you probably shouldn’t commit your .vscode folder; if you have the styles only for App component, you could use index.css you have in your higher-level folder. Otherwise, you can store the styles for the components in the component’s folders
  • General UI: I enjoyed it :slight_smile: One thing - why after “Start again” I get the “Quiz master” screen again, instead of starting the quiz right away?
  • Improvement: probably split it into categories - like, science, sports, cinema etc. Also you can make a leaderboard, or compete for time, or add some stats on how many people answered the question right (I guess this is the most exciting part :D). However, it could work only if you get many people to play the quiz, so might not be relevant.
1 Like

Thanks, @gabrielmaric830 - really appreciate the feedback. Agree about the end page, but I think that will change as I develop the app more - I want to have a bank of different quizzes based on topics like you suggest, so this page could re-direct to other quizzes. If I wanted to develop a leaderboard would I need to integrate some sort of database on the backend?

The CCS file structure on create-react-app did confuse me a little bit. Are you saying that if I’m styling everything in one place I should use index.css, otherwise I could do some top level styling in App.css and then component styling in there own component.css files in the relevant directory?

Well done on this - I think it looks really nice and all works smoothly. I’ll focus mostly on the code - just one quick note on the user experience: On mobile the view gets a bit tall so you have to scroll up and down, maybe you can squash that a little bit.

On to the code:

  • I think your App.js is doing too much. Better to put all that logic into some named components, so it’s more clear what’s going on at a high level when looking at App.js
  • passing all your data to all components ({…data}) is not a good idea. It makes it quite hard to figure out parts of the data each component actually needs
  • updating the DOM directly (document.querySelectorAll) is something that should only be done if you absolutely have to. Instead you should let React handle the rendering based on state / props.

Some personal stylistic preferences:

  • I personally like to put the return statement at the top of a component. That way I can immediately see what’s going on at a high level before diving into the details.
  • I’d try to avoid function names starting with handle as they don’t really say much about what the function does, but rather about where it’s called. I can see that by looking at the return statement.

One last thing:
The react ecosystem is moving towards using function components for everything, so I would recommend following that general direction. Take a look at React hooks if you haven’t already. It’s good to know the class component syntax too though, so no harm in having learned how that works.

Happy coding!

1 Like

Great Job! Looks like you had a lot of fun coding it.

I’ve found that if you click the right answer after you click a wrong one you still get 10 out of 10 in the end. Same the other way around, if you click a wrong answer after a correct one. Also, you can click all the answers prior to clicking the ‘next question’ button and end up with 3 red ones and a green one. Maybe you could disable clicks after answering the first time!

3 Likes

Thanks very much @faktotum85 - I really appreciate the feedback.

You didn’t mention that refactoring the code was harder than writing it in the first place! But you’re right, I’ve added some more components and cleaned up my App.js and things look much cleaner. Not updating DOM directly also led me to learning useRef which was good.

One last question - you mention that you like to have return statements at the top of a component? Surely this wouldn’t be possible when you have some logic that needs performing first on which the return statement relies?

Great to hear the feedback was useful!

Sometimes there are some things that need to happen first, true, but those shouldn’t take up much space. If I’m defining some helper functions though, I like to do that below the return statement. When using function declaration (rather than an arrow function assigned to a variable) the function gets ‘hoisted’ to the top, so you can use it before it is defined.

You can read a bit more about it here:
http://adripofjavascript.com/blog/drips/variable-and-function-hoisting.html