Create the Player Component3:21 with Guil Hernandez
In this video, we'll create the Player component of the Scoreboard App. This component will display a player's name and a counter that displays the player's score, with buttons that let you change the score.
Now let's create the player component of the scoreboard app. 0:00 This component will display a player's name and the counter that 0:03 displays the player's score with buttons that let you change the score. 0:08 In app.js, I'll start by creating a new function named Player. 0:14 Inside the function, 0:23 the return key word followed by a set of parenthesis to hold the jsx. 0:25 A player will be a div with a className of player. 0:31 Inside that, we'll add a span with the class player-name. 0:41 And remember, these class names are purely for presentational reasons. 0:53 I have already written classes in the CSS to style these elements. 0:57 Inside player name I'll add a place holder name for now, but 1:01 this will be dynamic text later. 1:05 Below the span element I'll add the counter by first 1:07 creating a div with a class name of counter. 1:11 The counter has a decrement button, a score display, and an increment button. 1:19 We'll create the buttons with button tags. 1:25 Let's add a minus symbol for the decrement button, 1:28 and a plus symbol for the increment button. 1:34 Next, I'll style the decrement button with two classes. 1:40 Counter-action and decrement. 1:45 I'll make the increment button the same replacing decrement with increment. 1:50 To display the score I'll add a span between 2:01 the buttons with the class name counter-score. 2:06 I'll give it a placeholder score for now, but 2:18 we'll also make the score dynamic in a later video, let's say 35. 2:20 All right, 2:25 now let's pass the player component's tag to ReactDOM.render to see it on the page. 2:25 I'll replace the header tag with a player tag. 2:32 Over in the browser, refresh and there we have our player component. 2:38 Now the buttons do not work yet, but we're going to create that feature in the next 2:41 stage where you'll learn about component state and making your UI interactive. 2:45 Now that you've learned how to define a component and use it with the JSX, 2:50 I have a challenge for you. 2:54 Earlier, I mentioned that component should be small as possible, and not have to 2:56 many responsibilities, that way it's easier to understand their behaviour. 3:00 With that in mind we could break our player component of even further 3:04 by extracting the counter code from the player component into it's own component. 3:09 So why don't you try creating a component named counter, on your own. 3:14 I'll show you my solution in the next video. 3:18
You need to sign up for Treehouse in order to download course files.Sign up