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?
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.
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.
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.”
import statement for both components and resources as well as some practical experience with React’s lifecycle methods and manipulating state.