I’m talking about this file next because it’s smaller, and there are a lot more things to talk about with Header.js than there are here.

Line 1 should be familiar if you read the previous post. It aliases the ‘react’ library as ‘React’ so we can use it.

Line 3 defines our class component under the name HeaderUser. This is what we export.

Lines 5 and 6 render and return our content.

Now, line 10 has something new: {this.props.username} used like standard HTML tag content. In React, we use {} to demarcate their internals as Javascript. We usually see this used when we want to render the contents of a variable.

Props is a Javascript object-argument for bringing data into a component. We’re not officially declaring the entrance point of props above, but there’s a lot more going on in this component definition than we have provisioned for. Remember how the previous post talked about how extends builds on top of a basic definition of component? The entrance point of the props argument is defined there, in the base code. We don’t see it, but it’s there, and we can use it without officially defining it ourselves [1].

How do we create and add to props? We’ll see that in the next post, but props is a loosely defined object; we can add whatever properties we want into it when we’re rendering the component as a tag. In this case, username is a variable assigned to the props bucket that’s within this instance of the component.

The one potential pitfall of React is that there’s no verification that we have a variable named username assigned to props. We have no way of discerning what props contains. We simply have to follow the chain upward and see what kind of data we’re sending into HeaderUser.js, and we’ll do that in the next post.

[1] Knowing about things like props is one of the biggest hurdles for new developers. I remember when I was learning .NET after years of ASP, I was terrified that there was too much to learn, and I’d never be able to grasp the depth of a new language. 20 years later and I still don’t know everything, but knowing the convention of the code can give clues that lead to more information.