#ChadWritesCode End of Week Log Oct 11, 2020
Tags: webdev, learning, react
Published: 2020-10-11 23:06:44

It's that time again! It's my end of the week blog post detailing how I progressed through the week. Here's what I set out to do this week:

{% twitter 1313102402460028929 %}

So how well did my week go?

So I ended up restarting the reusability portion of the Scrimba course I'm taking. I felt that I didn't understand it as much as I wanted to and just wanted to ensure that I understood it before moving forward.

What was focused on first was React children and immediately I saw how it could be used for making reusable UI elements which was an issue we had at our previous jobs. Got me so excited about the prospect but I ended up deciding to start doing wire frames for my portfolio site (more on that later).

Next was Higher-Order Components and even though I had worked with these before, I honestly really appreciated the more formalized explanation. I'm not sure if I could write a Higher-Order Component from scratch but I understand how they work and I kinda like the idea of a wrapper around a component to give it more functionality. One of the things I kinda want to do is have just functions that does work and the component is solely there to handle UI.

We then did Render Props which I feel like is really the functional component version of Higher-Order Functions especially when React Hooks is introduced so that functional components can handle state. I actually ended up not liking it as much. It's definitely less boilerplate code to get it working but maybe I'm just personally attached to Higher-Order Functions because my understanding of it. I dunno which I'd use but honestly, I'm trying not to stay married to either concept because I know Hooks replaces a lot of this stuff.

There was a small section about performance and a few techniques to improve performance. The thing I appreciated the most was the explanation of when would React re-render each component and so even without talking about the specific tools, I feel like I could do a solid job of structuring a React app to be somewhat performant. After the explanation, the instructor went on the speak about shouldComponentUpdate(), and then Pure Components and React.memo() which helps keep you from having to implement your own shouldComponentUpdate(). This section was significantly shorter than I expected it to be and finished it in a day.

And that's my work on the React course.

Learning about React children really made me want to work on my portfolio site a bit and so I did some initial designs of some of my components, specifically the portfolio project component and the blog post component. Here they are:

{% twitter 1315428433636270082 %}

I'm not the best designer but at least I can definitely work with these. Speaking of not being a designer, I'm designing my portfolio starting with my components first because I'm probably going to implement a basic design. I wanted to put my effort into making components that I could change very easily if the day comes that I get someone to actually make a good design for me. I'm not sure if it's a good idea or not but it makes sense in my head. Also I'm trying to build the page using mobile-first principles and even though I haven't read in-depth about it, I figured starting from the most pliable thing would be best. I'm kinda just winging it from what I heard, I don't have any formal plan on how I want to proceed with this thing.

Anyhow, that's my update for this week. Phew, it's a bit long honestly. Also I think I'm going to keep a daily journal about this work cause it'll help keep these ideas more fresh in my mind. Even as I wrote these, I was having trouble remembering the things I wanted to talk about. I dunno, I'll experiment more with all this stuff.

Anyhow, until next time!