Learning React by building my first project and trying to refactor my code.

Has it ever occurred to you how little room you have for experimentation when you go through the first draft of your code? This is often because you are building a new project while learning a new technology. This is why it’s good practice to take the time, enjoy the breathing room and refactor your working code at the end of a project. It allows you dive deeper into the understanding of concepts and give your code and yourself a lot more clarity. In this article, I want to show you I learned React on a deeper level by paying attention while refactoring.

This project was gotten from the Front End Libraries section in the FreeCodeCamp curriculum. Let’s jump into the code and see how I built it.

A Random Quote Machine in React:

This is the view of the Random Quote Machine:

My random quote machine.

The code:

This snapshot was how my code was structured when I got the random quote machine to work the first time. Developers who are good at what they do know that the first “it works” code structure is not the best. It can re-written in a better way. Leaving your code the same way it was when your app or feature is working is a bad idea for one major reason i want to point out.

You probably don’t understand everything you wrote on your first try.

Getting your app to work as developers is born mostly out of stackoverflow and blog posts which is not wrong (I mean every developer does this I would guess), but it’s mostly a copy and paste exercise. Refactoring your code helps you question many of this helps and in turn helps you understand your code base better.

Refactored code:

Looks better right? Awesome.

I want to walk you through the changes I made and why I made them.

The Explanation:

1. The constructor: In my first snapshot I had a constructor after my class declaration to initialize my state and bind the class methods. Well according to the class properties proposal, Public Class Fields allow us to instantiate class properties without having to write the constructor.

What happens is that Babel transpiles the code and adds the constructor behind the scene. So it’s there but you don’t see it. Neat right?

For a more detailed understanding checkout Donavon West’s article on this.

2. Constructor Binding: The first code snapshot had this.handleRandomQuotes and this.getRandomQuote in the constructor . For methods to work well in the class with this , we have to bind it in our constructor . But since we have removed the constructor from our code, there has to be a way to take care of this.

Arrow functions solve this problem. Apart from the beauty of clarity that it gives us, arrow functions help us point this to the class as we would have done with the .bind(this) hence the removal.

So far I took advantage of latest Javascript features and made some small changes to our code that made it neater to read.

Did you see how I ignorantly used the .bind(this) and the => at the same time in the first code snapshot. That’s one of the thing’s you notice and learn from when you refactor.

When it comes to constructor binding( .bind(this)) vs class properties ( =>), there is also a great advantage of reducing memory usage. This can be well understood from here.

3. Naming and Restructuring: When refactoring code, naming is one of things to take note of. When methods are named properly comments would not be needed. I renamed my handleRandomQuotes method to changeQuote that describes what it does better.

In the getRandomQuote method I had my QUOTES array inside it. That was a smell so i decided to remove it from there and access it normally making things look better.

Conclusion:

Starting out React this way was as frustrating as it is was interesting, but I’m grateful I did so. This experience has helped me get started with React by building a project. Much more to learn and build.

Till next time, keep hacking.

You can check out the code on my github repo.