21
My Dev Journey: Week 11
This week was the final week of the front-end block of my Northcoders bootcamp, and this week focussed on creating the React front-end for the Express/Postgres back-end I created a few weeks ago.
If you've enjoyed any of my blog series, then maybe consider following me on Twitter and GitHub 😁 and I'd also really appreciate if you all could check out my new portfolio site 🙏🏼 and maybe leave a few beginner project ideas in the comments to give me some inspiration!
Because this is the last week of the front end block, we focussed on tying everything we've learnt in the past two weeks together to work with our backend projects, mine being hy-games, an api I created to query for information about board game reviews, and review votes and comments.
A key lesson this week was learning to recognise when different parts of our sites use similar functionality, and how we can reuse our code to make less work for ourself in the long run when considering scalability.
For example I needed two separate parts of the site to open and close, and the easiest way is to create a component that open and closed on a button click by setting state. Then by passing other components in as children to the pop-up function, and conditionally render them based on the button click state.
Creating custom React hooks, was a great way to extract out functionality to a functional component, much that same as creating reusable JSX components, they're great when considering how to cut down on repeating yourself as your site or app grows in scale.
There's been a few time this week where I've found the balance between extracting everything out to functional components, whether thats JSX or hooks, to be quite tricky and is definitely something that is going to take some more time and context to understand their best use-cases.
Figma again! Like I said in my last blog post, Figma is a pretty good way to quickly and collaboratively mock up the wireframes for an app and definitely helped us to start planning out what actually needed to be done first, rather than start aimlessly coding.
Again like last week, React Router has also been great for seeing examples of setting up React Apps with Routing.
21