The Joy of React

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.

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”

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

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.

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

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.