Just Started
Rating: 5 out of 5

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.

📈 1 hour per week commitment·
Last updated on 10th May 2024
Documented on 2nd Mar 2023
·
Rating: 5 out of 5

Introduction

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.

·
Rating: 5 out of 5

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” 🤷🏻‍♂️

Expressions

How many expressions is this?

`(5 + 1) * 2`

Answer is 5...

Statements

`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”
·
Rating: 5 out of 5

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..)

·
Rating: 5 out of 5

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;
4
5console.log(name);
6console.log(userName);

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.

·
Rating: 5 out of 5

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.. 😅

·
Rating: 5 out of 5

JavaScript Modules

A module is a JavaScript file that can contain one or more exports. We can pull the code from one module into another using the import statement
There are only two valid statements for named exports. Here they are:
1// ✅ This works
2export const exportName = /* expression slot */;
3
4// ✅ This also works
5export function someFunction() { /* ... */ }

I am getting more and more clarity now, like randomly I noticed these differences in codebases or snippets I am dealing with. For the longest time, I have no clue what‘s the difference and why.

I love this topic. Probably my favorite one in JavaScript Primer so far since it feels I just untangled these consistent observations I have noticed but never quite understand why.

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
Rating: 4 out of 5

日本語

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 – 2024 Ajmal Afif

UsesNowReviews
LinkedIn icon