Today’s plan is to complete the MDN tutorial on creating a Todo app in React, and start adding some features. My intent is to create more of a shopping list that can track wishlist and purchased items with urls, persisted in local storage.

MDN Tutorial: Todo App in React

Day 9 Code

As of this commit, the tutorial is complete.

Again, not much to note as everything is clearly explained and works. IT looks like this:

Todo App

(The one part of the tutorial I didn’t read closely was the CSS, which seems like it’s developed into a language in itself, with some powerful features.)

Functional Additions

Local Storage

Changing the React app to use localStorage instead of a hard-coded initial state turns out to be straightforward. This article provides a nice function that nicely wraps the useState hook.

Since I don’t plan to store much data in the app, and it’s for unimportant data even if I end up using it regularly, I’m not concerned with the potential issues with using the browser’s local storage.

Minor UI / UX Changes

  • style updates
  • pre-load existing value when editing
  • add placeholder for main item input

Change Item State Set

Rather than a boolean completed state, the app should use [wishlist, purchased, archivefd], with default showing wishlist.

I got stuck here… the code compiles but adding a task yields cryptic erros. React suggests using error boundaries, which I’ll try tomorrow.

Wrapping Up

Coming from Elm, it’s a bit frustrating to find that neither the compiler nor the run-time provides helpful debugging messages. Undoubtedly, the error is trviail as I’m making incremental changes… I’m probably not following recommended debugging procedures, though, and for that matter have no tests.

Tomorrow – the last of ten days! – I’ll try to debug nad finish adding some functionality to the shopping list app.

Todo / To Read

  • Using flycheck with React / web-mode / .jsx in emacs
  • MDN accessibility: ARIA
  • Figure out how to use outDir(?) to compile .js files to separate subdirectory
  • Compiling with both TypeScript with Babel
  • Kyle Simpson, You Don’t Know JS
  • Composing Software, by Eric Elliott (https:// leanpub.com/composingsoftware)