This course will be retired on April 12, 2021.

Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Developing Your Component Hierarchy

3:30 with Guil Hernandez and Beau Palmquist

In this video, we'll discuss best practices when designing your component hierarchy. A good pattern to follow when developing components is to start with the components that have no dependency on other components (the innermost components) and work backwards from there.

New Terms

Container Component: Redux aware component that usually defines no markup of its own but instead relies on composing presentational components into a cohesive UI
Logical Component: Presentational component that has its own state to manage and may or may not make use of React lifecycle events
Pure Component: Presentation component that is implemented as a pure function. These components are passed props and return markup, no questions asked, no side-effects. That means they do not manage a state of their own and do not take part in React life cycle events.
Component Hierarchy: A composition of React components represented as a tree that depicts the component structure.

Further Reading

[MUSIC] 0:00
[SOUND] In the previous stage, we focused on learning the fundamentals of Redux and 0:04
also set up our project. 0:08
That was a good start, but right now we have all of our components and 0:10
logic defined within one file, scoreboard.js. 0:13
Organizing a project in this way may work for a simple demo. 0:17
But over time you'll find that putting all of your components and 0:20
logic into one monolithic file will become difficult to manage. 0:23
That's why in this stage we'll focus on moving our components 0:27
into their own modules. 0:30
By moving our components to their own modules we'll be able to manage our 0:32
application better by separating concerns within our app. 0:35
Plus modularizing our app will make implementing Redux much smoother 0:39
due to the logical organization of all of our files. 0:43
Before we start modularizing the app, it's important for you to understand 0:46
the different types of components we'll be defining when working with Redux. 0:49
So let's start by learning about two different types of components we'll be 0:53
using throughout the remainder of this course. 0:57
The first is a component known as a presentational component, 0:59
a type of component that's concerned with how things look. 1:02
A presentational component behaves exactly like any other React 1:05
component in that it just renders HTML and doesn't care if we use Redux at all. 1:09
As long as it receives prop data as it expects, it will render the same. 1:14
The second type of component in a React Redux application is known as 1:19
a container component. 1:22
A container component is concerned with how things work. 1:24
It interacts with and 1:27
receives data from the object storing the entire state of your application. 1:28
You see, it's a container component's responsibility to propagate data 1:33
down to the presentational components. 1:37
So instead of containing markup of its own, a container simply provides the data 1:39
and behavior to presentational components and renders them. 1:43
Now that we've identified the two primary types of components we'll be working with, 1:47
we can then separate presentational components into two categories, 1:51
logical and pure. 1:55
Logical components are React components that manage their own React state and 1:57
may or may not take part in React lifecycle events. 2:01
Pure components are known as stateless functions in React 2:04
because they do not manage their own state. 2:07
They rely solely on props, they're implemented as pure functions and 2:10
do not take part in React lifecycle events. 2:13
Now that we know the different types of components we'll be working with, 2:16
let's categorize the scoreboard into pure, logical, and container components. 2:19
First, the stopwatch and add player form components are logical components because 2:23
they have no dependency on any other components and manage their own state. 2:28
And the stats and counter components are pure components, 2:32
since they're written as pure functions and rely on props passed down to them. 2:35
Next, in the scoreboard app, the player and header components both 2:40
depend on other components and act as dependencies to other components. 2:44
So they're considered to be pure components. 2:48
Finally the scoreboard.js file will become our root component and 2:50
will also act as the container component that passes data down to other components. 2:54
Once we begin modularizing the app you'll start to learn how all these pieces fit 2:59
together, and you'll see how it will make implementing Redux much easier. 3:03
If you want to learn more about standard React components and 3:07
pure React components, be sure to check out the teacher's notes. 3:09
Now that we've identified how the scoreboard app will be broken into 3:13
modules, the next step is to create each module. 3:16
Now a good pattern to follow when developing components is to start with 3:19
the components that have no dependency on other components and 3:23
work backwards from there. 3:26
So in the next video we'll start with the stopwatch component. 3:27

You need to sign up for Treehouse in order to download course files.

Sign up