Just Started

The Joy of React

I signed up for the “early access” of Josh W Comeau‘s The Joy of React. I am really excited to pick this one up. All these while, I have never really learn React properly and just getting by with Google and trial & error most of the time. I hope this course will give me valuable lessons to apply to my flawed understanding & knowledge of React.

Last updated on 22nd Mar 2023
Documented on 2nd Mar 2023


5 minutes in everything is super impressive. The course starts by having a tutorial on how the site works and how to engage the community (which I think it‘s great idea to have a support system and companions while in this learning journey together).

By the time I reach the “Course Features” section I had 🤯 moments a few times. The Course Features have Code Playgrounds and there‘s a feature in which you can highlight some parts of the website, and there‘s a built-in note-taking tool. Now you see why I was 🤯 many times.

What I like most about the introduction section is actually the “side quests” modules. There are these two extra reference modules called JavaScript Primer & Tools of the Trade to assist and compliment the React course in case we are not familiar with some of the prerequisite concepts. This gives me that early peace of mind that I don‘t have to worry too much if my limited JavaScript will affect my “joy” of learning React.

JavaScript Primer: Statements vs. Expressions

So I know Josh mentioned to pull up JavaScript Primer as I am doing the course, but I can‘t help but to go through it first.

I’m currently done with Interacting With The DOM chapter and doing Statements vs. Expressions section now.

Also I might have minimal note on “The Joy of React” on this website because I am actually using it‘s internal note-taking feature which I found quite neat. All the notes I am taking mostly says, ”highlighting this but I still don‘t fully grasp this part” 🤷🏻‍♂️


How many expressions is this?

`(5 + 1) * 2`

Answer is 5...


`let hi = 5`

Personal Insights

  • ”All function arguments must be expressions”
  • Expressions as statements
  • ”Expressions produce a value”
  • “Statements are instructions to do a particular thing”

JavaScript Primer: String Interpolation & Arrow Functions

So I am quite familiar with `string interpolation` thanks to my background and exposure to Ruby and Ruby on Rails years back.

So it‘s not the first time I heard the word and understood the concept of it. So that topic was a good refresher and gone through with breeze.

Arrow Functions

Okay so this one somehow I never fully register the concept in my brain, but I‘ve dealt with it before. That includes the short-form and the long-form of Arrow Functions. I‘ve noticed the curly braces, but never fully understand other fundamental differences between the two.

Josh go through an exhaustive list of examples on whether parentheses are mandatory or optional depending on parameters and other reasons.

Also things got sort of heavy with `object notation`, which means I might have to go through these topics or sub-topics again in the future.

As usual I always skip through things and not worry if I fully grasp it before I apply it (when it comes to coding I always learn by making lots of mistakes and go through walls..)

JavaScript Primer: Object Destructuring

Okay I think this is where my brain can‘t process because the logic is just.. 🥲

So if you give me below:

1const name = 'Hello!';
2const user = { name: 'Marie-Hélene Pelletier' };
3const { name: userName } = user;

On the first try, I thought its trick question. Then in my head I thought its the same answer but I was wrong..

So in this topic we were covering these sub-topics:

  • Renaming extracted values
  • Default values
  • Destructuring function parameters
  • Default parameter values
  • Named arguments

I mean I could understand and get what the concept is trying to convey, but there‘s no way I could tell if any of these work or it‘s a wrong.. statement? (is it even correct to call these statements, or are these code blocks?)

Anyways, as always, we keep going. I can always come back to these when needed.

JavaScript Primer: Array Destructuring

Hmm not sure what‘s the difference here, looks like just rewriting in reverse?

However, this topic here makes the most sense so far. I like how technical topic like JavaScript is like one day feel clueless and lost, another time it‘s like oh this is so easy to understand and grasp.

Why can‘t we just have nice things and simple to understand.. 😅

Share your learnings

I'd love to hear more and learn from your perspective. Are any of these notes factually wrong or outdated? What else should I be exploring in the future? Let me know more below.

Older learning

⛩️ Forever Learning


As I am building family with a Japanese partner, I believe this is one of those lifelong learning and endless pursuit. It is both exciting and daunting. I also realized it gives me this humbling and privilege feeling — knowing there are these aspects of learning in my life.

Copyright © 2009 – 2023 Ajmal Afif

LinkedIn icon