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: The : In my first snapshot I had a after my class declaration to initialize my and bind the class methods. Well according to the , Public Class Fields allow us to instantiate class properties without having to write the constructor. constructor constructor state class properties proposal What happens is that transpiles the code and adds the behind the scene. So it’s there but you don’t see it. Neat right? Babel constructor For a more detailed understanding checkout Donavon West’s article on . this 2. Constructor Binding: The first code snapshot had and in the . For methods to work well in the class with , we have to it in our . But since we have removed the from our code, there has to be a way to take care of . this.handleRandomQuotes this.getRandomQuote constructor this bind constructor constructor this Arrow functions solve this problem. Apart from the beauty of clarity that it gives us, arrow functions help us point to the class as we would have done with the hence the removal. this .bind(this) 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 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. .bind(this) => When it comes to constructor binding( ) vs class properties ( ), there is also a great advantage of reducing memory usage. This can be well understood from . .bind(this) => 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 method to that describes what it does better. handleRandomQuotes changeQuote In the method I had my array inside it. That was a smell so i decided to remove it from there and access it normally making things look better. getRandomQuote QUOTES 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
