Flatiron Phase 2: React
Phase 2 of the Flatiron school’s software engineering program has continued to be interesting and motivating. This phase built off of phase 1 by introducing React as a tool to use on-top of the JavaScript. React has taken much of the tedium out of creating a single-page website, though with being a powerful tool came some harsh learning curves. After learning the basics of React, I am curious to see the other tools that are commonly used in front-end development. I have read about many other tools that are commonly used along-side or in place of React, and I am curious to see how the skills I am learning now translate in the future.
Around the mid-point of this phase, I found myself with a familiar feeling of “imposter-syndrome”. The lesson was straight forward but required me to pass data to other components as props. This was covered in previous lessons, and while I thought I had grasped the concept well, this particular exercise intentionally left the component hierarchy up to the student. I struggled in deciding which component should contain the imported data’s state variable. State in React allows a component to individually update independent of the rest of the page. This feature takes a stale website and creates a dynamic environment capable of fluid movements and instant changes. However, state does not update in sync with the rest of your code. Because of this, I found myself in a mess of code; writing and re-writing function after function to get my application to update properly. The crux of my problems was sorting a list of item cards when an element was clicked. The function I had originally written would sort the items only after the page was refreshed (a feature not present natively on the site). Eventually after days of trial and error, I was able to successfully route the props of my components to update when requested, and my confidence was restored.
This lesson likely would have been completed the day I started it had I been able to clear my mind and re-analyze the structure of my code. I am finding more and more frequently in my work that a fresh pair of eyes are much more effective. Often times I will sit with a problem, trying time and time again to find a solution, only to immediately resolve it the next time I sit down to try. A skill I want to build over time is to be able to refresh my mindset and continue working without needing significant time to pass.
An application I have been using throughout my Flatiron journey is Obsidian. Obsidian is a markdown based text editor that facilitates saving organized notes across multiple devices. This software is majorly open-source, and users are encouraged to create their own extensions and CSS snippets to create the ideal work environment for themselves. There are many extensions for to-do lists, and wishlists, many of which I have tried, but I have always returned to pen and paper. I want to eventually develop a fully-fledged application that can be used in conjunction with Obsidian (potentially markdown based) for making lists. As I stated above, I am currently working on developing my workflow to prevent the need for long refresh periods when I am stuck. I feel that a listing/notetaking combination could facilitate this change.
For my final project of phase 2, I made a wishlist application that allows a user to create a list of cards for items in a wishlist. I wanted to build off of the card style website we have been using throughout this phase. As someone who spends a great deal of time working on multiple devices, I wanted a tool that could help me stay organized when moving from location to location. On top of this, I am also the kind of person who until recently has always preferred handwritten notes. While I am not able to create the product I am looking for (yet), I wanted to design something useful that I felt fit into the same market. Items in my app are modular; can be edited, deleted and in-case something is accidentally deleted they can be restored from a recently deleted page. Additionally, these items can be sorted based on necessity, name, and their price.
function handleDeleteRestore(event) {
event.preventDefault();
//Create a temporary item (tempItem) to store a copy of the item being deleted/restored.
//Assign the negated value of .deleted.
let tempItem = {…item}
if (tempItem.deleted ) {tempItem.deleted = false} else
if (!tempItem.deleted) {tempItem.deleted = true}
//PATCH the json file with the updated value.
fetch(`http://localhost:3000/items/${item.id}`, {
method: "PATCH",
headers: {"Content-type": "application/json"},
body: JSON.stringify(tempItem)
})
.then((response) => response.json())
//Map the updated item to items (state) using the same method.
.then(() => setItems(items.map(thisItem => {
if( thisItem.id === item.id ) {
let tempItem = {…item}
if (tempItem.deleted) { tempItem.deleted = false } else
if (!tempItem.deleted) { tempItem.deleted = true }
return tempItem }
else { return thisItem }
})))
}My biggest problem while making this project was a repeat bug. When creating new components that required a list updating (ItemList, DeletedList) my components would not re-render on an update. Manually refreshing these pages would show that the json file was receiving the correct updates, but for some reason or another I was struggling to make sense of the logic behind the state updates. Late in my development, I added both the deleted property to an item, and the DeletedList component. To utilize these features, an Item needed to be remapped to the json file with the deleted key being either true or false. This was simple; however, I was struggling to implement the mapping of state after the json file was updated as I did not want to re-fetch the data. If the item I was updating was not copied using the spread operator, the component would not update until the page was refreshed.
This project was extremely fun to put together. I once again found myself adding extra features, cleaning up what was already particularly clean, and trying new things. While working, I recognized my growth in both knowledge, workflow, and design. I cannot wait to keep moving forward.
