1 00:00:00,420 --> 00:00:07,470 Now that we've gone through some of the concepts in React, let's try to revisit component and add more 2 00:00:07,470 --> 00:00:14,670 things to it by talking about, for example, types of component and how we can break down a layout 3 00:00:14,670 --> 00:00:16,910 into pieces or components. 4 00:00:16,920 --> 00:00:24,930 So let's get started with types of components where basically we have two types of component and react 5 00:00:25,170 --> 00:00:28,560 stateless component and state for component. 6 00:00:28,650 --> 00:00:34,530 So stateless component is a component that does not have any internal state. 7 00:00:34,950 --> 00:00:37,470 Stateless components are simpler. 8 00:00:37,470 --> 00:00:42,960 They just take in process or attribute and then return some HTML again. 9 00:00:42,990 --> 00:00:49,770 Stateless component also known as presentational or dump or stateless component. 10 00:00:49,980 --> 00:00:56,400 So instead let's component a simple react component, not have any state and then can only receive props 11 00:00:56,400 --> 00:00:57,630 from parent components. 12 00:00:57,630 --> 00:01:04,260 For example, you can create a component for only input field or a dropdown menu or basic headers or 13 00:01:04,260 --> 00:01:06,540 paragraph or images as that. 14 00:01:06,540 --> 00:01:10,830 So let's get started with what is called the stateless component in this video. 15 00:01:11,010 --> 00:01:13,440 So back to our folder here. 16 00:01:13,470 --> 00:01:20,040 Now, we are going to create one more folder here and let me place it inside here. 17 00:01:20,070 --> 00:01:21,360 Component, component. 18 00:01:21,360 --> 00:01:24,090 So let me call it as component part two. 19 00:01:25,340 --> 00:01:26,420 Component. 20 00:01:27,290 --> 00:01:28,490 Part two. 21 00:01:29,480 --> 00:01:32,600 So let's start with the stateless component. 22 00:01:32,780 --> 00:01:43,010 So here, let's create a function and cause a state less stateless component or compo and. 23 00:01:43,100 --> 00:01:50,510 JS So the snippets are AFC and boom, I have my stateless component. 24 00:01:50,960 --> 00:02:03,830 So let's add H2 and say states list component and now let's return that or render that to inside my 25 00:02:03,830 --> 00:02:08,300 app stateless component or to import. 26 00:02:08,300 --> 00:02:12,080 And now let me comment out this or let me repeat this one. 27 00:02:12,650 --> 00:02:15,190 Let me move this one to have some clean sheets. 28 00:02:15,560 --> 00:02:17,570 So now I have stateless component. 29 00:02:17,570 --> 00:02:22,910 So stateless component are just for presentational meaning. 30 00:02:22,910 --> 00:02:31,040 For example, if won't make reuse of a pattern across your entire application, we can create a stateless 31 00:02:31,040 --> 00:02:32,690 component for that. 32 00:02:32,780 --> 00:02:36,560 So let's go ahead and create a pattern component. 33 00:02:36,590 --> 00:02:38,660 All right, a pattern component. 34 00:02:38,690 --> 00:02:44,780 It means that that pattern can be reused across or inside our entire application. 35 00:02:45,170 --> 00:02:52,040 So instead of making a stateless component, well, I can make this one as pattern component. 36 00:02:53,710 --> 00:02:55,330 Biden component here. 37 00:02:56,130 --> 00:02:59,700 So a stateless or I make it barren. 38 00:03:00,620 --> 00:03:01,670 Stateless. 39 00:03:02,300 --> 00:03:03,710 So that to be more descriptive. 40 00:03:03,710 --> 00:03:04,190 Right. 41 00:03:04,190 --> 00:03:05,870 But in stateless. 42 00:03:08,620 --> 00:03:09,360 Compo. 43 00:03:09,520 --> 00:03:10,420 It's long though. 44 00:03:10,420 --> 00:03:11,080 But don't worry. 45 00:03:11,080 --> 00:03:12,910 I just want to make more descriptive. 46 00:03:12,910 --> 00:03:17,740 So let's rename the name here back to that. 47 00:03:17,830 --> 00:03:20,860 And now the import is wrong again. 48 00:03:20,890 --> 00:03:23,470 So now it is rename. 49 00:03:23,470 --> 00:03:28,780 And then let's change this one to stateless component and then state less component. 50 00:03:29,020 --> 00:03:30,190 Okay, good. 51 00:03:30,670 --> 00:03:36,490 So we are going to create a button and this button, we can reuse it inside our application where we 52 00:03:36,490 --> 00:03:37,090 want. 53 00:03:37,090 --> 00:03:38,980 So here we go. 54 00:03:39,490 --> 00:03:43,990 So inside a button, here we are going to create a button. 55 00:03:43,990 --> 00:03:49,360 So instead of just returning here, we can return just a button here, a baton tag. 56 00:03:50,880 --> 00:03:52,230 And there you go. 57 00:03:52,330 --> 00:03:55,410 Call this one as Starr star. 58 00:03:56,340 --> 00:03:57,360 So check it out. 59 00:03:57,390 --> 00:04:01,770 Now, we have registered here, but we can add more style to it. 60 00:04:02,050 --> 00:04:02,820 You get it? 61 00:04:02,820 --> 00:04:04,680 So let's get going. 62 00:04:04,950 --> 00:04:07,160 Well, we pass in. 63 00:04:07,170 --> 00:04:09,120 Let's do the inline style in here. 64 00:04:09,390 --> 00:04:13,990 And the first one is we have access to the font size. 65 00:04:14,010 --> 00:04:20,700 Let's say the font size of this one is going to be 30 or 20 pages. 66 00:04:21,089 --> 00:04:29,970 And then after that, you also need the part in a part in of, say, ten pages on all sizes. 67 00:04:30,760 --> 00:04:31,390 Save it. 68 00:04:31,540 --> 00:04:34,030 Come to the next line and let's say the border. 69 00:04:34,690 --> 00:04:35,710 Border. 70 00:04:37,330 --> 00:04:43,720 Is going to be one piece of solid, let's say yellow. 71 00:04:43,750 --> 00:04:45,040 It's up to you. 72 00:04:45,660 --> 00:04:47,670 This just like a normal case. 73 00:04:47,680 --> 00:04:51,310 And then we have the border radios. 74 00:04:52,440 --> 00:04:56,060 Border Radio's own. 75 00:04:58,840 --> 00:05:02,530 A radius of less say. 76 00:05:04,350 --> 00:05:06,150 Give it us $10. 77 00:05:06,330 --> 00:05:07,960 So let's see what we have so far. 78 00:05:07,980 --> 00:05:09,300 Yes, something like this. 79 00:05:09,300 --> 00:05:11,610 I think the color here make it us. 80 00:05:11,880 --> 00:05:19,380 Let me get about one color, a background color of, say, just some ugly semantic here. 81 00:05:19,560 --> 00:05:20,230 Okay. 82 00:05:20,640 --> 00:05:22,860 The border here around it, I think. 83 00:05:22,980 --> 00:05:23,870 Let's make it to paste. 84 00:05:24,030 --> 00:05:24,840 That is more. 85 00:05:25,670 --> 00:05:26,150 Yeah. 86 00:05:26,180 --> 00:05:27,290 It's more clay here. 87 00:05:27,590 --> 00:05:32,870 And the color on the text is let's give it as white. 88 00:05:34,850 --> 00:05:36,690 And there you go. 89 00:05:36,710 --> 00:05:44,840 So now this button or this component is what you call presentational component or stateless component, 90 00:05:44,900 --> 00:05:50,720 because inside this component, there is no state that this component is keeping track of. 91 00:05:50,870 --> 00:05:56,940 So let's say that I want to use this component inside my app component instead. 92 00:05:56,960 --> 00:06:01,310 So here, instead of just returning, okay, I'm coding. 93 00:06:01,550 --> 00:06:07,940 What about if I want to call this body component inside my any of this component, I can still reuse 94 00:06:07,940 --> 00:06:08,060 it. 95 00:06:08,060 --> 00:06:09,620 That is how I mean. 96 00:06:09,620 --> 00:06:13,730 Component is all about able to reuse the component. 97 00:06:14,300 --> 00:06:22,610 But one more thing is that stateless component can take in problem meaning we need we can customize 98 00:06:22,610 --> 00:06:24,600 our component the way we want. 99 00:06:24,620 --> 00:06:31,850 Let's say that on the let me let's get back to let's say let me go my component. 100 00:06:31,940 --> 00:06:41,660 What about let's try to call this component CSS and react this component. 101 00:06:41,660 --> 00:06:44,000 I want to add a button to this component. 102 00:06:44,000 --> 00:06:45,380 So I need to import that. 103 00:06:45,380 --> 00:06:50,540 So import I think I have the import button stateless component. 104 00:06:50,540 --> 00:06:52,700 I have the auto import here. 105 00:06:54,050 --> 00:06:54,410 Yes. 106 00:06:54,410 --> 00:07:00,650 So now I can call the component here as but instead less component. 107 00:07:00,920 --> 00:07:05,390 So instead of this one, we are going to render the CSS here. 108 00:07:05,390 --> 00:07:13,250 So now let's change this one to the CSS react component, the auto import as above here. 109 00:07:13,400 --> 00:07:20,870 If I say we see that I have the button inside this component, but let's say that on this component 110 00:07:20,900 --> 00:07:27,230 I want to change the background color or the size of the button or the height of the button. 111 00:07:27,320 --> 00:07:32,240 That's where we can pass in props to a presentation of component. 112 00:07:32,240 --> 00:07:39,590 So in the next video, we are going to customize or make our component more flexible by passing in prop 113 00:07:39,620 --> 00:07:43,010 going to receive from component and then we can render this one. 114 00:07:43,010 --> 00:07:48,710 What about I just want to name the type listed here to be log in if want to change here to log instead 115 00:07:48,710 --> 00:07:49,700 of register. 116 00:07:49,700 --> 00:07:55,070 Well, that's what I'm going to do to make it more customizable and make it more flexible. 117 00:07:55,070 --> 00:07:57,950 So let's get into that in the next video.