WEBVTT 1 00:00:00.160 --> 00:00:01.060 Hi everyone. 2 00:00:01.090 --> 00:00:05.060 In this video we're going to talk about class based components in React native. 3 00:00:05.090 --> 00:00:08.860 Before we dive into that, let's talk a bit about what classes are 4 00:00:08.890 --> 00:00:12.980 in general because I'm not sure that you have ever interacted with classes. 5 00:00:13.010 --> 00:00:18.820 So in object opened programming, a class is a blueprint for creating objects. 6 00:00:18.840 --> 00:00:20.180 Let's say you want to create 7 00:00:20.210 --> 00:00:22.820 an application that manages people's information. 8 00:00:22.850 --> 00:00:26.060 You could define a person class that has 9 00:00:26.080 --> 00:00:30.940 properties like name, age and email address and behaviors like 10 00:00:30.970 --> 00:00:34.700 updating their information and sending them notifications. 11 00:00:34.730 --> 00:00:40.140 By defining a person class, you're creating a blueprint for creating 12 00:00:40.170 --> 00:00:44.100 objects that represent people in your application. 13 00:00:44.130 --> 00:00:46.980 You can create multiple instances of this 14 00:00:47.010 --> 00:00:52.340 person class, each with their own name, age and email address and each with their 15 00:00:52.370 --> 00:00:57.780 own behaviors for updating information and receiving notifications. 16 00:00:57.810 --> 00:01:00.580 All you need to do for this is create one 17 00:01:00.610 --> 00:01:04.290 class, give it the information for different persons, 18 00:01:04.320 --> 00:01:10.130 and then you have the objects of these persons with which you can get information 19 00:01:10.160 --> 00:01:15.340 about the persons or do some kind of an action that updates their 20 00:01:15.370 --> 00:01:18.460 information or makes them receive notifications. 21 00:01:18.490 --> 00:01:21.020 Okay, so now that we understand what 22 00:01:21.050 --> 00:01:25.930 classes are, what objects are, and how it makes it easier for you 23 00:01:25.960 --> 00:01:31.400 to create one blueprint and then have instances of different objects where you 24 00:01:31.430 --> 00:01:36.850 could have different information provided for those objects, let's talk about React. 25 00:01:36.880 --> 00:01:39.080 Before the introduction of hooks that we 26 00:01:39.110 --> 00:01:44.210 have seen so far, react components were mainly implemented using classes. 27 00:01:44.240 --> 00:01:46.210 Class basic components are created 28 00:01:46.240 --> 00:01:51.180 by defining a class that extends the React component class. 29 00:01:51.210 --> 00:01:53.460 So what is a component class 30 00:01:53.490 --> 00:01:54.540 in React? 31 00:01:54.570 --> 00:01:56.850 A component is a small reusable piece 32 00:01:56.880 --> 00:02:00.740 of code that can be use to build larger components or applications. 33 00:02:00.770 --> 00:02:05.340 We already know this and it encapsulates some specific functionality or behavior 34 00:02:05.370 --> 00:02:09.660 that can be reused across different parts of your application. 35 00:02:09.690 --> 00:02:12.610 When we define a class in React, 36 00:02:12.640 --> 00:02:17.500 we're going to have to change our implementation a little bit. 37 00:02:17.530 --> 00:02:21.380 So this is how functional components look. 38 00:02:21.410 --> 00:02:24.580 Now, if we were to transform this into a class based components, 39 00:02:24.610 --> 00:02:28.020 we're actually going to have to use a class keyword. 40 00:02:28.050 --> 00:02:32.450 And class keyword is not a function, it is a blueprint, right? 41 00:02:32.480 --> 00:02:35.540 So we can't just return something from here. 42 00:02:35.570 --> 00:02:39.700 We're going to have to use a different approach here. 43 00:02:39.730 --> 00:02:43.140 So first of all, we're going to have to import a component 44 00:02:43.170 --> 00:02:49.380 class from React and we're going to have to say that it extends the component. 45 00:02:49.410 --> 00:02:51.180 And once we do that, 46 00:02:51.210 --> 00:02:55.900 we're going to have to change our return statement and actually use a specific 47 00:02:55.930 --> 00:03:01.820 function that makes us able to render our components on this component. 48 00:03:01.850 --> 00:03:09.100 So this function is called Render and we could use our return here, inside here, 49 00:03:09.120 --> 00:03:11.300 so that we render the Hello World application. 50 00:03:11.330 --> 00:03:14.740 Now, if I were to save this, you'll see that nothing really changed. 51 00:03:14.770 --> 00:03:19.420 So this is how class based components would look like. 52 00:03:19.450 --> 00:03:22.460 But here we don't really use any kind 53 00:03:22.490 --> 00:03:25.900 of props because this is the root of our application. 54 00:03:25.930 --> 00:03:29.940 But what if this was a components where we wanted to use props? 55 00:03:29.970 --> 00:03:36.500 If we wanted to use props, we're going to have to create a class constructor. 56 00:03:36.530 --> 00:03:39.820 So a constructor is a special method 57 00:03:39.850 --> 00:03:43.780 that gets called when a new object is created from a class. 58 00:03:43.810 --> 00:03:46.100 It is used to initialize the object's 59 00:03:46.130 --> 00:03:51.940 properties and set up any initial state and it is a specific function called 60 00:03:51.970 --> 00:03:56.060 constructor and it can't be created multiple times. 61 00:03:56.090 --> 00:04:00.740 It's used for a specific use case that I just described. 62 00:04:00.770 --> 00:04:03.100 And when we use the constructor, 63 00:04:03.130 --> 00:04:10.100 we essentially set the initial state and bind event handlers to our class. 64 00:04:10.130 --> 00:04:14.500 We can also use it to set props that are passed to the component. 65 00:04:14.530 --> 00:04:19.940 And we know that props are like arguments that are passed to a function, 66 00:04:19.970 --> 00:04:23.420 but in this case they are passed to a component as attributes. 67 00:04:23.450 --> 00:04:26.860 So if you wanted to set props for a class, 68 00:04:26.890 --> 00:04:33.060 you would actually have to use another important function inside it called super. 69 00:04:33.090 --> 00:04:35.740 So if I just define a constructor here, 70 00:04:35.770 --> 00:04:40.420 I will automatically get the super function inside here. 71 00:04:40.450 --> 00:04:41.820 I can't bypass it. 72 00:04:41.840 --> 00:04:43.900 And if I were to delete this and save it 73 00:04:43.920 --> 00:04:46.980 like that, you're going to see that I get an error. 74 00:04:47.010 --> 00:04:48.620 This hasn't been initialized. 75 00:04:48.650 --> 00:04:50.700 Super hasn't been called. 76 00:04:50.720 --> 00:04:56.020 So what is super? In the context of React classbased components 77 00:04:56.040 --> 00:05:00.540 we use super in the constructor of our component class to call the constructor 78 00:05:00.570 --> 00:05:05.620 of the parent class which in this case is React component class. 79 00:05:05.650 --> 00:05:09.500 This is necessary to ensure that our component class has access to all 80 00:05:09.530 --> 00:05:14.160 the functionality provided by React components class such as lifecycle methods 81 00:05:14.190 --> 00:05:18.860 and state management that we're soon going to talk about in the upcoming videos. 82 00:05:18.890 --> 00:05:24.180 This super function is available to us because it's built in into the JavaScript 83 00:05:24.210 --> 00:05:28.660 language and is used for inheritance between classes. 84 00:05:28.690 --> 00:05:33.020 So we're going to inherit some of the functionalities from the component 85 00:05:33.040 --> 00:05:36.900 class that has been defined inside the React component class. 86 00:05:36.920 --> 00:05:38.920 So when we define a class that extends 87 00:05:38.950 --> 00:05:43.300 another class, we automatically inherit the super function from the parent class. 88 00:05:43.330 --> 00:05:47.220 So here if we wanted to use props, we would actually have to say 89 00:05:47.250 --> 00:05:55.700 that constructor is expecting a props attribute and the super function is going 90 00:05:55.730 --> 00:06:03.260 to grab these props and set our props for our use inside the components. 91 00:06:03.290 --> 00:06:09.620 So this is what would make you able to use props in a class based components. 92 00:06:09.650 --> 00:06:14.340 If you have a class based component and you don't define this constructor 93 00:06:14.360 --> 00:06:17.740 and super method, you're not actually going to have access 94 00:06:17.770 --> 00:06:23.340 to your properties that might have been passed to your class based component. 95 00:06:23.360 --> 00:06:26.180 So to sum up, a class based component is 96 00:06:26.210 --> 00:06:29.780 a way to create reusable components in React native 97 00:06:29.800 --> 00:06:33.340 by defining a class that extends the React component class. 98 00:06:33.360 --> 00:06:38.500 We can use the constructor to set initial state, bind event handlers and set props. 99 00:06:38.530 --> 00:06:40.780 And we need to call super the constructor 100 00:06:40.800 --> 00:06:45.420 to properly set up the components, props and other internal values. 101 00:06:45.450 --> 00:06:47.020 That's it for this video. 102 00:06:47.040 --> 00:06:48.300 Thanks so much for watching. 103 00:06:48.320 --> 00:06:50.400 Happy coding and I'll see you in the next one.