I debated whether or not to talk about this file, because it doesn’t do anything worth talking about, but I decided to include it because we can use it to discuss the structure of a simple React file.
Line 1 is an import statement that aliases the functionality of ‘react’, which is a part of the overall React framework that was installed when we set up the environment. We don’t need an extension to this import (like .js), and we don’t need a path because part of running the React framework means we can load an intrinsic library by referring to its namespace.
Line 3 creates our class component. We give the class a name, and we extend the construct of a React Component. Extending a component is like building on top of something that exists; we don’t remove any of the core functionality, but we do add some additional functionality that we need. As we are interested in building a component, extending React’s base object allows us to use all of what is provided to us (like the intrinsic event handlers) without having to re-write the foundation.
Line 4 is important. The render() statement is telling React that whatever is within the enclosing blocks should be dealt with as output. Not necessarily displayed as output, but it’s content that is, in a way, not isolated as internal code of the component. What appears here is treated differently from whatever is outside of it, which will be important when we start creating more powerful components (a matter of scope).
Line 5 begins our return, which is the content that will be displayed. When we create an HTML tag using HeaderTitle, whatever is inside this return block is what will be displayed. It’s the culmination of the functionality that we could have built into this component.
Line 20 defines this class component HeaderTitle for export, allowing us to import it into another file.