WEBVTT 00:01.230 --> 00:01.770 Okay. 00:01.800 --> 00:04.290 Let's talk about components now. 00:04.470 --> 00:10.650 And in this video, we will be doing different components and I will show you how to write them. 00:10.650 --> 00:13.380 And what are these in React? 00:13.530 --> 00:17.790 So basically in React, everything is component. 00:17.790 --> 00:19.500 So what does it mean? 00:19.500 --> 00:25.110 That means it any function, any piece of code can become a component. 00:25.140 --> 00:26.670 So what is component? 00:26.670 --> 00:28.470 In fact, component. 00:28.470 --> 00:30.840 It's a reusable piece of code. 00:30.840 --> 00:37.620 So on this example, as we can see here, that's our function here and the function called app. 00:37.620 --> 00:42.630 And that function renders hello from React on our page. 00:42.660 --> 00:50.010 So in the previous video I explained how this is all done and we use get element by ID root and inside 00:50.010 --> 00:57.420 we render our application and you can see this name here, it's the same name as we have here. 00:57.420 --> 01:03.970 So basically our function is a component here and we have a few types of the component. 01:03.970 --> 01:07.300 So let's clear this up a little bit. 01:07.300 --> 01:08.770 So we'll remove the logo. 01:08.800 --> 01:10.210 We don't use it anymore. 01:10.210 --> 01:14.770 And then also actually I can leave it there for now. 01:14.770 --> 01:19.300 So this file, App.js, it's a component. 01:19.300 --> 01:23.950 It's a one of the component, the main components in in our application. 01:23.950 --> 01:30.370 But I will show you a few ways how we can create a different components and component. 01:30.370 --> 01:32.980 I can create it using a simple function. 01:32.980 --> 01:39.880 So function like that and let's say our text like that. 01:40.540 --> 01:45.550 And then that's a normal JavaScript function, our text. 01:45.550 --> 01:53.650 So what we can do inside our function, we can return something and that's a combination of HTML and 01:53.650 --> 01:54.460 JavaScript. 01:54.460 --> 02:00.610 So I can do paragraph, this is our text. 02:00.790 --> 02:06.940 So I have a paragraph and by the way, this is JS x syntax. 02:06.940 --> 02:15.910 It's something unique in React, they developed a dot syntax and for me it's kind of hard to read because 02:15.910 --> 02:17.650 it's not very intuitive. 02:17.680 --> 02:24.400 This is JavaScript, this is typical JavaScript, and then we have kind of HTML, which is not really 02:24.610 --> 02:27.340 HTML, but for example, the div Classname. 02:27.340 --> 02:34.810 Normally in the HTML we would use class something like this, but class is restricted for JavaScript 02:34.840 --> 02:35.440 language. 02:35.440 --> 02:42.430 So they have different naming convention which is class name if you would like to apply class up to 02:42.430 --> 02:42.880 it. 02:42.880 --> 02:50.470 So basically in one file we have mixture of everything and I don't necessarily like it, but if you 02:50.470 --> 02:54.250 would like to use React, you kind of need to get used to it. 02:54.940 --> 03:02.890 So coming back to our function, our text, that's the function we have in our system and we can use 03:02.890 --> 03:04.270 it or we can reuse it. 03:04.270 --> 03:07.090 So we have hello from React here. 03:07.090 --> 03:14.080 Let's say we would like to use our component here so it will be as easy as opening opening new tag and 03:14.080 --> 03:17.710 then I will paste in our text, which is the name of the function. 03:17.710 --> 03:19.840 So I will do it like like that. 03:19.840 --> 03:28.120 And you can see ID is automatically closing that tag for for me or I can do is I can do a closing tag 03:28.120 --> 03:31.630 inside and I will open and close it in one go. 03:31.630 --> 03:38.140 So our text this is tag the name of the function we have there. 03:38.170 --> 03:43.840 So if I will save it now you can see this is our text rendered. 03:43.840 --> 03:48.340 So our function becomes a component just because we declare it here. 03:48.340 --> 03:56.950 If I would like to duplicate a control, I will do shift option and down three times and I will save 03:56.950 --> 03:57.430 it. 03:58.300 --> 04:01.810 You can see this is our text three times display. 04:01.810 --> 04:06.600 So it is reusing code that we can use in our application. 04:06.600 --> 04:12.870 So basically any function inside our react is component. 04:12.870 --> 04:15.720 So everything in React is component. 04:15.750 --> 04:19.740 I will remove it now and come back to one here. 04:19.740 --> 04:21.150 So this is our text. 04:21.150 --> 04:24.990 So that's typical function, which is our component. 04:24.990 --> 04:27.840 And you can see here that's also a function. 04:27.840 --> 04:31.680 And basically what we have here is a component as well. 04:31.680 --> 04:39.960 So this this big chunk that was created when we create our application is our component and that's a 04:39.960 --> 04:46.410 functional component and I will remove it for now, this one and also this one, because we will have 04:46.410 --> 04:50.340 an error and we will create a proper component from scratch. 04:50.340 --> 04:54.630 So what we need to do and I will show you actually two ways of creating components. 04:54.660 --> 05:00.540 We will do two thirds code here and inside our source I will create a new folder. 05:01.230 --> 05:03.460 This one and I will call it components. 05:03.490 --> 05:05.700 Components like that. 05:09.580 --> 05:11.350 Combo. 05:16.170 --> 05:24.150 Components like that and inside components, I can create a new file and let's name it header. 05:24.360 --> 05:34.740 JS So it's a normal normal JavaScript file, So header JS and we'll create inside this file we create 05:34.740 --> 05:35.880 a new component. 05:36.000 --> 05:41.640 So what we need to do, basically we will need to do similar thing as we've done here. 05:41.640 --> 05:45.120 So we need to import react. 05:47.120 --> 05:47.900 From. 05:49.600 --> 05:51.070 React like that. 05:51.070 --> 06:01.530 So once you will have that imported react, that means you inside this file, anything like a function 06:01.540 --> 06:04.330 function will become a component. 06:04.330 --> 06:10.480 So we can do function and then let's do header like that. 06:11.890 --> 06:17.890 And inside that function we can return something, return and we can do H1. 06:19.930 --> 06:23.470 This is header like that. 06:23.650 --> 06:32.650 So we have our function here and if we would like to use that component here, what we need to do is 06:32.680 --> 06:40.360 we need to import it, but before we will import this header into our main application, we need to 06:40.360 --> 06:43.840 export it from here and we have two ways to export it. 06:43.870 --> 06:48.640 We can do export header like this. 06:48.640 --> 06:51.980 So I could do like that. 06:54.880 --> 07:01.990 Export header, which is kind of object we exporting object and inside we export our function. 07:01.990 --> 07:05.740 And then I have this choice to import it here. 07:05.740 --> 07:15.130 So I go import and then I do this one, this header because that's the name of our function. 07:15.130 --> 07:21.160 And then from and then we need to specify from where we would like to import it. 07:21.160 --> 07:27.940 So basically if I open this, we are inside App.js, so we need to go to the components folder and then 07:27.940 --> 07:28.930 to header JS. 07:28.960 --> 07:31.540 So we close it now and let's do that. 07:31.540 --> 07:37.690 So from the current folder I will do components and then slash and then header. 07:37.690 --> 07:44.320 You can see here the header has been imported and once this is imported I can use it here, but you 07:44.320 --> 07:50.890 can see header, you already have that in the this application when we started. 07:50.890 --> 07:55.190 So we'll remove whatever was there and we will create use our own. 07:55.190 --> 07:59.630 So I will do header and then close the tag like that. 07:59.630 --> 08:04.220 So what we have is we don't have that hello from React anymore. 08:04.220 --> 08:11.060 What we will have in our application will have that header and we import that header from our component 08:11.060 --> 08:12.680 from the file we created. 08:12.680 --> 08:13.850 And this is header. 08:13.850 --> 08:15.530 That's what we have in the component. 08:15.530 --> 08:17.660 So I will go here, save it. 08:18.380 --> 08:19.670 And this is header. 08:19.670 --> 08:20.750 You can see it here. 08:20.750 --> 08:25.130 So basically our application, the main application main component is this one. 08:25.130 --> 08:29.300 And inside we import and we can inject more things. 08:29.300 --> 08:36.050 So I said previously that we have two ways to export something and import. 08:36.080 --> 08:43.490 This is one way we export this and this name needs to be exactly as here. 08:43.490 --> 08:44.900 But there is another way. 08:44.900 --> 08:51.740 If you have just one component or one thing that you would like to export from the file, what you can 08:51.740 --> 08:58.780 do is instead of passing like this, you can do export default. 08:59.780 --> 09:00.550 Heather. 09:00.560 --> 09:02.120 So I save it. 09:02.120 --> 09:06.260 Now I will have an error because I also need to change the way it's imported. 09:06.260 --> 09:14.540 And then instead of this, I can import header and it will work exactly the same as it was before. 09:14.540 --> 09:17.570 But this time I can name it whatever I like. 09:17.570 --> 09:22.700 If I don't want to call it header, it doesn't have to be the same name as we have it here because that's 09:22.700 --> 09:24.110 a default export. 09:24.110 --> 09:31.880 So we by default, we export this one and you can have only one export default export per file. 09:31.880 --> 09:35.180 So whatever you will call it here, it will be called. 09:35.180 --> 09:40.580 So usually it's a good practice to call it the same way, but you have an option to call it in a different 09:40.580 --> 09:45.500 way because it's a default one and you don't need to pass that curly brackets anymore. 09:45.620 --> 09:50.090 So basically, that's two ways you can export and import stuff. 09:50.090 --> 09:57.860 Next way to create a component is a class based component and I will show you how to do it now. 09:57.860 --> 10:00.030 So let's create another component. 10:00.030 --> 10:07.170 I will go to components here and I will create new file and let's call it Footer JS. 10:08.160 --> 10:14.250 I will collapse it to make it more space and then we'll create a component, another component in this 10:14.250 --> 10:17.430 file and we'll import it in the main application here. 10:17.430 --> 10:23.580 I will close those as we don't need them anymore and I will do similar thing as we've done in the previous 10:23.580 --> 10:23.790 one. 10:23.790 --> 10:24.780 So import. 10:26.770 --> 10:30.760 React from react. 10:30.760 --> 10:38.410 So we are telling that this file will be react file and whatever we will have it, it will be our component. 10:38.410 --> 10:44.800 Also, what we need to do is we also need to import our component. 10:44.800 --> 10:52.780 So I will do comma and then we will import component as well. 10:52.960 --> 10:55.420 So that's a keyword from React. 10:55.630 --> 11:03.100 So we are importing React, which is a default export export and we also import component. 11:03.100 --> 11:10.600 So what I can do here is we can create a new class, so we'll do class and call it footer. 11:10.930 --> 11:18.130 So that's a class syntax and then we can do extends component. 11:19.800 --> 11:20.700 Like that. 11:21.960 --> 11:28.030 And inside a component this will be similar as we've done before. 11:28.050 --> 11:29.220 So. 11:29.770 --> 11:31.210 Inside here. 11:31.210 --> 11:33.700 That will be our reusable component. 11:33.700 --> 11:35.320 But a syntax is different. 11:35.320 --> 11:43.530 We call it class instead of the function, and we tell it that it is a component using extend component. 11:43.540 --> 11:47.680 So we need to do a few things inside and also we'll need to export it. 11:47.680 --> 11:51.340 So export, let's use default one again. 11:53.410 --> 11:57.030 Default and footer like that. 11:57.040 --> 12:05.770 So the error is gone and then before we will actually include will go and include in App.js, we need 12:05.770 --> 12:07.260 to do a few things. 12:07.270 --> 12:16.930 So the class based components needs to have a function render like you can see here, and then parentheses 12:16.930 --> 12:18.940 and then curly brackets like that. 12:18.940 --> 12:25.570 And the render needs to return something so we can return here, let's say H2. 12:28.010 --> 12:29.750 This is our. 12:31.130 --> 12:32.840 Footer like that. 12:32.840 --> 12:36.680 So we have a simple class and I will save it now. 12:36.680 --> 12:40.400 And let's come back to the App.js, which is our main application. 12:40.400 --> 12:49.070 And instead of header now we can actually duplicate it and I will do footer and then I will import that 12:49.070 --> 12:50.540 from footer. 12:51.020 --> 12:59.330 So we have our footer here and let's say this will be, let's say main content here. 12:59.330 --> 13:06.170 I will just put something in between the header and the footer and then inside I will import, I will 13:06.170 --> 13:07.700 insert a footer. 13:07.700 --> 13:11.570 So what we have, we have our basically our application. 13:11.570 --> 13:14.210 Then we have a header which is separate component. 13:14.210 --> 13:18.230 I just put some content there and then we have a footer if I will save it. 13:18.230 --> 13:21.980 Now you can see this is footer. 13:21.980 --> 13:26.510 So we have two, two different components. 13:26.510 --> 13:31.350 One component is a class based and the syntax is like that. 13:31.350 --> 13:36.900 You need to extend component and you need to import that component from React and then you have inside 13:36.900 --> 13:42.090 render and you return something from that and then you export it. 13:42.090 --> 13:48.330 Another syntax is just a simple function and the name of the function and you return it straight away. 13:48.960 --> 13:57.450 So when to use functional components and when to use class based components, basically the idea is 13:57.450 --> 14:00.620 you will use functional wherever you can. 14:00.630 --> 14:05.310 So functional is shorter and simpler way to use the components. 14:05.310 --> 14:11.160 So if you don't need extra functionality and we will be talking about this later on in the course, 14:11.190 --> 14:15.120 then go for the functional because it's just easier to use. 14:15.120 --> 14:20.490 And then if you need some kind of extra functionality, then go for a class. 14:20.730 --> 14:26.460 So by default I will pick the functional first and then class for something more. 14:27.500 --> 14:30.320 Complicated and a more complicated estate. 14:30.320 --> 14:34.560 If we need to handle the state for a component, then we'll use the class one. 14:34.580 --> 14:37.730 Otherwise, the functional will be just enough. 14:37.730 --> 14:40.730 So that's all about the components. 14:40.970 --> 14:44.360 A component is a crucial part of the react. 14:44.360 --> 14:45.710 And they are everywhere. 14:45.710 --> 14:52.640 So every single piece of code we have on our page, it's a component and we'll be using components in 14:52.640 --> 14:53.960 this course a lot.