I’ve recently gotten a new project where I’m having to pick up a slew of new skills, including Facebook’s React JS library. As with learning any new library, it can be easy to get “tutorialized”, but harder to get truly proficient. Effectively you need to move to a third system or Goldilocks architectural thinking with any new tool as soon as possible, which means trying out the tool multiple times to get a feel for it.
I wanted a way to practice the React skills I picked up in Facebook’s tutorials to that end. And I wanted a way to see the basics of HTML 5 local storage, which I’ve long read about but never used. And I wanted to quickly flip through different versions of the code that used different skills.
But the tutorials hid their important bits in multiple different demos, with links buried within paragraphs of text. Their Git repos required you to setup either multiple repos, piece together changes from logs, or switch between branches to see the differences at a glace. You couldn’t see the shape of the program grow in the tutorial. You missed the forest for the trees.
There had to be a way to put everything together in one place. Easily indexed and referenced. You could see a project grow organically over time, using additional concepts as they were required. The code wouldn’t be lost in the text.
That’s when I decided to make this collection of versions of my React TODO app. It is a very basic app, much like many that you can already find on Codepen.io. But instead of a single complete demo, I’m snapshotting each new feature I make into a separate pen in the collection. So you can flip from the most basic, to my most advanced. The app is also intentionally CSS starved at the moment, to focus on the mechanics of React and local storage, making it a better tutorial app than other demos. I feel much better about my understanding of React now, and I bet my app could help other’s learn React too. I plan to continue adding to these demos for a while, so remember to check them out again in a couple of weeks if you find them useful.