Developing Your Component Hierarchy

[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