“Code Spaghetti”, prepping for a convoluted legacy code base in React.js

One of the benefits of attending a well-regarded and up-to-date coding program like the Flatiron School, is that you will be exposed to the most recent conventions for the chosen framework you are working on. As languages and frameworks constantly evolve and change, people are always coming up with more elegant and simple ways to write code. However, when you get out “in the wild” of your first “real dev job”, things are not so neat and tidy. One has to be ready to jump into an existing, potentially massive code base that has a lot of older syntax and standards written into it. My seasoned Web Dev friend Pat called it: “CODE SPAGHETTI”!!

Thanks to http://devhumor.com/media/spaghetti-code-1

React Challenge —

So a couple weeks post-bootcamp, I found myself in a technical challenge based around the React framework. The Dev doing my Code Review, we’ll call him “Eng II” is a High Level engineer at Amazon and happens to oversee “the Nav Bar” on their main site (ie.kind of a Big Deal). I was encouraged, by his patience, kindness and supportive manner and once again felt reassured that choosing this Web Dev path, was a good decision. However, one of his first questions for me was to write out a simple class component in React.js from scratch.

I knew right away I wasn’t going to BS my way through this, so I explained to him that in my React projects, I had often used “snippets” in VS Code, so I would often just type “R+C+C+<tab>” and BOOM! I had my skeleton of a class component.

Basic Class Component created from a “snippet”. Thank you: https://marketplace.visualstudio.com/items?itemName=skyran.js-jsx-snippets

I’ve come to recognize this as a very elegant piece of syntax for a simple React component, and kind of like a dear old friend.

Unfortunately, React was first created 6 years ago, and a Lot has happened to get to this tidy little piece of code that is a simple “Class Component”. So when, Eng II asked me to write out a basic Class Component, he was actually referring to the legacy Class Component (that can still be found on the React website: https://reactjs.org/docs/state-and-lifecycle.html)

Legacy React Component Syntax

But what is this “constructor”, “super” and “props” business exactly? Well, upon a slightly deeper dive, one finds it is actually plain old Vanilla JavaScript. (See following link for a great in-depth explanation: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/constructor)

JavaScript, jokingly referred to by one of my instructors is a “Trash Fire” of a

Our friend, JavaScript

programming language. Most programming languages can be classified as “Functional” or “Object Oriented”. JavaScript is one of a very few that is actually a “Procedural Language”. https://www.quora.com/JavaScript-is-Object-oriented-or-Functional-programming-languag In order to achieve “Object-Oriented” behavior, the language uses “Prototypes”. (If you want to go deeper into prototypes and how they function, here’s an excellent blog: https://medium.com/better-programming/prototypes-in-javascript-5bba2990e04b)

In order to access and write/read properties of a prototype we need to use the “Constructor Method”. If we don’t do so explicitly, one will be assigned. As MDN explains above: “If you provide your own constructor, and your class derives from some parent class, then you must explicitly call the parent class constructor using,” hence the “super” on the third line of the “state and lifecycle” snippet above. (Again, check out this link for a really great breakdown of this particular syntax: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/constructor)

Destructuring syntax and “this”

I built a very simple “Family Activities” Tracker as I was learning React. Here is the file of a component that has a “controlled” form with a little piece of “state” in it:

Notice that after declaring the class and it’s “export default”, one no longer has to use “Constructor” or “Super” and also “This.State” is not necessary either. Furthermore, the curly braces on line 2 are a more recent syntax called “destructuring” that helps D.R.Y. up some important pieces of code. It’s perhaps more clear in the following snippet:

Here we import several tags from “HashRouter” (“Router”, “Route”, “Link”) in one fell swoop. This is clearly a much simpler refactor than the writing out three separate imports for each tag.

If you have any legacy code snippets or React intricacies that you have come across, please feel free to share in a reply. I’m looking forward to getting deeper into existing code base refactors and improvements, ASAP and appreciate your feedback.

To Be Continued..