Raspberry Pi Project Build #2 - Building a client using ES6 + ReactJS

Once I got the simple client, built with HTML and jQuery, on the server going and could see it was sending messages, I knew I wanted to change this and build it with ES6 and ReactJS instead. I've built some small projects so I could learn React and I've built some tools for User & Admin dashboards for a project at my last job, but I honestly hadn't written any JS or React in a few months and was pretty worried how it would actually go. And I had only recently dabbled with ES6. I created a project within my server using the React Create App CLI, which takes care of all the configuration, leaving you only to have to worry about building your project and allowing me to quickly get started.

I have found the most important thing that I have learned as a software developer is that you HAVE to break big tasks down into the small bits of tasks to make them manageable. So, I started by getting the SocketIO client setup again and making sure that that config was sending messages to the server. Then, I wanted to start on the layout. I made a sketch of what kind of UI I was hoping to achieve to keep me on track:

Mockup of my UI design

The mockup shows that I should have a grid of 64 squares, representing each of the LEDs in the UnicornHAT. When a user clicks on a square, the color changes to indicate that square will be illuminated on the Pi. Once a user enters their design and clicks submit, that design is immediately sent to the Raspberry Pi and is displayed for 10 seconds. At first users wouldn't get to select colors, but, eventually, there should also be a slider bar where a user can select a color, then click on one of the squares and select that color for a square.

There's a good bit to figure out and build here, so I started at the smallest part, a Square component. Then, I created a Board component, a grid of 64 Square components. It really is all about working on reasonably sized tasks that are small in scope and build upon those to increase the complexity of your app. I did struggle for a little while to get the board component looking ok, updating state properly, and in an 8x8 configuration.

I've found that working with ES6 has really made writing JS much more of a joy for me. I actually really, really enjoy it now. Things just make a lot of sense and the find the code is clean and is much easier to navigate than ES5.

At this point the squares did not change color when clicked, only updated a boolean field from false to true. I was anxious to actually get the raspberry pi and find out if my design decisions were going to place nicely with the pi, before going too much further on this.

At this point, I still didn't have my raspberry pi yet, so I also played around with add some authentication for the socketIO clients with the server. It wasn't terribly difficult to setup, but it is hard to find easy-to-understand documentation on how to do this stuff. It was also tricky since I needed to code this in both JS, React, and Python. 😏 It was also a bit tricky deploying the react client on heroku since it was within the Express server. I didn't want to have to worry about having to manually build/minify the app before deploying it. So, I eventually figured out that I could edit the scripts in the express server's `package.json` file and get the react app to be built upon every deployment to Heroku. This ensures it is the most up-to-date and correct version of the React client every deployment.