20
My Dev Journey: Week 10
This week was the second week in the front end block of the course, and this week we spent a lot of time going further in depth with React.
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!
For the start of this week we used the Fetch API to make requests to endpoints to get the data back that we were going to be using in our apps. The fetch API was a good start but I prefered it when we started to use Axios, as I think it reads a lot clearer that fetch.
I spent most of this first day getting base functionality added in to my app that retrieves NASA Astronomy Pictures of the Day, for specified dates in input fields.
Building on top of the base functionality I added a couple of extra features in like beign able to search by a date range, and then got going on styling. I wanted it to be a fairly minimal site, but to use similar tones to the NASA logo, so that it all ties in, and was pretty happy with adjusting to styling with React.
One of the key principles from this lecture was on Mobile first design, and using media queries to display certain components styled in different ways because of screen sizes.
Another thing we learnt but I didn't have chance to apply was the use of CSS modules, something that I'd like to apply on a side project or by refactoring the code from this two-day sprint.
Routing in React was a blessing after having spent the last week with really long App files. The routing makes sense, especially after creating our own backends, it made processes much more alike.
Another issue I had with React at the start of the week was I felt like I was passing props through all over the place, which is where using Context allows me to have certain states to be seen globally across all components. This came in handy when wanting to tidy a lot of my prop chains up.
What's Figma? 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.
20