CST438 - Module 2

What did I learn in the second week of CST438? 

This is the second week and this time we went over a lab building a settings page. It was built using prior .jsx files to construct the Settings.jsx, while wiring up controlled inputs and buttons to properly talk to the Spring backend from the browser.

The pattern used most throughout the Settings.jsx was useState paired with the value and onChange on every input. Essentially, React cannot read the DOM directly without certain pieces of code being wired beforehand, as the input's value is whatever the state variable was last set to, which is then updatable through the onChange handler pushing whatever was typed within that field being shown. Basically, the save handler compared the current name state to the initial name loaded from sessionStorage and only updates when the field is changed within the payload. Furthermore, I also learned routing with react-router-dom, which was pretty interesting given how dropping the route and then the link in felt like swapping components or modules.

The first strength I saw was composition. In short, every .jsx file had its own structure, making them small, while making the markup and the state driving it live within the same place instead of being a conglomerate associated by IDs. The second strength was how the useState collapsed the stored value and re-render into a singular line without DOM updates.

The first weakness I saw was that there was no compile-time safety around the network boundary, which can lead to a cascade of issues if a singular typo or wrong payload were to silently fail without any notification returning 400 or 401. The second weakness is that the authorization lives within the sessionStorage, which any user opening developer tools could potentially edit, leading to the backend needing to re-check everything.