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