12cassie34 / quizzical

A React exercise project

Demo Page Here

Table of contents

• Overview
  • What I learned
  • The problems I encountered
  • Links
  • Screenshot
• My process
  • Built with
• Author
• Acknowledgments

Overview

The exercise is from the course - Learn React for free created by Bob Ziroll from Scriba.

In the website, an user can play a quiz game with 5 random questions provided by Open Trivia

What I learned

In this exercise, I learned:

• Use useState to create variables, mutate them and let variables reactively change on web page.
• Use useEffect to call external APIs to avoid side effects in React.js

The problems I encountered

StrictMode

• When using useEffect to fetch API's data, it will call API twice. It's because I turned on the "StrictMode". It will render components twice. Fortunately, it only runs in development mode.
• Discussion on stackoverflow: React Hooks: useEffect() is called twice even if an empty array is used as an argument

re-render

• When a data is updated in a JSX, React will re-render the whole JSX. It will cause some problems if we want some datum be the same, like datum we fetch from APIs. Therefore, we have to handle the data update carefully.

Links

• Solution URL: Quizzical
• Live Site URL: Live Demo
• The Layout Design URL: Quizzical App

Screenshot

My process

Built with

• Use vite to create the project.
• Semantic HTML5 markup
• React - JS library
• tailwindcss - the utility-first CSS framework

Author

• Medium - [Cassie，來學]](https://medium.com/@cassiecoding)
• Cake Resume - @SHANYU LIN

Acknowledgments

• Deploying Vite App to GitHub Pages by Shashank sharma