As Phase 2 of Flatiron School Bootcamp wraps up at the end of this week, I wanted to share my perspective of learning client-side routing with React from last week. Over the weekend, we were tasked with completing a guided project with core deliverables that included fetching sample data of notes to display in an app very similar to Evernote. Deliverables included viewing/displaying, filtering, editing, creating notes through GET/POST/PATCH methods to our server. One of the stretch goals asked to use react-router to create a multi-page app.
We had also just learned how to use react-router to route Components based on events. It was clear from our lecture how much cleaner our code was just by simply linking one action to dynamically show the correct DOM elements. Given this newly added complexity to using React, and how many components were at hand for the weekend project, I wanted to really hone in on my process to stay organized. React already had so many moving parts with states and the flow of props from child to grandparent components, the planner/organizer in me was itching to find an effective way to visualize my component tree while tracking where my states and props should be passed to.
After crossing out too much in my notebook, I decided to explore digital options and luckily landed on lucidcharts. I quickly found it to be my go-to tool for brainstorming and documenting ideas that stuck while allowing me to share and construct visuals in a fairly straightforward way. I tasked myself with jotting down every state and prop in my component tree. The goal of this exercise was to:
- Quickly get comfortable with my process of drawing out a component hierarchy tree
- Keep track of where states and props are, along with the data flow
- Develop a quick understanding of how much less there is with client-side routing through a straightforward visual comparison
After tackling the core deliverables, my diagram looked like this:
There was a ton going on, I almost ran out of colors to track which deliverable corresponded to what color. This initial view also helped me plan for client-side routing and where I saw the opportunity to remove a lot of “code clutter.”
Once I set up the appropriate routes and links and confirmed they were all working together, I started removing states and props that were redundant (the fun part!). The final state of my diagram looked like this:
What I learned from this exercise:
- 3 states and 5 props were removed
- Code looks WAY cleaner with the removal of several event handlers and setter functions
- This has drastically reduced the amount of time I spent in the swamp of despair, stuck on figuring out what I just did, what went wrong, and what to do next.
The planner in me was quite content after realizing this helped me check off the goals of this exercise, and I completed the project feeling fairly accomplished. I hope this post helps other beginner developers find their way of staying organized with this tricky and minimalist programming language.
