$ ls -R ~/








Learning React From Tutorials


Date: 04/25/2019

I’ve finally taken a break from other projects to start working on learning React.js; I’ve gone through courses on LinkedIn Learning, and read a number of articles about it, but had yet to actually code something in React. This time, I decided to get my feet wet by learning react from a tutorial.

The tutorial in question is on building a metronome in React. My goal wasn’t to just build what was in the tutorial, though; that’s the easy part. Honestly, you could just copy & paste the code and say you’re done, but how are you going to learn React that way? No, I wanted to actually DO something with it.

So, not only did I type out my code, but I also added a new feature: A tap tempo.

Here’s the details on how I proceeded.

First, I’m running Linux subsystem for Windows on my primary dev machine. If you want to work the way most people are in the industry, and you run Windows, you’ll need this. Why? NPM, Git, etc. all operate commonly through the command line. While others may say you need a Mac to do proper web design/dev now, that’s simply not the case. I’ve been working on PC for my entire career; I did actually work on Macs (and supported them) for about 7 years when I was in the newspaper industry, but ultimately, you can do everything on a Mac that you can do on PC.. And for cheaper, but I’m getting away from the topic.

Once I completed the tutorial, I set to work planning out my extended functionality. I added 2 functions; one to initialize the tap tempo and start recording taps, and another to stop the tap tempo recording and create the new BPM. I also added 2 new buttons to match each function, and adjusted the styles.

React Metronome Tap Tempo Screenshot

The going was slow; I had the overall mechanics thought out, but there were difficulties. One, scoping in React is different than what I’m used to. Two, I was utilizing the Date() function as part of the math to get the new BPM. I reached out to Reddit and Stack Overflow, but ended up solving issues on my own, thankfully. I just had to step away from the code for a bit and it eventually came to me.

If you’d like to see the code for the full project, you can check it out on GitHub. Happy coding.