Interactive Frontend Quiz App using React with Sass
Solution retrospective
I learned how to use React to build applications using components. I used some React features such as state and props to create the logic of the application. I will build better React applications in the future by learning more about React and its features together with the best practices when building applications with it.
What challenges did you encounter, and how did you overcome them?I struggled to display the images in React applications. I kept changing the URL paths of the images and it did not work. To solve that, I researched on how to fix it and it turned out that I was referencing the images incorrectly since it is a react application and it has a build feature. I need to place the assets in the public folder and reference it using its absolute path then it worked.
I also struggled on the start because I kept overthinking on how I should start the project and how I should build my components. But then I decided to just build it based on my current knowledge and just learn along the way.
What specific areas of your project would you like help with?Here are the things I am concerned about:
-
It was my first time to build a Frontend Mentor project with React. How well did I utilize react for this project? What do you think about my folder structure and my components?
-
In react, the app component is rendered in the div which has a class of root but div is not a landmark role. Tags that has a landmark role are header, main, footer, etc. Is it ok to leave it this way in a react application?
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
- I used the same sass folder structure the way I do it with projects where I use plain HTML, CSS and JavaScript. Is there a better way to use Sass in React applications?
As usual, any feedback is welcome!
Please log in to post a comment
Log in with GitHubCommunity feedback
- P@emawid
Hi Schindler! Congratulations on completing the Frontend Quiz challenge. The app aligns well with the design files and the user interface works as intended. I'm not (yet) a React developer but I think you have your code neatly structured.
If you are looking for ways to improve the app I would consider replacing the button elements with <a> tags for links on the Home page and with <input> elements (type="radio") on the Quiz page. Also, consider wrapping the options on the Quiz page with a <form> element. These changes would improve the semantics, accessibility and enable you to leverage the browser for validation. This could reduce the need for JavaScript.
One last thing, when tabbing through the pages, its difficult to navigate to the theme toggle in the header. A quick-fix could be to target :active and add a border to the toggle button.
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord