React.js — Nested Components

Hey guys, this tutorial was written a long time ago. Since then I started another page on react’s nested components < here. It has far better explanations and a coding challenge.

Grab your copy of CSS Visual Dictionary incl. diagrams of all CSS properties.

To get a good idea of how flex works try flex layout editor on this page.

Nested Components

Nested components in React.js help you create more complex view element structures. I have previously talked about creation of React components in my other @Medium tutorial. And just as a reminder here is how you would go about creating one:

And yes, React is moving away from React.createClass method. In the future (Edit: March 28, 2018 and the future is actually here already) we will be using:

class Component extends React.Component { … }

or even…

class Component extends Component { … }

if you import it with:

import React, { Component } from “react”;

They all accomplish the same thing.

The only difference is when using class you also use constructor(props);

When using createClass there is no constructor, only getInitialState(); But that’s becoming an outdated way of programming with React these days. However I cannot judge if you more of a purist and prefer creating elements using less abstraction. In my experience… this didn’t make my life as a React programmer better.

Yeah I know it’s confusing, but in the future React will deprecate createClass and we will only use the ES6 class keyword. (As of this writing, this probably has already happened.)

Thankfully in this tutorial we will primarily talk about parent/child relationship between components regardless which way you created them.

So in above example, this is just a basic component that returns another component called <Something>.

It’s a good time to get used to it! Because this is the type of code you will be working a lot with in React. It’s just a JavaScript object that contains render function and has a return statement that returns “transpiled” JSX code. That’s what converts <Something> tag into EcmaScript5 that browsers can understand. But again all of this is coming to an end in favor of class keyword.

What gets to be in your component’s render function and/or in its return statement depends on the purpose of your application. In this example, for the sake of clarity let’s call these objects Parent and Child respectively. An actual pair of names if you were writing an application could be something like Friend and FriendList. Or Customer and CustomerEditor for example.

Parent with a Single Child

Using this pattern, you can implement a basic view functionality.

First, let’s create the least building block of the pattern — the child.

Let’s now create its counterpart Parent class, and use Child as the object it will return. I highlighted Child to make sure it’s easy to see how the Child component is tied to Parent.

Notice that you can access child’s text from handleChildClick method within Parent container. The Parent and Child containers are tied by the props passed into the text attribute on the Child container. Whatever you pass into the Child (which is located within Parent) will be automatically accessible via the parent container. So props are really what establishes the relationship between the two.

React is a relatively new library. However, it does use one important JavaScript function that you simply must know how to use, if you ever plan on using Parent and Child dynamic in your reactive application.

And this standard JavaScript function is the map method, that natively exists on all objects of type Array. If you’ve ever worked with JavaScript arrays before, you may have at least heard of this function. All it does is creates a new array, calls the callback function on each item, and fills the new array with the result of modifications that the callback function has applied to each item from the original array.

So in short, Array.map takes all items and applies a custom operation on them. Then, it simply returns the new, modified data set as a new array. How does this help us in terms of writing Parent-Child components in React library? I can demonstrate this by providing the following example where we will use multiple Children in a single Parent.

Parents with Multiple Children

I’ll keep the Child component exactly the same for this example, so we can keep things simple. Notice the new usage of array’s map function within the newly updated Parent component:

Now, I purposely created these generic examples to show you the association between child and parent, because it’s not as trivial as simply nesting HTML elements in one another. In react, this link is established programmatically, as shown in the examples above.

In a real world scenario, you will be building components that represent actual elements in your application, like alerts, friends lists, messages, comments and buttons. But these examples that were shown here are the basic building blocks of reactive programming.

I know it might seem like a hassle to learn all of this, but really, once you program a few of these components, you will see the versatility of React, because it’s like embedding custom programming into your everyday HTML elements, having full control over the data flow, and utilizing Virtual DOM which is lightning fast at updating only areas of applications that need updating.

Limited Time Offer

The diagrams in this tutorial were influenced directly by the manuscript!

CSS Visual Dictionary 28% OFF for Medium readers.

28% OFF

Medium Readers Only:

CSS Visual Dictionary

== grab a copy ==

Contains all CSS properties.