[MUSIC]

[SOUND] In the previous stage, we focused on learning the fundamentals of Redux and

also set up our project.

That was a good start, but right now we have all of our components and

logic defined within one file, scoreboard.js.

Organizing a project in this way may work for a simple demo.

But over time you'll find that putting all of your components and

logic into one monolithic file will become difficult to manage.

That's why in this stage we'll focus on moving our components

into their own modules.

By moving our components to their own modules we'll be able to manage our

application better by separating concerns within our app.

Plus modularizing our app will make implementing Redux much smoother

due to the logical organization of all of our files.

Before we start modularizing the app, it's important for you to understand

the different types of components we'll be defining when working with Redux.

So let's start by learning about two different types of components we'll be

using throughout the remainder of this course.

The first is a component known as a presentational component,

a type of component that's concerned with how things look.

A presentational component behaves exactly like any other React

component in that it just renders HTML and doesn't care if we use Redux at all.

As long as it receives prop data as it expects, it will render the same.

The second type of component in a React Redux application is known as

a container component.

A container component is concerned with how things work.

It interacts with and

receives data from the object storing the entire state of your application.

You see, it's a container component's responsibility to propagate data

down to the presentational components.

So instead of containing markup of its own, a container simply provides the data

and behavior to presentational components and renders them.

Now that we've identified the two primary types of components we'll be working with,

we can then separate presentational components into two categories,

logical and pure.

Logical components are React components that manage their own React state and

may or may not take part in React lifecycle events.

Pure components are known as stateless functions in React

because they do not manage their own state.

They rely solely on props, they're implemented as pure functions and

do not take part in React lifecycle events.

Now that we know the different types of components we'll be working with,

let's categorize the scoreboard into pure, logical, and container components.

First, the stopwatch and add player form components are logical components because

they have no dependency on any other components and manage their own state.

And the stats and counter components are pure components,

since they're written as pure functions and rely on props passed down to them.

Next, in the scoreboard app, the player and header components both

depend on other components and act as dependencies to other components.

So they're considered to be pure components.

Finally the scoreboard.js file will become our root component and

will also act as the container component that passes data down to other components.

Once we begin modularizing the app you'll start to learn how all these pieces fit

together, and you'll see how it will make implementing Redux much easier.

If you want to learn more about standard React components and

pure React components, be sure to check out the teacher's notes.

Now that we've identified how the scoreboard app will be broken into

modules, the next step is to create each module.

Now a good pattern to follow when developing components is to start with

the components that have no dependency on other components and

work backwards from there.

So in the next video we'll start with the stopwatch component.