1 00:00:00,420 --> 00:00:09,390 All right, so we've got our basic structure in place, but can you tell me the first thing that is 2 00:00:09,390 --> 00:00:12,440 a bit off when we look at this setup? 3 00:00:13,200 --> 00:00:18,660 So what could cause issues later down the line as your app gets bigger? 4 00:00:19,230 --> 00:00:20,300 Yeah, we have links. 5 00:00:20,310 --> 00:00:23,760 Yeah, we have social media icons and everything is beautiful. 6 00:00:24,240 --> 00:00:27,960 But the problem is that we are hard coding these values. 7 00:00:28,260 --> 00:00:36,120 And even though it works nicely here, if we work in a single number, what if I would have another 8 00:00:36,120 --> 00:00:38,240 component so you don't have to do it. 9 00:00:38,400 --> 00:00:40,680 This is just going to be for demonstration purposes. 10 00:00:41,070 --> 00:00:44,480 But I'm going to create a sidebar, jayesh and online. 11 00:00:44,490 --> 00:00:46,320 I'm going to create my component. 12 00:00:46,330 --> 00:00:47,400 That is my sidebar. 13 00:00:47,790 --> 00:00:50,360 And in here, I also want to display the links. 14 00:00:50,940 --> 00:00:53,940 So in order to speed this up, we're just going to copy and paste. 15 00:00:54,240 --> 00:00:56,910 That would be a reasonable approach. 16 00:00:56,910 --> 00:00:57,240 Right. 17 00:00:57,630 --> 00:01:02,460 So we have these links so I can just copy them, reach them in a sidebar. 18 00:01:02,790 --> 00:01:05,120 And then, of course, I'm already exporting sidebar. 19 00:01:05,610 --> 00:01:10,170 So the only thing left is to import my sidebar. 20 00:01:10,470 --> 00:01:18,090 And of course, I'll cover that from an on the sidebar and then I can push it wherever I want. 21 00:01:18,660 --> 00:01:20,670 So I'm just going to go with the sidebar. 22 00:01:21,120 --> 00:01:22,590 So technically, this works. 23 00:01:23,220 --> 00:01:24,630 I've got my legs. 24 00:01:25,120 --> 00:01:29,940 Now, the problem is, what if I change the name of my page? 25 00:01:30,480 --> 00:01:33,000 What if I say you're not it's not going to be contact. 26 00:01:33,480 --> 00:01:35,180 It is going to be project. 27 00:01:35,970 --> 00:01:37,070 So go with project. 28 00:01:37,230 --> 00:01:40,460 And maybe I'll also change the URL here as well. 29 00:01:41,440 --> 00:01:48,010 Now, the thing is, it only changes and the first one, correct, second one is still the contact. 30 00:01:48,520 --> 00:01:56,110 So now every time I need to change something, I need to hop around and I need to look for all the instances 31 00:01:56,350 --> 00:01:57,570 that have the links. 32 00:01:58,150 --> 00:02:03,150 So a better approach would be setting this up in some kind of data. 33 00:02:03,670 --> 00:02:11,910 So set this up in one place and then if it changes, then it automatically changes in multiple places. 34 00:02:12,250 --> 00:02:16,300 So all the instances that have the links, they right away change again. 35 00:02:16,660 --> 00:02:20,350 If you just have one number, you probably don't need to do that. 36 00:02:20,680 --> 00:02:28,000 But then keep in mind that as your project grows bigger, it is better to have the data separately. 37 00:02:28,480 --> 00:02:33,490 And then if you have multiple instances of the same data, for example, you would want to display these 38 00:02:33,490 --> 00:02:34,690 links in the sidebar. 39 00:02:34,690 --> 00:02:38,620 You would want to display it in a bar, in the footer or whatever. 40 00:02:38,980 --> 00:02:40,960 Then it's going to sit in one place. 41 00:02:40,960 --> 00:02:47,250 And then if you change it in one place, all the instances will right away be updated. 42 00:02:47,560 --> 00:02:49,790 And I already create a file for us. 43 00:02:49,960 --> 00:02:54,280 So if you navigate to their address, you'll notice, too. 44 00:02:54,310 --> 00:02:54,760 All right. 45 00:02:55,770 --> 00:03:02,640 And here we go with links there and then check it out, each link is an object and not any object and 46 00:03:02,710 --> 00:03:03,360 I have a list. 47 00:03:03,360 --> 00:03:10,580 I just added some ID one, two, three or whatever, and then we have the path again. 48 00:03:10,590 --> 00:03:15,120 Don't worry about this will cover this path once we get to the recruiter. 49 00:03:15,450 --> 00:03:18,510 The moment I fully understand that, it doesn't make much sense. 50 00:03:18,990 --> 00:03:20,490 And then we have the text. 51 00:03:20,490 --> 00:03:25,520 So text, of course, is going to be what is displayed here inside of the link. 52 00:03:25,800 --> 00:03:29,170 So what text we have and then once I've got this right. 53 00:03:29,460 --> 00:03:38,370 So what I could do is just iterate over that array in a bar, in a sidebar, or maybe in the footer. 54 00:03:38,670 --> 00:03:43,830 And then if I change something about those links, I just need to change that in one place. 55 00:03:43,830 --> 00:03:47,500 And then all the instances will be right away updated. 56 00:03:47,850 --> 00:03:49,110 So let's start out. 57 00:03:49,350 --> 00:03:54,570 And by the way, one quick thing before we start implementing that number. 58 00:03:54,990 --> 00:04:03,210 Technically, if you want to, you can iterate over this array here as well and then export the whole 59 00:04:03,210 --> 00:04:03,520 thing. 60 00:04:03,990 --> 00:04:10,590 So in our example, we'll iterate over the links in the number and then if we would want to use it in 61 00:04:10,590 --> 00:04:12,410 a sidebar, of course, we would do that as well. 62 00:04:12,840 --> 00:04:18,310 Just keep in mind that you can even iterate over these links here as well. 63 00:04:18,630 --> 00:04:22,380 Now, I thought that would be a bit of an overkill for this project. 64 00:04:22,380 --> 00:04:25,900 But in general, just remember that you can definitely do that. 65 00:04:26,340 --> 00:04:28,990 So let me navigate to you in a bar. 66 00:04:29,240 --> 00:04:32,360 Now I'm going to get rid of my hard coded ones. 67 00:04:32,760 --> 00:04:41,100 So notice here where I have the list items, I will remove them like so and then we're just going to 68 00:04:41,100 --> 00:04:45,420 iterate all the links I already imported from the data jazz. 69 00:04:45,750 --> 00:04:47,420 This is where it is coming from. 70 00:04:47,760 --> 00:04:52,920 And now what I could do is just go with Halli Malmsbury links. 71 00:04:52,950 --> 00:04:59,920 I'm iterating over links, I use my map and then for every link I would want to return a list item. 72 00:05:00,300 --> 00:05:03,840 Now I know that in my object I'm going to have three properties. 73 00:05:04,170 --> 00:05:06,690 I will have 80 euro and text. 74 00:05:06,840 --> 00:05:09,270 So now of course, I'll give it some kind of name. 75 00:05:09,510 --> 00:05:10,520 I'll say it. 76 00:05:10,520 --> 00:05:12,690 There's a link that references that object. 77 00:05:12,960 --> 00:05:15,240 And then what's the structure of those three things? 78 00:05:15,960 --> 00:05:18,390 Euro and then the text as well. 79 00:05:18,610 --> 00:05:20,750 And that will be equal to miling. 80 00:05:20,880 --> 00:05:25,240 So once I had the structure then then of course it is time for our return. 81 00:05:25,620 --> 00:05:30,510 And like I said, I would want to return a list on them for every link that I have. 82 00:05:30,750 --> 00:05:35,820 I'll add right away key within it since we have the list. 83 00:05:36,120 --> 00:05:43,350 And then instead of this list item, I'm going to go with atrip and then this will point to the URL 84 00:05:43,470 --> 00:05:46,520 that I have in my data, my euro property. 85 00:05:46,770 --> 00:05:53,850 And then lastly, as far as the text, I'm just going to access the text property and then once I save 86 00:05:54,090 --> 00:05:56,520 notice, now I have the same links. 87 00:05:56,520 --> 00:06:03,690 But the cool thing is that if I have multiple instances, what I could do and in this case, yes, I'll 88 00:06:03,690 --> 00:06:06,690 just copy and paste something, just speed it up. 89 00:06:06,700 --> 00:06:14,140 So we've got sidebar and then we copy and paste and now both of them have exactly the same now in here. 90 00:06:14,160 --> 00:06:19,320 Of course, it complains that I didn't import the links, so of course we would need to fix that. 91 00:06:19,510 --> 00:06:21,330 Again, that is just for demonstration. 92 00:06:21,330 --> 00:06:22,260 You don't have to do that. 93 00:06:22,680 --> 00:06:23,580 So let's save. 94 00:06:23,790 --> 00:06:26,280 And now I have both of these instances. 95 00:06:26,580 --> 00:06:30,480 I have the number and I have technically this is called sidebar. 96 00:06:30,480 --> 00:06:30,720 Right. 97 00:06:30,960 --> 00:06:33,090 So let me add some kind of heading for. 98 00:06:33,210 --> 00:06:39,240 So I'm going to go here with a fragment and I'm doing that because of the success that I have in this 99 00:06:39,240 --> 00:06:39,750 container. 100 00:06:40,230 --> 00:06:41,840 It's really irrelevant right now. 101 00:06:42,210 --> 00:06:47,280 I'm going to go with sidebar here so we should see the sidebar. 102 00:06:47,460 --> 00:06:49,820 And of course, I can also see the links. 103 00:06:50,250 --> 00:06:54,900 So what we could do is navigate to the data. 104 00:06:55,410 --> 00:07:02,850 And if I change, I don't know the text for the home, I go random, which you'll notice that in both 105 00:07:02,850 --> 00:07:05,990 cases, home changes to random. 106 00:07:06,690 --> 00:07:11,340 So that's how we can keep all our data in one place. 107 00:07:11,700 --> 00:07:18,120 And then if we need to make some changes, which is changed over here and all the instances are automatically 108 00:07:18,120 --> 00:07:24,870 updated, and you can probably already guess that if we have social one and of course we're doing exactly 109 00:07:24,870 --> 00:07:25,280 the same. 110 00:07:25,590 --> 00:07:30,660 So we have social media link that is my object are going to have the array because I'm going to have 111 00:07:30,660 --> 00:07:32,570 a list, then I have the URL. 112 00:07:32,910 --> 00:07:35,250 So this is where we would want to navigate eventually. 113 00:07:35,520 --> 00:07:38,340 And then we have the icon now for the icon. 114 00:07:38,340 --> 00:07:46,530 Since I'm using react icons, make sure you also import react because this is a component, otherwise 115 00:07:46,740 --> 00:07:47,940 there's going to be an error. 116 00:07:48,120 --> 00:07:54,910 So make sure that not only import icons but also import react and then you set up your own. 117 00:07:56,040 --> 00:08:03,450 Now, of course, you are ready to export, so that's why in the Navar I also have the social media 118 00:08:03,480 --> 00:08:11,280 icon and now instead of hard coding, you can probably already guess that we're going to go with social 119 00:08:11,930 --> 00:08:13,550 map online. 120 00:08:13,590 --> 00:08:21,270 As I'm iterating over, I'm going to call this social and then I can now write a way to structure it 121 00:08:21,270 --> 00:08:21,660 again. 122 00:08:21,780 --> 00:08:28,020 So we're going to go into the neural and the icon that is in my object. 123 00:08:28,410 --> 00:08:30,630 And I would want to get it from social icon. 124 00:08:30,990 --> 00:08:36,360 And as far as the return, we're going to go with the return allai, that key, of course, and then 125 00:08:36,360 --> 00:08:37,370 we pass in the area. 126 00:08:37,620 --> 00:08:39,390 And now it's time for our link. 127 00:08:39,580 --> 00:08:45,030 As far as the future, if we're going to go over the URL and the inside of the link, I'm going to go 128 00:08:45,030 --> 00:08:45,840 with Icon. 129 00:08:46,230 --> 00:08:51,900 So once we save, then, of course we would need to navigate to a bigger screen because otherwise we 130 00:08:51,900 --> 00:08:52,820 won't be able to see. 131 00:08:53,160 --> 00:08:56,720 And once I navigate here, all of these are my icons. 132 00:08:56,940 --> 00:08:58,020 So the same deal. 133 00:08:58,350 --> 00:09:04,650 If I would want to add them here in the sidebar and I think I would need to do is important there, 134 00:09:04,980 --> 00:09:13,290 then iterate over and then if I'll change anything about my icons, for example, the URL, then all 135 00:09:13,290 --> 00:09:15,390 the instances will be updated.