Extreme Makeover: Code Edition (React)

Last time on Extreme Makeover: Code Edition, I refactored my couple years old personal portfolio website using my newly acquired Javascript skills. This week, we refactored that same site, this time using React.

My favorite discovery in redoing my site in React was having a lightbulb moment about what I was trying to accomplish with my original code. In my original version of the site, I had used iFrames to mimic the idea of a static half of the page, and a dynamic other half. I just couldn’t figure out how sites were able to avoid the constant reloading of the webpage. Cue learning React, and *lightbulb* where I finally understood what I was trying to emulate. Without having the vocabulary for it, I had been trying to create a single page web application. A single page web application allows for the dynamic rendering of components (rather than reloading of an entire webpage.) My goal with the site was to give the user a seamless user experience, where the content of the orange rectangle never changed, and the content of the purple rectangle would render based on the navigation selection.

With React, I split these into components (Photo Container, Nav Container, and Body Container) and used React Router to determine which content component would render in the Body Container.

My goal was to keep the orange rectangle content static, while the purple rectangle content re-rendered, like below

In redoing my site with React components, I was finally able to build that single page web app I’d dreamed up (without even knowing it) all of those years ago! Next up, learning how to deploy my site with a backend database...