After getting inspired by my “Learning Golang in 24 hours” exercise, I decided to broaden my developer toolkit further by learning the React UI framework. Of course I had to keep the same theme, so this was going to be a “Learn React in 24 hours” binge and would result in a simple CRUD UI on top of the CRUD service that I had built using Go.
There were a few things different, of course. I have been a backend engineer for almost all of my career. The last time I did any meaningful frontend work was about five years ago when I coded the user interface of my now defunct book and travel review website using Backbone js. Even that had been an attempt to learn new technologies by building something – I learnt Play! framework, ElasticSearch, basics of Akka actors, and Backbone.js to build it. Since then, however, I have gone deeper into the backend stack and not touched UI stuff at all. Hence the learning experience comprised not just of learning React, but also of learning the frontend domain.
Moreover, in the last 6-7 years, the frontend world has moved away from tools like Backbone, Angular, JQuery and YUI. These are all powerful tools, but they derive their power from being very good at facilitating an older paradigm of user interface development. The next generation of tools like React and Vue increasingly look to blur the line between user interface development for web, mobile, wearables etc. Then there are PWAs, native technologies, and so on, all of which represent what can easily be called an architectural revolution in frontend technology. I had to cover a lot of ground to even see the starting line.
I had been warned repeatedly of the elaborate tool-chain in the React world, so I was very cautious to stick to the absolute basics. I used absolutely no frameworks other than what the official react beginner’s tutorial used. I started with create-react-app and did not add any further modules beyond that. The IDE of choice was Atom.
All the code is available on Github. Check it out – I’m always happy to get my code reviewed!
Here are my take-aways from the experience.
Support this blog on Patreon
Use what you learn to not regress
React is friendly to Backend-ers
React is a vast ecosystem
The lack of auto-complete in Atom just completely, utterly sucks. I had to Google a LOT because there was no way to explore the methods being exposed by any object.
My next project was going to be to build a mind-mapping software for organizing my notes and ideas, but since discovering Roam Research that need has been temporarily addressed and I have no real project in my sight for putting my newfound React skills to the test.
When I finally get around to building the admin UI for Rulette, I will see how much of this can be put to use, or if I’ll have forgotten everything (yet again).