A Reflection on Learning React
I’ve come to the end of Phase 2 of my software engineering studies with Academy Xi. As I did after my Phase 1 project, I want to take a moment to reflect on the phase as a whole before focusing in on my end-of-phase project.
Phase 2: React
After the steep learning curve of Phase 1, JavaScript, I was definitely feeling apprehensive about starting the next phase, with the perfectionist in me slightly dragging her feet at the thought of moving on to React before becoming highly proficient at vanilla JavaScript. While my perfectionistic tendencies have been advantageous in learning to code thus far, I am very aware of not letting this hold me back from moving on and learning new skills.
Once I got stuck into learning React, these concerns were quickly forgotten. I found that it quite quickly clicked for me, and the remaining weeks of the phase were filled with plenty of “ohhhhh” moments as I thought back to my Phase 1 project and how much more streamlined and organised my code could have been with React. There were plenty of frustrations along the way too, of course, but I was very much ready to get stuck into my own project and put my fresh skills to the test.
Recipe Stash: My end-of-phase project
The inspiration for this project came while scrolling through endless bookmarks on my partner’s phone, trying to find a recipe from way back that I wanted to make again. It dawned on me that this would be a great idea for my upcoming React project, providing a place to store all of my favourite online recipes.
The project allows the user to view their collection of recipes as cards on the ‘Your Recipes’ page. They can filter recipes by savoury or sweet and search for specific entries.
From here, users can click on each recipe, which will take them to a page with additional details. They can visit the external recipe link, adjust the counter to reflect how many times they have made it, delete the recipe, and add comments.
Users are able to add new recipes to their collection on the ‘Add Recipe’ page. They can also visit the ‘Meal Inspo’ page, which suggests a random recipe using data from ‘The Meal DB’ API. If interested, they can directly add this recipe to their collection or request a new suggestion.
Key Learnings and Challenges:
While completing labs during this phase, I found it really helpful to put pen to paper and map out my component hierarchy before starting on the code. This was more challenging with my project, as I found that unlike a lab with specific deliverables, this component hierarchy grew and changed as my project progressed. It became really important to take time out to regularly redraw the component tree.
Doing this ensured I always had a good understanding of the “big picture”, which helped in a number of ways. For example, I had difficulty at times determining which component would be best to maintain state in. I found coming back to my component hierarchy most helpful for this, giving me a clear visual of which components need access to it and the information flow required between them. It also helped a lot with debugging by knowing exactly where to test out the code.
One of the key things I wanted to achieve with this project was to gain confidence using React Router. This was one of the last things we learned before our projects were due, and so I had the least amount of practise with it. In particular, I took some extra time to more fully understand dynamic routeing and programmatic navigation, using both useParams and useNavigate in my project.
One skill that has significantly improved since my Phase 1 project is implementing responsive design. I was able to mostly accomplish this as I built the code, rather than the more difficult process of re-working my code later to incorporate it. This gave me a lot more confidence in my ability to execute particular design layouts, leaving me more time to focus on developing my React skills.
Final Thoughts
Overall, I really enjoyed Phase 2, finding that the structure and organisation of coding with React clicked quite well for me. I was able to utilise the key takeaways from my Phase 1 reflection (*ahem* starting earlier amongst others…), which allowed me to gain even more from the process of completing this project. I’m feeling very positive moving into Phase 3 and am ready to dive into learning Ruby.
