1 00:00:00,240 --> 00:00:06,370 To create a component we need to create a new file the S in conversion. 2 00:00:06,390 --> 00:00:09,950 We need to use Campbell case for the component. 3 00:00:09,960 --> 00:00:18,180 So we create a new file and cut both the S and inside this file. 4 00:00:18,180 --> 00:00:27,720 We can type our EFC and pass tab every year automatically create the rest of the COPE. 5 00:00:27,840 --> 00:00:29,070 Here we used to. 6 00:00:29,160 --> 00:00:29,540 Yes. 7 00:00:29,550 --> 00:00:34,160 7 extension which is you can find here. 8 00:00:34,840 --> 00:00:40,200 It is very convenient just to type the code by using just a few words. 9 00:00:40,710 --> 00:00:45,930 So if you have one in this boy piece install it here. 10 00:00:46,740 --> 00:00:58,870 Since we will also use the S S IN OUR CODE component so we have to copy this one and paste it here. 11 00:00:59,070 --> 00:01:02,330 Also these names a be in capital letter. 12 00:01:02,340 --> 00:01:07,080 The first letter because otherwise you can do all new stuff. 13 00:01:07,090 --> 00:01:13,100 We hope because that we add cannot recognize this is the component. 14 00:01:13,290 --> 00:01:21,080 Now we can copy the j as X that we want that to be the component so we paste it here. 15 00:01:21,180 --> 00:01:25,820 Now we came back to the app today ass and delete all the rest of the code. 16 00:01:26,190 --> 00:01:33,660 We need to use a component so we have to import top from the top. 17 00:01:34,800 --> 00:01:38,820 We do not need to add a party s if we want to use the component. 18 00:01:38,850 --> 00:01:42,930 We just need to type card and code to attack. 19 00:01:42,930 --> 00:01:46,620 Now you kind of see the component of red displayed here. 20 00:01:46,830 --> 00:01:50,190 So if we want to make free card we just need to duplicate 21 00:01:54,300 --> 00:01:57,990 and now you can see there are four cars here. 22 00:01:57,990 --> 00:02:01,050 So as you can see this is a much cleaner than before. 23 00:02:01,140 --> 00:02:05,050 It already showed this is maintainable and also be usable. 24 00:02:05,070 --> 00:02:08,030 But now you can see all v cars are the same. 25 00:02:08,340 --> 00:02:14,100 So if you want to conflict the component you need to know about props which we will learn in the later 26 00:02:14,120 --> 00:02:14,760 chapters.