Day 9 of #100daysofcode: States and Hooks; a day’s lesson

As I’ve said in previous updates, I have 2 projects going on simultaneously. One of these is an assignment which is a group project. This assignment is what is taking up most of my time, as I am acting as a sort of project lead. These two projects have…


This content originally appeared on DEV Community and was authored by Ryan Whelchel

As I've said in previous updates, I have 2 projects going on simultaneously. One of these is an assignment which is a group project. This assignment is what is taking up most of my time, as I am acting as a sort of project lead. These two projects have had a lot of crossover as the tech-stacks are the same and the projects are similar in scope. They also have a lot of crossover in what I am learning and because of that, I jump back and forth between the projects as I make mistakes and learn how to fix them. While it is a little frustrating to not be completing these projects faster, I feel as if I am learning a lot more than I would if I were just trying to get the project done with.

Today

As I mentioned yesterday, I decided to start today with FreeCodeCamp's tutorial on Basic JS. The first 75 lessons were pretty straightforward. Even still, I learned a bit about how array manipulation works in JS and a bit more about how variable scope works. I'm going to continue these lessons just to make sure I have a decent grasp on JS syntax and mechanics.

As for the projects I'm working on, the entire day was devoted to working on and understanding how the states function in my group project. I mention this work because it's very relevant to my work in the artist app. Today was a loaded day, I tried 3 different structures for my group project before I finally got to a point where things were functioning as I expected them to.

My biggest problem with states was understanding how they worked with parent components and how states were passed down to child components and how to utilize setState in light of that. Many of my functions which modified state were located in the parent component, while the location of where that state was actually used was one level down. This worked sometimes, but when modifying state I would run into unexpected issues. I've since moved the functions which modify the state into the same level in which they were used and have had much more success.

I tackled this problem today by going straight to the roots of how state works and how components work in general. As such, I read a lot of documentation and watched a couple videos.

Tomorrow

Today, my team's project took precedent as I needed to get the app into a state where my other team members could actually work on their parts. Tomorrow, I plan on assessing the states of artist app the same way I assessed my team's app. This (should) take much less time as I feel I have a much, much better grasp of states than I did when I began today.

What I'm Struggling on

The entirety of today was spent on tackling what I was struggling on, and I did not stop working until I reached a point where I "solved" my struggles. There's a lot of edge cases and unexpected interactions between things in React, so I'm sure there is still more to learn here. All in all, I feel much better off with states than I did before.

If you've been following this for a little while, you might remember that my main goal for this first project of mine is to fix styling. In tackling styling, I started running into issues that stemmed from my poorly structured app. As you might imagine, the rabbit hole got pretty deep.

Anyways, thanks for following my updates! As usual, if you have any suggestions for things to look into, changes to the format you think are a good idea or ideas for my apps/projects in general, please leave a comment!

Resources

JS - FreeCodeCamp
useEffect() & useCallback() - Infinitypaul
Lifting State Up - React Tutorial


This content originally appeared on DEV Community and was authored by Ryan Whelchel


Print Share Comment Cite Upload Translate Updates
APA

Ryan Whelchel | Sciencx (2021-11-15T00:00:03+00:00) Day 9 of #100daysofcode: States and Hooks; a day’s lesson. Retrieved from https://www.scien.cx/2021/11/15/day-9-of-100daysofcode-states-and-hooks-a-days-lesson/

MLA
" » Day 9 of #100daysofcode: States and Hooks; a day’s lesson." Ryan Whelchel | Sciencx - Monday November 15, 2021, https://www.scien.cx/2021/11/15/day-9-of-100daysofcode-states-and-hooks-a-days-lesson/
HARVARD
Ryan Whelchel | Sciencx Monday November 15, 2021 » Day 9 of #100daysofcode: States and Hooks; a day’s lesson., viewed ,<https://www.scien.cx/2021/11/15/day-9-of-100daysofcode-states-and-hooks-a-days-lesson/>
VANCOUVER
Ryan Whelchel | Sciencx - » Day 9 of #100daysofcode: States and Hooks; a day’s lesson. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/11/15/day-9-of-100daysofcode-states-and-hooks-a-days-lesson/
CHICAGO
" » Day 9 of #100daysofcode: States and Hooks; a day’s lesson." Ryan Whelchel | Sciencx - Accessed . https://www.scien.cx/2021/11/15/day-9-of-100daysofcode-states-and-hooks-a-days-lesson/
IEEE
" » Day 9 of #100daysofcode: States and Hooks; a day’s lesson." Ryan Whelchel | Sciencx [Online]. Available: https://www.scien.cx/2021/11/15/day-9-of-100daysofcode-states-and-hooks-a-days-lesson/. [Accessed: ]
rf:citation
» Day 9 of #100daysofcode: States and Hooks; a day’s lesson | Ryan Whelchel | Sciencx | https://www.scien.cx/2021/11/15/day-9-of-100daysofcode-states-and-hooks-a-days-lesson/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.