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 GitHub 😁

What I've learnt this week

Data fetching

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.

Styling with React

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.

React Routing

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.

Context

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.

Resources I've found useful this week

CSS Tricks

CSS Tricks has been a great cheat-sheet style site, that has helped especially with flex-box bits.

React Router

React Router has also been great for seeing examples of setting up React Apps with Routing.

Figma

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.