This course will be retired on April 12, 2021.
In this video, we're going to move the Stopwatch component out of the Scoreboard.js file and into its own file. In addition, we'll also apply some ES2015 syntactic sugar to make our component declaration and implementation more concise.
In this video, we're going to move the Stopwatch component 0:00 out of the scoreboard.js file and into a tone file. 0:03 In addition, we'll also be applying some ES 2015 syntactic sugar 0:06 to make our component declaration and implementation more concise. 0:11 Now, to learn more about ES 2015 or ES 6, you can watch the Treehouse courses and 0:14 workshops I posted in the teacher's notes. 0:19 So now onto the code, let's create a new folder in our project. 0:21 We'll name it src or source, 0:26 because this is where we'll put all of our components and containers. 0:28 Inside this new folder, we'll create two folders, 0:32 components and containers. 0:37 The components folder is where we'll put all of our presentational components, 0:44 and containers is where we'll add the container component that passes data 0:48 down to presentational component. 0:52 And that container will be the scoreboard component. 0:55 So let's move the file scoreboard.js inside the new containers folder. 0:58 And let's not forget to change the import path to the file and index.js. 1:03 So now the path will be /src/containers. 1:08 Next, add a file called Stopwatch.js to the components directory we just created. 1:15 And for this component, we'll need to import a few things from React. 1:25 So at the top of the file, we'll say import React, then a set of curly braces. 1:28 Inside the curly braces, we'll type Component, PropTypes. 1:34 Then outside the curly braces, we'll type from 'react'. 1:41 And now we need to define a Stopwatch class that extends React's component class 1:46 and exports it. 1:50 To do so, we'll type export 1:51 default class Stopwatch 1:57 extends Component. 2:02 Now you may have seen export statements written below a component, like this. 2:06 Including it here just exports it right from the class definition. 2:10 All right, so next, we need to implement the inner workings of the class. 2:15 But let's start by opening up the Scoreboard.js file 2:19 inside the containers directory and taking a look at the Stopwatch implementation. 2:23 Now the best step to do this will be to go step by step through this implementation 2:28 and migrate it over to our new Stopwatch.js file. 2:32 So notice here in Scoreboard.js on line 108, Stopwatch defines a method 2:35 called getInitialState that defines the initial state of the Stopwatch component. 2:42 So in our new Stopwatch.js file, 2:47 inside of our class, we need to define something similar. 2:49 So let's add a state property to the class. 2:52 Then I'll go ahead and copy over the states for running, previous time, and 2:57 elapsed time and paste them here inside the state property. 3:02 And you'll notice that this is slightly different from how it's defined 3:07 in the Scoreboard.js file. 3:11 Functionally, it works the same, but it's more concise. 3:13 Looking back at our Scoreboard.js Stopwatch implementation, 3:16 you'll notice a set of React lifecycle events. 3:20 We have componentDidMount and componentWillUnmount. 3:23 So let's implement these in our Stopwatch.js file. 3:26 Go ahead and copy both and paste them in Stopwatch.js after the state definition. 3:29 So here inside this class definition, 3:37 we're going to use the more terse ES 2015 or ES 6 syntax for our functions. 3:39 So let's update these by removing the colon and function keyword from each one, 3:45 as well as the comma after the closing curly brace. 3:50 All right, so next, we have a set of Stopwatch component methods to implement. 3:57 We have onStart, onStop, onSet, and onTick. 4:03 So I'll go ahead and select and copy all four of these methods. 4:08 And paste them in the Stopwatch class right below the lifecycle events. 4:14 And again, I'll update the function syntax for 4:19 these to use an ES 2015 arrow function. 4:22 Now, the last piece to implement is the render method. 4:35 So let's copy the entire render implementation from the Scoreboard.js file 4:39 and paste it into our Stopwatch.js class after our component event handlers. 4:44 And again, the only change we need to make to the render method 4:52 is to update the function syntax by removing the colon and function keyword. 4:54 So now we can go back and 5:02 remove the entire Stopwatch implementation from the Scoreboard.js file. 5:03 And if we save and run the app now, 5:08 it will not work because we no longer have a Stopwatch component to render. 5:10 There's one last thing to do in order for our application to work. 5:15 At the top of Scoreboard.js, let's import our Stopwatch component. 5:18 Now we can start up the dev server, and the app should run as it did before, but 5:31 with our Stopwatch component defined as its own module. 5:35 All right, so 5:38 we've now implemented our very first component as its own separate module. 5:39 But there are still a number of other components to update. 5:44 So let's keep moving. 5:47 I'll see in the next video. 5:48
You need to sign up for Treehouse in order to download course files.Sign up