Learn React by building a web app — Week 7

It has been a busy two weeks of reading, listening to podcasts, and watching talks online. I did manage to make a few updates and bug fixes to Coinsly which I’ve listed below.

Podcasts

I had some time whilst travelling to London recently which gave me time to catch up on a few podcasts I’ve wanted to listen to.

• React Router with Michael Jackson — egghead.io developer chats
• Setting Up and Getting Used to Gatsby with Aman Mittal — React Round Up
• Dev Environments — CodePen Radio
• Advanced Component Patterns and Downshift with Kent C. Dodds — React Round Up

Videos

• Dan Abramov: Beyond React 16 | JSConf Iceland 2018
• Getting Started with Create React App
• Debugging a Create React App with VS Code
• Adding Storybook Style Guide to a Create React App
• Forking instead of Ejecting a Create React App
• Add ESLint & Prettier to VS Code for a Create React App
• Bootstrap a React App with Parcel
• What’s New in React 16.3.0
• Polyfill React 16.3 New Lifecycle Hooks

Blog posts

• How to React ⚛️
• Use a Render Prop!

Changes to the Coinsly app

A very quick run-through of the changes I’ve made.

• Updated package dependencies to latest versions.
• Fixed firestore warning by passing a timestampsInSnapshots: true setting.
• After first signing in an error was being thrown because the filters prop in the Filters component is null when created. To fix this I provided a default value of an empty array.
• Fixed issue with totals component where NaN was being displayed on initial load because the default values in state are set to 0 which causes a divide by zero exception when working out the percentages.
• Refactored coinHelper to use a new filter method, and to prevent multiple copies of objects being made.

You can check out the code on the GitHub repo, or view and run it in the CodeSandox window below.