Phase 1 (JavaScript) Complete! Onto Phase 2 (React.js)!!!

Jay Lee
4 min readJan 22, 2022

After 6 weeks (1 week off for the end of year holidays break which did make the experience a little disjointed), I’m happy to write that I have completed Phase 1 of Flatiron School. Phase 1 of the Software Engineering curriculum is mainly based on vanilla JavaScript including elements of DOM Manipulation, JSON Fetching.

For full transparency: I AM NOT A JAVASCRIPT MASTER

Shocking, I know! All the promises of the coding bootcamp and I am already a failure. But as Winston Churchill said:

“Perfection is the enemy of progress.”

I did not have any opportunity to really celebrate Phase 1, as we transitioned straight to Phase 2 where our focus has shifted to learning React.js, which is a JavaScript library. What that means is it is a slightly different syntax (built by engineers at ̶F̶a̶c̶e̶b̶o̶o̶k̶… sorry Meta) built upon Javascript that will translate the syntax into more elaborate Javascript. To simplify even further, React.js is like a series of hotkey keystrokes (like CTRL+V = ‘Paste’) that allow developers to build highly interactive single-page apps. Using React.js, developers can build individual components in a web-based app that can be individually coded, rendered, updated, and repeated.

Each of the individual colored boxes are components. Source: https://reactjs.org/docs/thinking-in-react.html

Now instead of having to recode a whole site when changes need to be made, only the component that needs to be changed can be recoded or rerendered, and it can also be tied into APIs/databases so that the components update themselves dynamically. The APIs/databases can even be updated on the same site (through a different component) and then different components that are passed the information from the APIs/database to reflect the most recent information. The user can use the front end to update the back end (keeping that information for later and for others to use) that in turn updates the front end for them to see immediately. The user experiences a singular multi-faceted dynamic website, that is in fact made up of many individual coded files that all interact to become what the user sees on the screen.

New Haven, CT’s favorite son. Source: https://www.eliwhitney.org/7/museum/about-eli-whitney/inventor

I grew up in central Connecticut near Whitney Ave, which was named after local historical figure Eli Whitney who is most renowned for inventing the cotton gin (which resulted in his complicated legacy). He also had a profound impact on the American Industrial Revolution by standardizing the manufacturing process with interchangeable parts so that factory workers could focus on building one part of a product vs. the whole product with benefits beyond just increasing the speed of production. Eli Whitney once said:

“One of my primary objects is to form the tools so the tools themselves shall fashion the work and give to every part its just proportion.”

React.js brings that same idea and process to web development. All the same benefits of updating, upgrading, repairing, and troubleshooting only individual components vs. having to rework the whole apply just as it did when Eli Whitney’s factory manufactured firearms.

(I had to give a presentation in the third grade where I had to role-play a local historical figure in front of the class and I chose Eli Whitney. Undoubtedly this Eli Whitney/React.Js analogy would have more impact if I had a picture of me dressed up as Eli Whitney on hand. I did convince my parents to take me to the awesome Eli Whitney Museum though. This assignment was probably one of my earliest exposures to acting which they might regret…)

React.js is built upon JavaScript, and as a result, has similar syntaxes which come with different challenges. Deep knowledge of JavaScript makes using React.js easier, but not essential, but the slight differences in syntax mean it can be confusing to use. It feels like a dialect of JavaScript. Technically someone speaking JavaScript and React.js can communicate, but it is not always clear what specifics are being said, and knowing one does not automatically imply knowing the other.

The analogy (yes I know my second analogy of this post, but analogies are a great way to communicate complex ideas but that’s a whole separate post but if you are interested look into the work of Nick Winkelman or check out this video of him: https://www.youtube.com/watch?v=kBcjzjndAF0) that has resonated with me is React.js is to JavaScript as Latin is to a romance language like Spanish. React.js and JavaScript look and sound the same to the layman just like Latin and Spanish look and sound the same. Knowing JavaScript is key to unlocking a lot more functionality to React.js, especially when implementing logic.

As I admitted above, even though I’ve learned a bit of Latin, I’m hardly fluent and here I am also learning Spanish, but I can speak both with some competence. Thank goodness I have the support of Flatiron School to be my tour guide/translator on this journey, and also Google to be my Google Translate.

Let’s go that way. You wanna come?

--

--

Jay Lee

software/support engineer with a health/wellness coaching addiction and an awesome dog based in Brooklyn