Classy Components

This post will be a continuation of my example React program: Boxes.
In my last post, I outlined how to create a basic React component and render it.

That post paid particular attention to how properties (props in React jargon) are passed down to a component in order to give it certain aspects of functionality – and on that note, I made the parallel of a React component being just like a regular Javascript function, with props being an object passed as an argument – each key with a respective value as defined in the component.

In this post, I want to continue the Boxes example by adding more complexity and showcasing how multiple layers of components can pass down props. In this expanded example, we will also see the other style of creating React components: class syntax.

In this example, we start off with the same basic premise as the last example – ReactDOM.render() is used to render the root component, App, at the location of the HTML element with the ID of root in index.html

Much like the previous example, inside App is a component – this time, called OuterBox.

React JS class

As we see, App is the root component rendering the OuterBox component. We can ignore the className = Outerbox on the component - this box's beautiful style is actually received from the div being rendered inside OuterBox with its own className.
Let’s take a look at OuterBox.js to see what is actually being rendered by OuterBox:

The first difference to note is that unlike Box in the last example, OuterBox is not simply a function. Notice the header:
classOuterBoxextendsComponent.

After my last post where I attempted to start styling my code jargon more, I tried to make this one as accurate as possible in terms of colors. Specifically, the Sublime Text color theme. That took quite a lot of span action...case-in-point: that span was within a span...(span-ception?) Also...this is probably the only place you will see the word span actually appear! ButIdigress...

What I said about React components being functions holds true, even in this case; we’re just sprinkling on a bit more syntactical sugar...

Gif Credit: GIPHY.com

This style of component is written in ES6 Class syntax. Class syntax harkens back to such wonderful object-oriented languages as Java and C#, which use a data structure known as a class in order to provide a blueprint for creating objects. If a class is a basic set of instructions for building a house, then objects follow that blueprint. Thus, all houses will have the features defined in the house class (eg., walls, roof, windows), but each house object can add its own unique characteristics (eg., chimney, garage, or different color).

In the case of React, a class is still a Javascript function – albeit, in disguise. Ultimately, both function and class components have the same purpose: each is a piece of code which has basic features that allow for repeated creation of the same basic structure. Each newly-created version of that component can have its own specific characteristics (which is why class syntax is very applicable).

You may have noticed the extends Component portion of the class header. Similar to OOP languages, this class syntax means that the class structure itself already takes a set of blueprints – from a superclass known as Component (a superclass is a predefined class with basic elements to pass down to sub-classes (class-ception?!), which can then add additional characteristics). In the house example above, building could be seen as the superclass, which gives certain parameters to the house class, which then gives parameters to each of its house objects

The most important feature obtained from this superclass for our present purposes is the render() method. The Javascript and accompanying return statement of our Component will come from within this method.

NOTE: You may have also noted that there is no props parameter in class form. Props are still accessible, but in class syntax, they are obtained by using the this operator, which is one of the major features of class syntax. We will see this in action momentarily!

So at the moment, we have an OuterBox component, which consists of a div being rendered. OuterBox gets its design from the CSS class (signified by className in JSX) attributed to it. Additional elements can be rendered by this box, whether it be text, html or – yes, even another component. Let’s take a look:

React JS class component

Here, the OuterBox component is rendering an InnerBox component within. Instead of the text being rendered as a prop, as in the last example, the component itself is rendered. However, we can pass props down through multiple layers, and this is where the fun begins:

React JS class component

This final image shows the trajectory of this example:

In the top left window, we see our App component being rendered to the root element on index.html.

Notice the smiley prop given to App: an h2 element with a smiley face.

Moving to the right window, we see the OuterBox component. Because smiley was added to the OuterBox component in App as a prop, we have access to it in OuterBox. A new variable is declared to store this value: this.props.smiley. (Notice, as mentioned above, that this must be used to gain access to props when using class syntax). Now, this value is given to the InnerBox component as a prop called innerSmiley.

And finally, when we look at the InnerBox component (in good ol’ function style), we see it call props.innerSmiley in the return div to display the smiley (we can ignore the if statement portion of this component until we discuss state in another post).

That smiley had quite a journey – it was passed down from the root component, App, to OuterBox, and then from OuterBox down to InnerBox. While there are certainly additional React tools to make this less complicated, this example stands to show the nature of how components - and their props - can be nested.

As a final note: while props are commonly passed down the DOM chain in React apps, they are read-only – which means they cannot be directly altered by a child component. Instead, props are often used to communicate with parent components via callback functions.

The other main way of altering data in a React app is known as state, which will be the topic of my next post.

Until next time!

Back to Posts