What could be better to learn React than an featuring a fish from a 1991 videogame? Clearly, the answer is nothing. Okay, honestly, the actual purpose was writing a compact React application in ES2015 to teach myself both, but if you can do two things at once, you might as well, right?

Getting Started

The first hurdle I faced was setup. My first attempt was following a five-part tutorial based on some online tutorials for React I’d gone through. It worked, but it was long and involved just to get to the part where I could write any code. It also wasn’t meant for ES2015; it didn’t compile that correctly. While I could’ve configured it to do so (probably?) if I’ve learned one thing it’s that there’s always time to step back and ask if another approach is better.

In this case, there was a pretty good answer to that question. Based on what I’d learned from doing the above I had a much better idea what to search for and I found the answer: Yes there is something better, and it’s Facebook’s Create React App. CRA is great for small React projects, compiles ES2015 just fine, it fits right into my existing set of dev tools, and I’m a huge fan of anything which, once configured (and you only do that once), involves exactly one command to start an entire project. create-react-app appname has some real elegance to it.

Development

My development process was fairly well defined from the start – there were a lot of mistakes and learning moments, but I followed this basic plan:

• Get the fish to render at all
• Get the fish to move around
• Extend movement so the fish faces left when swimming left and faces right when swimming right
• Extend the now-swimming fish to respond to clicks for an onClick event

And more or less that’s what I did. I also added some proper style to replace some early placeholder code and then immediately rewrote that proper style in SASS, following the same pattern as the functional development: Create the most basic part first and then extend until done.

Lessons Learned

Overall, this strategy worked out really well; while there were plenty of moments of “okay how do I do ____,” but because I had planned the application out in advance for myself there were not many moments of “okay, what do I do.”

It’s not perfect – I could’ve done a better job breaking it into smaller components and the click event handling isn’t very robust, but as far as going from concept to MVP I think it worked quite well, and as a learning experience I learned a lot: How React handles javascript’s import statement for both components and resources as well as some practical experience with React’s lifecycle methods and manipulating state.

Reactfish can be seen here: https://peterbreen.github.io/reactfish/
And the Github repo here: https://github.com/PeterBreen/reactfish