Create a Component as a Class

There are two ways to create a component in React, a function and a class. 0:00 So far, we focused on defining components with functions in a style called 0:05 stateless functional components. 0:09 As the name implies, 0:11 these are components written as functions that do not humble state. 0:13 These components are only receiving input through props and rendering UI. 0:18 We started with stateless functional components because they´re easier to 0:24 write, read, and understand. 0:27 They just take in props and return JSS. 0:29 But sometimes we need to do more with a component like 0:33 Class components offer a more powerful way to build components. 0:37 Because they´re the only type of components that let you use state. 0:41 So before we can start using state in our app, 0:45 we'll need to convert some of our components to classes. 0:47 For example, the counter will display data that changes over time, a score. 0:51 Users will interact with the counter by clicking the plus and 0:56 minus buttons to increase and decrease the score. 0:59 So let's start by converting the counter function to a class using 1:02 the ES2015 class syntax. 1:07 If you're not familiar with classes, be sure to have a look at the Treehouse 1:09 videos and resources I've posted in the teacher's notes with this video. 1:13 First, I'll use the class keyword 1:16 to create a class with the same name, 1:21 counter that extends React.Component. 1:26 In JavaScript classes, the extends keyword is used to create a subclass, 1:33 or a child of another class. 1:38 In this case, we're extending from React.Component which is part of 1:40 React's API for component class definition. 1:45 The only method you need to define in a class component is called render. 1:48 Next, I'll move the return statement into the render method and that's it. 1:56 You use a class component just like a functional component by including 2:05 its JSX tag wherever you want to display it. 2:10 So there's nothing we need to change inside the player component. 2:13 However, there is one important change we need to make in the JSX expression. 2:16 Instead of accessing props with pops.propname, for example, 2:21 props.score, classes need to access props with this.props. 2:27 So make sure that you change it to this.props.score. 2:32 In class components, 2:37 props are not accessed through arguments like they are in functional components. 2:38 Props are a property of the component itself. 2:42 So this refers to the component instance. 2:46 So what we have now is equivalent to our previous stateless functional component. 2:50 We're not using any new functionality. 2:56 And as you can see, the counter still looks and behave in the same way. 2:58 In fact, we could have written each of our components as classes from the start. 3:03 So when do you use a class versus a function? 3:08 Well, if a component is only receiving input through props and 3:11 rendering UI, it's best to use a function or a stateless functional component. 3:15 Functions are a little bit easier to write, read and understand, and 3:20 you can think of a stateless functional component as just the render method 3:24 from a class component with props passed in as an argument. 3:29 Now when you want to add state, that's when you use a class component. 3:33 However, you can also create stateless components as classes, 3:37 there's really nothing wrong with that approach. 3:41 One benefit of that approach is that if you ever need to convert the component 3:43 from stateless to stateful, you'll already have a class defined for it. 3:47 All right, now that you've learned how to define and use class components, 3:52 in the next video, we'll add state to our counter component. 3:56