1 00:00:00,480 --> 00:00:01,770 That was nice and easy. 2 00:00:01,770 --> 00:00:06,840 Now we know how we can work with class based components how we can work with state. 3 00:00:06,840 --> 00:00:09,360 The alternative syntax to the state. 4 00:00:09,490 --> 00:00:12,960 Why don't we make our application a little bit better looking. 5 00:00:13,140 --> 00:00:15,830 Because at the moment I would have to be honest with you. 6 00:00:15,900 --> 00:00:21,960 It kind of looks ugly and obviously this is on me since I'm guiding us and I don't like the way this 7 00:00:21,960 --> 00:00:22,850 is going work. 8 00:00:22,980 --> 00:00:29,070 So why don't we try to again recreate like we had already with Amazon looks when there is gonna be some 9 00:00:29,070 --> 00:00:30,040 kind of book. 10 00:00:30,080 --> 00:00:33,540 How is that going to be a book title as well as the author. 11 00:00:33,600 --> 00:00:35,670 You can choose whatever books you would like. 12 00:00:35,670 --> 00:00:39,060 Again I'm gonna pick the ones that I like the most I guess. 13 00:00:39,060 --> 00:00:46,110 Judging by the images and then is gonna look how everything is gonna work together being displayed as 14 00:00:46,110 --> 00:00:47,320 a nice application. 15 00:00:47,490 --> 00:00:51,370 So first and foremost I'm gonna head over back to the book data. 16 00:00:51,390 --> 00:00:56,070 This is what I'm interested and I'm just going to delete at the moment everything because we're gonna 17 00:00:56,070 --> 00:00:58,120 set up everything from scratch. 18 00:00:58,140 --> 00:01:05,430 The neat thing here is that the way we have set up everything that this is being passed to a state then 19 00:01:05,430 --> 00:01:09,400 state as this as books and then we're doing the mapping. 20 00:01:09,660 --> 00:01:16,030 The only thing we're going to have to change is the book data as well as the book component itself not 21 00:01:16,040 --> 00:01:16,740 as this guy. 22 00:01:16,800 --> 00:01:18,810 The one that we were working in the beginning. 23 00:01:18,820 --> 00:01:20,790 This is the one they're all going to have to change. 24 00:01:20,790 --> 00:01:25,220 In fact book list we're going to be able to just leave it the way it is. 25 00:01:25,410 --> 00:01:31,470 Now we're gonna get rid of some things I think especially in an app like Me head over back there first 26 00:01:31,470 --> 00:01:33,810 probably and I'm just gonna get over this. 27 00:01:33,810 --> 00:01:35,340 This is my application. 28 00:01:35,400 --> 00:01:40,050 It's kind of obvious that this is gonna be our application as well as right away. 29 00:01:40,050 --> 00:01:40,870 You know what. 30 00:01:40,920 --> 00:01:46,950 Why don't we import the CSX because we're gonna use a little bit of apps to assess and just to refresh 31 00:01:46,950 --> 00:01:50,450 our memory we have to do it this way when we have the app. 32 00:01:50,610 --> 00:01:54,600 Then we have the full file extension and then the moment we're gonna save it. 33 00:01:54,600 --> 00:01:57,550 Now we're using the apps yes in our file. 34 00:01:57,950 --> 00:01:59,520 Okay that was easy. 35 00:01:59,520 --> 00:02:06,330 Now I can close the sidebar since I am importing apps he says I don't need the app just anymore as well 36 00:02:06,330 --> 00:02:07,940 as I don't need the index. 37 00:02:08,010 --> 00:02:12,000 I will gonna use the book data and you know what my book disappeared. 38 00:02:12,000 --> 00:02:14,390 So let me head over back to the book. 39 00:02:14,400 --> 00:02:18,990 Again I'm going to close the sidebar and why don't we change it around a little bit here. 40 00:02:18,990 --> 00:02:21,250 I'm going to say first of all that there is gonna be. 41 00:02:21,300 --> 00:02:22,320 So fair enough. 42 00:02:22,320 --> 00:02:24,060 We're going to work with some kind of. 43 00:02:24,330 --> 00:02:27,620 Then we're gonna have the image and the way we're going to get the image. 44 00:02:27,630 --> 00:02:32,650 Again we're not going to download the image or we're gonna get the path now the way you can do that. 45 00:02:32,650 --> 00:02:36,500 We can just say copy and generous and we're gonna set this up in a string. 46 00:02:37,590 --> 00:02:40,710 The model will copy and paste it everything should be working fine. 47 00:02:40,710 --> 00:02:45,390 Then we are also gonna have the title every book should have the title. 48 00:02:45,390 --> 00:02:48,080 So this guy's gonna be again our donkey. 49 00:02:48,320 --> 00:02:51,000 Then this is gonna be a string again. 50 00:02:51,000 --> 00:02:57,360 Now last but not least we do have our author again we will gonna do a little bit of copying pasting 51 00:02:57,360 --> 00:03:02,550 in the beginning because I do find it even though it's a little bit redundant I find it a little bit 52 00:03:02,550 --> 00:03:05,400 faster then again just re typing everything. 53 00:03:05,790 --> 00:03:11,760 And our idea is again to kind of see how everything works together not spend too much time on setting 54 00:03:11,760 --> 00:03:14,930 this up and then I'm going to say that there's gonna be three of them. 55 00:03:14,950 --> 00:03:16,790 So one two three. 56 00:03:17,010 --> 00:03:20,290 And let's just change these values so this would be two. 57 00:03:20,580 --> 00:03:23,920 Then we're gonna have three and then let's pick some kind of different books. 58 00:03:24,120 --> 00:03:30,300 So let's say we're gonna be first of all looking for I don't know what I am kind of looking for the 59 00:03:30,300 --> 00:03:33,220 short titles and everything. 60 00:03:33,250 --> 00:03:37,250 And once I'm being put on the spot I cannot find something. 61 00:03:37,410 --> 00:03:41,170 So let's say here again copy a major address. 62 00:03:41,290 --> 00:03:50,550 Then I'm going to replace this guy as well as the title is gonna be right here. 63 00:03:51,450 --> 00:03:56,850 Okay what else we have all we have the name which is gonna be like this. 64 00:03:56,860 --> 00:04:01,330 So we are going to copy and paste this and then let's do one more. 65 00:04:01,330 --> 00:04:06,910 I don't think we need to do two crazy because we might as well just copy and paste it and we'll see 66 00:04:06,910 --> 00:04:10,910 how everything looks nice and our former first lady. 67 00:04:11,050 --> 00:04:12,970 Why don't we do this one. 68 00:04:13,190 --> 00:04:17,430 What a long long long common human dress. 69 00:04:17,860 --> 00:04:23,840 And I'm gonna write say like this campaign paste it then becoming. 70 00:04:23,860 --> 00:04:26,010 That was the name on here. 71 00:04:26,110 --> 00:04:28,150 Course I'm going here where I didn't want. 72 00:04:28,170 --> 00:04:28,940 But you know what. 73 00:04:29,050 --> 00:04:30,880 I was just gonna live with that. 74 00:04:30,880 --> 00:04:38,050 I was gonna have the name here this is going to be might be coming and then we can do by Michelle Obama 75 00:04:38,050 --> 00:04:40,310 and this is going to be hard to copy probably. 76 00:04:40,910 --> 00:04:44,140 Let me head over back here and let's say like this. 77 00:04:44,140 --> 00:04:47,640 So this would be the extent of copying pasting again. 78 00:04:47,920 --> 00:04:48,660 I understand. 79 00:04:48,670 --> 00:04:53,540 Might be a little bit redundant but still faster than typing everything this by hand. 80 00:04:53,720 --> 00:04:56,580 And what I'm noticing right now that I'm only getting the author. 81 00:04:56,710 --> 00:05:04,530 So even though everything worked in the book I am only requesting this book as well as the author. 82 00:05:04,640 --> 00:05:06,310 So we would need to change this around. 83 00:05:06,410 --> 00:05:10,010 But obviously these are not the values that we're getting right now. 84 00:05:10,040 --> 00:05:12,340 So what do we have instead is what. 85 00:05:12,830 --> 00:05:14,750 Well we're going to have first of all the image. 86 00:05:14,750 --> 00:05:19,050 So we're going to be getting the images then we have the title and then we have the author. 87 00:05:19,050 --> 00:05:25,400 And now I'd like to restructure all but where within the article we're going to have the image but for 88 00:05:25,400 --> 00:05:27,770 image this is we're all gonna be getting the source. 89 00:05:27,940 --> 00:05:30,290 Now the source is going to be our image. 90 00:05:30,380 --> 00:05:32,000 So I'm going to write over here like this. 91 00:05:32,020 --> 00:05:33,650 This wouldn't be my image. 92 00:05:33,650 --> 00:05:34,780 It's a book. 93 00:05:34,830 --> 00:05:37,320 And that would be her image and weave right away. 94 00:05:37,320 --> 00:05:43,370 Can I then on a with of like I don't know one hundred and fifty obviously there's gonna be small enough 95 00:05:43,850 --> 00:05:51,570 as well as we have heading for heading for is gonna be our title well it's right here like this. 96 00:05:52,820 --> 00:05:55,400 Tiny toll now. 97 00:05:55,400 --> 00:05:59,750 So we're going to change this guy and this is actually going to be our title. 98 00:05:59,750 --> 00:06:07,420 And last but not least we have the hanging six for our author and and for the author. 99 00:06:07,490 --> 00:06:13,040 We just want to work with a capital case and then let's see what we're going to have whether everything 100 00:06:13,040 --> 00:06:15,020 is going to work out or not. 101 00:06:15,020 --> 00:06:17,630 And it does and it looks really good. 102 00:06:17,630 --> 00:06:23,300 And again the key here is like this since we're working already state and we set up everything where 103 00:06:23,300 --> 00:06:27,020 we are looping through the state we're getting our item. 104 00:06:27,110 --> 00:06:32,330 This is gonna be each and every list item and then passing here is and therefore we're only interested 105 00:06:32,330 --> 00:06:34,880 here as working with this author. 106 00:06:34,880 --> 00:06:35,720 That's all we need. 107 00:06:35,720 --> 00:06:37,010 I'm sorry the book. 108 00:06:37,010 --> 00:06:39,650 The book component is the one that we're interested. 109 00:06:39,890 --> 00:06:44,700 And also I would like to work with whatever values I have in my success. 110 00:06:45,050 --> 00:06:51,680 So why don't we add the class name and let's say the class name is going to be book and my idea would 111 00:06:51,680 --> 00:06:57,050 be like this I would like to put the text side by side with the book and then the books are going to 112 00:06:57,050 --> 00:06:57,860 be rendered. 113 00:06:57,920 --> 00:07:00,450 So here I'm going to write the following. 114 00:07:00,560 --> 00:07:01,580 And you know what. 115 00:07:01,580 --> 00:07:05,210 One thing I would like to add is just some space in between. 116 00:07:05,310 --> 00:07:07,590 I think this is gonna look a little bit better. 117 00:07:07,850 --> 00:07:12,910 Then we can head over back to the lab see assess how this was gonna be our apps is this. 118 00:07:13,100 --> 00:07:18,950 We can either delete everything that's also an option we can say like this and then let just target 119 00:07:18,980 --> 00:07:25,670 the book Class now for The Book class we're going to say that this will gonna be a display of grid then 120 00:07:25,670 --> 00:07:31,760 we would like to send them side by side so I can say grid template columns and then the first value 121 00:07:31,880 --> 00:07:34,700 is gonna be how wide is the first count. 122 00:07:35,150 --> 00:07:38,210 And I would like to set this up for the image to be order. 123 00:07:38,690 --> 00:07:43,810 So regardless of how big is naming then I also would like to work with the second one which is going 124 00:07:43,800 --> 00:07:49,010 to be one fraction not one fraction is just gonna be for a text and this is going to take up the rest 125 00:07:49,010 --> 00:07:49,810 of the space. 126 00:07:49,970 --> 00:07:54,710 And here let's add maybe grid gap or grid column. 127 00:07:54,770 --> 00:08:00,680 Let's do that get a column back is gonna be one our rhythms as well as last but not least let's add 128 00:08:00,680 --> 00:08:08,120 margin and we're gonna write over here I don't know to our rhythms and zero something like this. 129 00:08:08,130 --> 00:08:13,550 Now the moment we served notice right now we're having our title then we are also have the author. 130 00:08:13,650 --> 00:08:19,670 However the kicker here is the simple fact that as we're setting up this book we should place this one 131 00:08:19,670 --> 00:08:23,480 in a separate div and then everything is gonna be working at the moment. 132 00:08:23,480 --> 00:08:25,730 This is not going to work the way I would want. 133 00:08:25,790 --> 00:08:32,840 So I'm going to reset this as a title and the only issue I guess right now is the donkey is screwing 134 00:08:32,840 --> 00:08:33,810 up everything. 135 00:08:33,890 --> 00:08:38,540 So obviously the reason for that is probably because they're getting a different image like this is 136 00:08:38,540 --> 00:08:39,690 bigger I guess. 137 00:08:39,740 --> 00:08:42,840 So why don't I go with this guy or not guy. 138 00:08:42,840 --> 00:08:43,960 I'm sorry girl. 139 00:08:44,150 --> 00:08:46,480 And that way they're all going to be the same. 140 00:08:46,520 --> 00:08:52,580 So if you really like the donkey my apologies but we're gonna get rid of it and we're gonna head over 141 00:08:52,580 --> 00:08:53,910 back to book data. 142 00:08:54,230 --> 00:08:56,140 And where are you donkey. 143 00:08:56,390 --> 00:08:57,900 Think you are like this. 144 00:08:57,950 --> 00:09:03,100 So I'm going to copy and paste it then we're gonna get whatever the name is. 145 00:09:03,230 --> 00:09:04,720 And you know what I know. 146 00:09:04,850 --> 00:09:12,080 Yeah I know I can get the full name like this and just copy on this one and we're gonna have a full 147 00:09:12,080 --> 00:09:14,700 name something similar. 148 00:09:14,840 --> 00:09:18,000 And then we're gonna head over again back to get the author. 149 00:09:18,020 --> 00:09:22,670 This was a little bit of detour I wasn't expecting that a donkey is gonna let me down. 150 00:09:22,670 --> 00:09:28,760 So hopefully we're gonna be able to get over that and now we save it and at least now they look side 151 00:09:28,760 --> 00:09:29,150 by side. 152 00:09:29,900 --> 00:09:35,720 So that's our neat thing how we can use the list and if we want to again copy and paste it once everything 153 00:09:35,720 --> 00:09:39,580 is set up in a state we can whatever have values. 154 00:09:39,590 --> 00:09:43,220 How many like so let's say 1 2. 155 00:09:43,220 --> 00:09:49,070 Again I'm not gonna be changing the actual values I will gonna change the idea otherwise you will gonna 156 00:09:49,070 --> 00:09:54,900 have big fat error or maybe another place to complain in your council. 157 00:09:55,100 --> 00:10:00,430 This is gonna before it's going to be five and then this is gonna be six. 158 00:10:00,500 --> 00:10:02,290 So we should be having six of them. 159 00:10:02,390 --> 00:10:09,170 So that's really neat how we can work with react set up our list set up our functionality and then we 160 00:10:09,170 --> 00:10:15,320 can just change whatever values we are getting from external API or that would be our own list.