1 00:00:00,000 --> 00:00:05,272 There are two ways to create a component in React, a function and a class. 2 00:00:05,272 --> 00:00:09,715 So far, we focused on defining components with functions in a style called 3 00:00:09,715 --> 00:00:11,909 stateless functional components. 4 00:00:11,909 --> 00:00:13,398 As the name implies, 5 00:00:13,398 --> 00:00:18,210 these are components written as functions that do not humble state. 6 00:00:18,210 --> 00:00:24,014 These components are only receiving input through props and rendering UI. 7 00:00:24,014 --> 00:00:27,969 We started with stateless functional components because they´re easier to 8 00:00:27,969 --> 00:00:29,680 write, read, and understand. 9 00:00:29,680 --> 00:00:33,417 They just take in props and return JSS. 10 00:00:33,417 --> 00:00:37,319 But sometimes we need to do more with a component like 11 00:00:37,319 --> 00:00:41,536 Class components offer a more powerful way to build components. 12 00:00:41,536 --> 00:00:45,473 Because they´re the only type of components that let you use state. 13 00:00:45,473 --> 00:00:47,886 So before we can start using state in our app, 14 00:00:47,886 --> 00:00:51,510 we'll need to convert some of our components to classes. 15 00:00:51,510 --> 00:00:56,450 For example, the counter will display data that changes over time, a score. 16 00:00:56,450 --> 00:00:59,928 Users will interact with the counter by clicking the plus and 17 00:00:59,928 --> 00:01:02,872 minus buttons to increase and decrease the score. 18 00:01:02,872 --> 00:01:07,665 So let's start by converting the counter function to a class using 19 00:01:07,665 --> 00:01:09,899 the ES2015 class syntax. 20 00:01:09,899 --> 00:01:13,371 If you're not familiar with classes, be sure to have a look at the Treehouse 21 00:01:13,371 --> 00:01:16,860 videos and resources I've posted in the teacher's notes with this video. 22 00:01:16,860 --> 00:01:21,600 First, I'll use the class keyword 23 00:01:21,600 --> 00:01:26,498 to create a class with the same name, 24 00:01:26,498 --> 00:01:32,194 counter that extends React.Component. 25 00:01:33,207 --> 00:01:38,470 In JavaScript classes, the extends keyword is used to create a subclass, 26 00:01:38,470 --> 00:01:40,484 or a child of another class. 27 00:01:40,484 --> 00:01:45,347 In this case, we're extending from React.Component which is part of 28 00:01:45,347 --> 00:01:48,625 React's API for component class definition. 29 00:01:48,625 --> 00:01:56,810 The only method you need to define in a class component is called render. 30 00:01:56,810 --> 00:02:05,317 Next, I'll move the return statement into the render method and that's it. 31 00:02:05,317 --> 00:02:10,143 You use a class component just like a functional component by including 32 00:02:10,143 --> 00:02:13,127 its JSX tag wherever you want to display it. 33 00:02:13,127 --> 00:02:16,807 So there's nothing we need to change inside the player component. 34 00:02:16,807 --> 00:02:21,996 However, there is one important change we need to make in the JSX expression. 35 00:02:21,996 --> 00:02:27,455 Instead of accessing props with pops.propname, for example, 36 00:02:27,455 --> 00:02:32,950 props.score, classes need to access props with this.props. 37 00:02:32,950 --> 00:02:37,150 So make sure that you change it to this.props.score. 38 00:02:37,150 --> 00:02:38,258 In class components, 39 00:02:38,258 --> 00:02:42,350 props are not accessed through arguments like they are in functional components. 40 00:02:42,350 --> 00:02:46,085 Props are a property of the component itself. 41 00:02:46,085 --> 00:02:50,814 So this refers to the component instance. 42 00:02:50,814 --> 00:02:56,002 So what we have now is equivalent to our previous stateless functional component. 43 00:02:56,002 --> 00:02:58,403 We're not using any new functionality. 44 00:02:58,403 --> 00:03:03,490 And as you can see, the counter still looks and behave in the same way. 45 00:03:03,490 --> 00:03:08,290 In fact, we could have written each of our components as classes from the start. 46 00:03:08,290 --> 00:03:11,150 So when do you use a class versus a function? 47 00:03:11,150 --> 00:03:15,810 Well, if a component is only receiving input through props and 48 00:03:15,810 --> 00:03:20,840 rendering UI, it's best to use a function or a stateless functional component. 49 00:03:20,840 --> 00:03:24,780 Functions are a little bit easier to write, read and understand, and 50 00:03:24,780 --> 00:03:29,350 you can think of a stateless functional component as just the render method 51 00:03:29,350 --> 00:03:33,030 from a class component with props passed in as an argument. 52 00:03:33,030 --> 00:03:37,430 Now when you want to add state, that's when you use a class component. 53 00:03:37,430 --> 00:03:41,020 However, you can also create stateless components as classes, 54 00:03:41,020 --> 00:03:43,110 there's really nothing wrong with that approach. 55 00:03:43,110 --> 00:03:47,751 One benefit of that approach is that if you ever need to convert the component 56 00:03:47,751 --> 00:03:52,335 from stateless to stateful, you'll already have a class defined for it. 57 00:03:52,335 --> 00:03:56,885 All right, now that you've learned how to define and use class components, 58 00:03:56,885 --> 00:04:00,596 in the next video, we'll add state to our counter component.