Description

I recently upgraded this project to React 18 using a top-level React class component AND functional components. The class component contains the state, and the other components contain the props.

I use the react-lazy-load-image-component package to implement lazy loading of my Robohash images fetched from the Robohash API, some of which sometimes did not load immediately and left an (ugly) image placeholder. Then I would literally have to manually clear the browser cache and reload the page to fetch those straggler images from the API. With the react-lazy-load-image-component package, images are loaded from the top down instead of the other way around, and this resulted in much faster and successful loading of all the images from the API. In addition, I use yarn, create-react-app, try catch for error handling, async/await, scss modules using dart sass, and hosted the project on gh-pages.

Project Includes

apis, api error handling, create-react-app, css grid, css in js, (dart) sass, es6 class constructor method, es6 superclass constructor method, fetch api, flexbox, javascript object, manipulating the dom, mobile friendly, modern javascript, npx, react 18, react event handlers, react image lazy loading, react virtual dom, setState() method, template string literal interpolation, this, yarn

• View Monsters Rolodex 2022 (Classes) on Github GH Pages

• View Monsters Rolodex 2022 (Classes) Repository on Github GH Pages