It's technically day 6 now, and I committed to delivering two projects this Saturday, when I have time, so let's call the project I owe today Day 5. And now I'm uploading day 4's project the morning of day 5 (whew). So here's day 4's project: the Harry Potter Remembrall.
What is a Remembrall?
The remembrall is a funky device whose first appearance in the Harry Potter series was when Neville Longbottom "received one as a gift from his Gran at the beginning of the 1991-1992 school year". Its purpose is to glow red when the user has forgotten something. The bug- or perhaps feature?- in the Remembrall design is that it gives no indication of what was forgotten. True to form, this is exactly what today's (or rather last night's) React project attempts to replicate.
Design
I had declared earlier in the week that I would do a project that used sessionState as a backend. That means that even when a user refreshes the window the Remembrall can still function, with memories stored in sessionStorage. Unlike localStorage, sessionStorage does not persist after the window is closed. This makes it safer than localStorage and is the reason it was created. In the app we have a couple of components that render the header, the remembrall gif, user input, and action buttons. Local state objects in the user input component keep track of the value of the text input, making it a controlled component.
Parcel vs Webpack
I encountered my first big problems using npx nano-react-app today and had to abandon the project completely and switch back to webpack. While trying to use a .png image I encountered a fatal runtime error saying something like "no transformers for ./image.png'. I did some digging and found a bug report on the Parcel site- this is the bundler being used instead of Webpack to make the package small. Essentially a Parcel contributor answered saying "if we fix this it will break other things" which meant I couldn't import the picture for some reason. Add to that the fact that about half of the time I used nano-react-app there were fatal build errors that would go away only after stopping the process and running npm start again. I guess this is the advantage of using the popular solution-- it just works. I'm going back to create-react-app. It was good while it lasted Parcel.
Summary
Overall this was a fun exercise in passing functions down from parent to child components through props, and a good reminder to keep all of the important data in app-wide state. The goal for tomorrow is to figure out why there is a big whitespace just outside of the right side of the App component in the window- just past 100% of screen width. I didn't have time to figure it out today before getting on the train to work. #DoneIsBetterThanPerfect
Stay tuned this evening for day 5's project.
repo: https://github.com/jwhubert91/100daysofreact/tree/master/day-4-remembrall
deployed site: https://100-react-projects-day-4-remembrall.netlify.app/
Follow me on my fun new Twitter! @jwhubert91
Top comments (0)