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.

React relies on the idea of components. A component can be either a simple function or a specialized class. Functions, as you might understand, accept arguments, perform operations, and return a result. They are enclosed processing factories which are usually used to perform an atom of work — something small that is part of a larger processing directive. Classes in React are more purposeful than functions but aren’t as flexible as classes in other languages. Because javascript has no concept of traditional object-oriented classes, classes aren’t exactly what you’d expect if you know OOP. At their most basic, React classes provide more scaffolding than a function, allowing you to call a constructor method, use intrinsic event handlers, bundle in custom functions, and set and consume state. With that said, let’s look at the code.

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.