1 00:00:00,090 --> 00:00:00,780 All right. 2 00:00:00,780 --> 00:00:04,370 Fresh off the project hopefully everything was successful. 3 00:00:04,380 --> 00:00:10,110 We're all going to be going back to a tutorial and I would encourage you to do the same thing that I'm 4 00:00:10,110 --> 00:00:11,130 going to be doing. 5 00:00:11,130 --> 00:00:14,670 We're all going to be creating a new create react application. 6 00:00:14,770 --> 00:00:19,470 And the reason for that is very simple because in this case we're not going to be deleting as brutally 7 00:00:19,470 --> 00:00:21,040 as we were in the beginning. 8 00:00:21,150 --> 00:00:24,250 And I think it's just gonna make a little bit more sense. 9 00:00:24,360 --> 00:00:29,290 Technically you could work in the same old folder but I think it's just gonna be easier if you're going 10 00:00:29,290 --> 00:00:32,980 to follow along and do things exactly like I am doing. 11 00:00:33,140 --> 00:00:38,190 And first things first I would like to navigate to less now then once I'm gonna be in up. 12 00:00:38,220 --> 00:00:44,580 I'm gonna I'm gonna create a new folder I'm gonna say create react have and I don't know what can call 13 00:00:44,580 --> 00:00:50,000 this maybe tutorial tutorial I don't know second or something like this. 14 00:00:50,130 --> 00:00:52,750 And in this case we're gonna be creating a new folder. 15 00:00:52,860 --> 00:00:59,230 Again this might take a while so I'm gonna resume the video once all the dependencies are been installed. 16 00:00:59,280 --> 00:00:59,940 Nice. 17 00:00:59,940 --> 00:01:05,760 We have our application so why don't I open up my text later and then I'm just gonna drag and drop it 18 00:01:05,760 --> 00:01:09,470 here as well as I would like to right away have my browser windows. 19 00:01:09,480 --> 00:01:13,600 I'm going to send you a window and this is gonna be way too big for me right now. 20 00:01:13,680 --> 00:01:20,420 So let me make this one bigger more big and then I'm gonna open up my integrated terminal here I'm gonna 21 00:01:20,430 --> 00:01:22,080 around 9 p.m. start. 22 00:01:22,080 --> 00:01:24,660 So that's gonna bootstrap our application. 23 00:01:24,660 --> 00:01:29,490 Now I can make this a little bit more and now I'm just gonna be starting there so that's not what I 24 00:01:29,490 --> 00:01:30,430 wanted. 25 00:01:30,450 --> 00:01:33,110 So let's say I would want them side by side. 26 00:01:33,150 --> 00:01:35,920 That wouldn't be my first action. 27 00:01:36,030 --> 00:01:42,030 Now once I have them side by side I will gonna leave this open on a little bit the sidebar just so I 28 00:01:42,030 --> 00:01:44,490 can explain a little bit better of what we're doing. 29 00:01:44,490 --> 00:01:49,050 And then we're gonna head over and I'm just gonna close the terminal because I'm not gonna use it right 30 00:01:49,050 --> 00:01:49,650 now. 31 00:01:49,710 --> 00:01:52,470 Like I said in this case we're not gonna be as brutal. 32 00:01:52,470 --> 00:01:56,350 We're already at least are a little bit familiar what's happening. 33 00:01:56,550 --> 00:02:00,040 And in this case we're not gonna be doing anything within next year. 34 00:02:00,360 --> 00:02:06,030 I will gonna swing back at the end of the video and I'm going to kind of go over why the app is being 35 00:02:06,030 --> 00:02:07,070 rendered right now. 36 00:02:07,230 --> 00:02:13,260 But at the moment I would just like to cover what already imports and exports as well as how we can 37 00:02:13,260 --> 00:02:16,170 use these nice extensions or at least one of them. 38 00:02:16,320 --> 00:02:21,450 And that's gonna be this guy which is gonna be very very useful as you're gonna be working. 39 00:02:21,450 --> 00:02:22,680 So these are gonna be the same. 40 00:02:23,280 --> 00:02:28,500 But let's start with an imports and for now let me close the next James I will gonna open up the files 41 00:02:28,500 --> 00:02:31,450 again and we'll gonna head over back to the app. 42 00:02:31,550 --> 00:02:34,940 J.S. and this is we're all gonna be still brutal. 43 00:02:35,100 --> 00:02:40,560 So we're gonna still select everything that is in the app J.S. and it is gonna delete it because at 44 00:02:40,560 --> 00:02:46,050 the moment we don't know what is a cloud based component which by the way is the app J.S. currently 45 00:02:46,110 --> 00:02:47,380 or at least was. 46 00:02:47,520 --> 00:02:52,590 And now let's create our state stateless Functional Component again and as always we know that we need 47 00:02:52,590 --> 00:02:58,710 to use the imports and this is the good news after this video we should understand what is happening 48 00:02:58,710 --> 00:03:01,970 with the new imports going to be looking for react from. 49 00:03:02,100 --> 00:03:07,560 And then the dependency is going to be tracked then let's create our component let's say concert I will 50 00:03:07,560 --> 00:03:13,140 gonna name this map and then I'm going to say that app is gonna be equal to and then in this case we're 51 00:03:13,140 --> 00:03:16,970 not going to be passing anything we're just gonna have some I don't know S.. 52 00:03:17,040 --> 00:03:19,130 So let me make the parentheses. 53 00:03:19,370 --> 00:03:21,720 Let's right section and that's not what I wanted. 54 00:03:22,200 --> 00:03:27,330 So let me maybe have the angle bracket and then let's write section and then within the section we're 55 00:03:27,330 --> 00:03:29,120 gonna have PARAGRAPH OF. 56 00:03:29,340 --> 00:03:31,950 THIS IS MY CONTENT. 57 00:03:31,970 --> 00:03:39,240 Let's do very simple example how I do want to do one thing which again we haven't covered yet but in 58 00:03:39,240 --> 00:03:46,760 order for our example to work least currently let's do export default and then let's just write up again 59 00:03:46,770 --> 00:03:49,680 these names are gonna have to match. 60 00:03:49,680 --> 00:03:51,310 So this is gonna be important. 61 00:03:51,360 --> 00:03:52,310 Let me save it. 62 00:03:52,410 --> 00:03:53,620 And now everything is gonna be work. 63 00:03:54,210 --> 00:04:01,050 So why don't we finally take a stab of imports and exports and how they're working and what would be 64 00:04:01,050 --> 00:04:03,650 the major benefit of them already. 65 00:04:03,660 --> 00:04:09,810 Currently we so as we're working with our first project that if we're placing let's say one component 66 00:04:09,810 --> 00:04:13,370 here then that would be probably the list or something like that. 67 00:04:13,560 --> 00:04:16,100 Then we had a list item. 68 00:04:16,230 --> 00:04:22,350 Your files are getting more and more clogged and eventually as you're passing in more data and all kinds 69 00:04:22,350 --> 00:04:23,830 of other information. 70 00:04:23,920 --> 00:04:26,250 This is not going to be very useful. 71 00:04:26,310 --> 00:04:30,610 The fact that you just have one massive file is going to be hard for debugging. 72 00:04:30,610 --> 00:04:35,520 It's gonna be hard for your structure and overall this is gonna be really annoying. 73 00:04:35,520 --> 00:04:40,620 So there is something called the imports and exports we're working with modules and you can think of 74 00:04:40,620 --> 00:04:47,290 modules as a way of basically having a separate file of having some kind of separate information. 75 00:04:47,660 --> 00:04:52,860 So first of all let me make some comments on the top which by the way I think you're going to find useful 76 00:04:53,250 --> 00:04:55,290 and we have two types of import. 77 00:04:55,290 --> 00:05:01,210 There's going to be named imports as well as we're going to have the default import or you can also 78 00:05:01,210 --> 00:05:10,760 write with exports is gonna be the same thing name and default import forward slash and export. 79 00:05:10,770 --> 00:05:11,070 Okay. 80 00:05:11,140 --> 00:05:16,810 So that would be the major thing that there's gonna be two types and then also gonna have the fact that 81 00:05:16,900 --> 00:05:23,260 only one default export per module per module. 82 00:05:23,260 --> 00:05:29,770 And again you can think of modules as a separate files where you're going to have all kinds of information 83 00:05:30,100 --> 00:05:32,250 that you just want to share some of it. 84 00:05:32,470 --> 00:05:37,870 Let's say you have your module now there's gonna be some functions some data some components whatever 85 00:05:38,230 --> 00:05:41,110 and you'll gonna pick what are you going to be sharing. 86 00:05:41,140 --> 00:05:49,300 So let me write this thing off module as a file as a file or something like this. 87 00:05:49,300 --> 00:05:51,520 Now how we're gonna start working with this. 88 00:05:52,030 --> 00:05:54,490 Well we have the source folder correct. 89 00:05:54,490 --> 00:05:56,780 Within the service folder we have the APS assess. 90 00:05:56,790 --> 00:05:58,360 Then we have the jazz. 91 00:05:58,420 --> 00:06:03,230 So why don't we create a new file and see how the imports and exports support. 92 00:06:03,340 --> 00:06:06,800 I'm just gonna go with simple file I'm gonna call this data yes. 93 00:06:06,990 --> 00:06:12,040 And please understand that we're not going to be covering everything that has to do with imports and 94 00:06:12,040 --> 00:06:13,000 exports. 95 00:06:13,000 --> 00:06:16,810 There are some few other things like aliases and stuff like that. 96 00:06:16,900 --> 00:06:22,300 And for me I think that it's more important that you understand the general basics and everything that 97 00:06:22,300 --> 00:06:23,890 we're going to be using in the course. 98 00:06:23,890 --> 00:06:29,440 And if you're interested or if you see let's say some other syntax or something like that you can always 99 00:06:29,440 --> 00:06:32,270 swing back and you can do a little bit more research. 100 00:06:32,380 --> 00:06:39,060 So let's say I have my data J.S. file in this data J File I'm just gonna start creating some variables 101 00:06:39,090 --> 00:06:43,660 and then second name is gonna be equal to let's say John. 102 00:06:43,670 --> 00:06:48,160 Then the the age of John is gonna be let's say twenty seven. 103 00:06:48,680 --> 00:06:55,580 So let's say concert and then age is gonna be let's say twenty seven then whereas here while we can 104 00:06:55,580 --> 00:07:02,300 also create maybe some kind of persons I mean it's a concert Khan's person and then within the person 105 00:07:02,300 --> 00:07:08,250 object I'm gonna have insert the name as a key value pair so name is gonna be Peter. 106 00:07:08,480 --> 00:07:13,940 And then we're gonna be looking obviously for the comma because this would be a proper syntax for name 107 00:07:14,210 --> 00:07:17,800 of Peter we're going to have twenty five so far so good. 108 00:07:17,810 --> 00:07:24,860 Y also we don't create some kind of local variable that's gonna serve a purpose of showing you what 109 00:07:24,860 --> 00:07:27,530 happens if you don't want to share some kind of information. 110 00:07:27,590 --> 00:07:30,530 So let's say a local secret or you know what. 111 00:07:30,530 --> 00:07:37,040 Let's not do local let's do Secret value let's just call it secret. 112 00:07:37,040 --> 00:07:43,670 So what I would need to do right now if I would want to use this information in my app let's say I can 113 00:07:44,120 --> 00:07:45,690 use it anywhere I want. 114 00:07:45,770 --> 00:07:50,780 Please understand that just because we're gonna be using the app J.S. as our example doesn't mean that 115 00:07:50,780 --> 00:07:52,700 we can only use it with app J. 116 00:07:52,870 --> 00:07:55,610 This isn't gonna work all throughout our application. 117 00:07:55,610 --> 00:08:01,610 So let's say I'm interested in name age and person but I don't want to use this secret ballot. 118 00:08:01,610 --> 00:08:05,680 So what we can do is something called named import and export. 119 00:08:05,690 --> 00:08:12,020 So in this case what would happen is I would need to add export keyword here right in front of whatever 120 00:08:12,020 --> 00:08:14,330 my data structure that I have my case. 121 00:08:14,340 --> 00:08:19,160 This is just gonna be simple variable but in this case I'm going to say export and then I'm going to 122 00:08:19,160 --> 00:08:23,690 copy and paste it as well right here as well right here. 123 00:08:23,690 --> 00:08:28,460 But secrets value I'm going to leave it off here and then you're going to obviously see that we're not 124 00:08:28,460 --> 00:08:29,500 gonna be able to access it. 125 00:08:30,080 --> 00:08:34,390 So let's imagine this would be some kind of secret value that we're just using in the data. 126 00:08:34,390 --> 00:08:35,010 Yes. 127 00:08:35,210 --> 00:08:40,880 In order to use this we the name the imports that we have right now named the import export. 128 00:08:40,880 --> 00:08:45,860 And by the way if I just say one import named or something like that please understand that that means 129 00:08:45,860 --> 00:08:51,690 both of them was our name imports or exports or just names import it will work exactly the same. 130 00:08:52,190 --> 00:08:58,190 So let's say right after the importing from react I'm gonna write import and then I'm gonna be looking 131 00:08:58,190 --> 00:09:06,480 for my values since these values are right now named meaning I would specifically need to choose them. 132 00:09:06,620 --> 00:09:10,010 This index would be like this where I have the curly braces. 133 00:09:10,010 --> 00:09:12,770 Then I need to go for exactly the same names. 134 00:09:12,830 --> 00:09:15,950 And this is important with a default value. 135 00:09:15,950 --> 00:09:21,770 This is going to be a little bit different but with a named export you need to make sure that they actually 136 00:09:21,770 --> 00:09:22,790 in that match. 137 00:09:22,970 --> 00:09:29,130 In this case I'm going to say name age and person and now I'm gonna be looking where from. 138 00:09:29,150 --> 00:09:35,030 And in this case we are using something called the relative path where if this is gonna be in a same 139 00:09:35,030 --> 00:09:38,340 folder then I just say dot and then forwards. 140 00:09:38,510 --> 00:09:44,900 And now this gives me right away suggestion do you want this from the app test data and index or service 141 00:09:44,900 --> 00:09:46,100 worker of course. 142 00:09:46,100 --> 00:09:48,490 And in our case obviously we're looking for the data. 143 00:09:48,560 --> 00:09:54,020 And like I said the difference would be between the CFS files that you would need extensions as well 144 00:09:54,020 --> 00:09:57,660 as the same is gonna work with images you're going to need to have the file extension. 145 00:09:57,890 --> 00:10:00,690 However with a JavaScript files you don't need it. 146 00:10:01,130 --> 00:10:03,330 So you're just gonna have data on that. 147 00:10:03,710 --> 00:10:07,210 So now in this case we can just say at the moment nothing is happening. 148 00:10:07,430 --> 00:10:09,770 But these are the variables that we can use. 149 00:10:09,770 --> 00:10:11,140 So why don't we test now. 150 00:10:11,240 --> 00:10:12,120 Why don't we set it. 151 00:10:12,200 --> 00:10:17,250 There's going to be more paragraph and then in each of the paragraphs on the right name. 152 00:10:17,290 --> 00:10:20,520 And then let me cut and paste it and let's type age. 153 00:10:20,560 --> 00:10:24,990 So first of all we're going to see as everything's working I have John and you have twenty seven. 154 00:10:25,080 --> 00:10:30,530 Now let me show you what happens if you're going to be trying to render the object which will gonna 155 00:10:30,550 --> 00:10:34,590 happen actually in some cases at least as you're working with the react. 156 00:10:34,600 --> 00:10:40,890 I think especially in the beginning where you might see this example or meaning error that is going 157 00:10:40,890 --> 00:10:41,830 to spit you back. 158 00:10:41,830 --> 00:10:43,930 So let's see what happens with an object. 159 00:10:43,930 --> 00:10:48,610 And for this I would like to open the console you can also open up the integrated terminal is going 160 00:10:48,610 --> 00:10:52,870 to do the same thing and let's say I'm not going to be looking for elements I'm going to be looking 161 00:10:52,870 --> 00:10:59,680 for the console and at the moment it just says OK so person is not used and the secret value is assigned. 162 00:10:59,710 --> 00:11:02,080 But again we're not using and that's fine. 163 00:11:02,080 --> 00:11:07,990 We can live already with these warnings because we understand that this is not going to break our application. 164 00:11:07,990 --> 00:11:12,720 However something that will gonna break our application he is going to be something like this. 165 00:11:12,790 --> 00:11:14,620 So we already know that. 166 00:11:14,620 --> 00:11:20,930 OK we have named imports and exports and I can just access these values all over my application. 167 00:11:21,020 --> 00:11:26,480 However with an object please be careful won't I'm going to say I've noticed what happened. 168 00:11:26,680 --> 00:11:32,920 So I have a big fat error and the reason for that because we cannot do this because we cannot render 169 00:11:32,920 --> 00:11:33,800 objects like that. 170 00:11:34,180 --> 00:11:38,360 Obviously if you want to render keys from the object we are allowed to do that. 171 00:11:38,440 --> 00:11:41,070 So let's say in this case I'm going to have two options. 172 00:11:41,110 --> 00:11:43,780 Age Your name is this is what is in my hand. 173 00:11:44,170 --> 00:11:48,130 So in this case once I'm gonna render everything's gonna be fine and I'm going to be looking for the 174 00:11:48,130 --> 00:11:49,060 Peter. 175 00:11:49,130 --> 00:11:56,410 Also understand that I'm just using right now the variables and the object we can use the arrays which 176 00:11:56,410 --> 00:12:01,750 by the way we're going to do throughout our tutorials and projects as well as we can use functions we 177 00:12:01,750 --> 00:12:07,160 can use utilities we can set up C assess and I can go on and on and on and on. 178 00:12:07,360 --> 00:12:13,480 The main purpose of this video is for you to understand and you can share the information throughout 179 00:12:13,480 --> 00:12:16,270 your application using the export and import. 180 00:12:16,420 --> 00:12:23,110 And this gives you a structure where you can separate your concerns let's say in one file or folder 181 00:12:23,110 --> 00:12:27,100 you're going to keep some kind of information then in the other one you're going to keep some other 182 00:12:27,100 --> 00:12:28,450 type of information. 183 00:12:28,450 --> 00:12:30,240 So let's say you need debugging. 184 00:12:30,310 --> 00:12:35,020 This is gonna help you where you're like OK you know what I need to run back to the data I don't have 185 00:12:35,020 --> 00:12:38,500 to run to the app J.S. where the whole information is right here. 186 00:12:38,710 --> 00:12:39,830 So good luck finding it. 187 00:12:40,150 --> 00:12:45,790 So this really saves you a lot of time and a lot of energy especially if you put your mind to it as 188 00:12:45,790 --> 00:12:47,350 you're structuring your application. 189 00:12:47,650 --> 00:12:54,580 However notice since this is not shared the sacred value we are not accessing here even though type 190 00:12:54,580 --> 00:12:58,960 here secret value secret value nothing. 191 00:12:59,230 --> 00:13:02,780 I can try to use it but I'm gonna get undefined. 192 00:13:02,890 --> 00:13:04,260 So let me copy and paste it. 193 00:13:04,270 --> 00:13:08,210 I'm not going to be looking for a person let's say secret value. 194 00:13:08,350 --> 00:13:11,330 Hopefully you can see that the name is exactly the same. 195 00:13:11,350 --> 00:13:14,080 However it's saying Well the secret value is not exported. 196 00:13:14,080 --> 00:13:16,110 Buddy what are you looking for. 197 00:13:16,120 --> 00:13:17,240 Well that is important. 198 00:13:17,290 --> 00:13:22,300 You only are accessing whatever you are exporting not everything that is in the file. 199 00:13:22,750 --> 00:13:26,480 However we also have another option how we can do this. 200 00:13:26,560 --> 00:13:28,510 So let me first come on this out. 201 00:13:28,870 --> 00:13:34,860 So let's say something like this and let me show you right away some other ways how we can do this. 202 00:13:34,900 --> 00:13:37,160 And by the way let me get rid of the secret value. 203 00:13:37,510 --> 00:13:40,070 Maybe this is just gonna throw you off a little bit. 204 00:13:40,120 --> 00:13:41,680 So that would be one way. 205 00:13:41,680 --> 00:13:47,560 And in order to work with our next example what I'm gonna do is I'm just gonna copy and paste it and 206 00:13:47,560 --> 00:13:48,690 I'm going to comment this out. 207 00:13:48,730 --> 00:13:52,620 Again this is just gonna be for your future reference so you understand that. 208 00:13:52,630 --> 00:13:54,500 Let's say if you're doing it this way. 209 00:13:54,640 --> 00:13:59,230 This is how you accessing the values but I'm gonna show you another way how you can import. 210 00:13:59,740 --> 00:14:01,540 And that would be using import. 211 00:14:01,600 --> 00:14:08,500 And then we have this wild character of Asterix as this would mean everything that's being exported. 212 00:14:08,590 --> 00:14:10,630 And here we can give it an alias. 213 00:14:10,630 --> 00:14:17,160 So in this case if I could just say data and again I can name this orange it doesn't really matter. 214 00:14:17,170 --> 00:14:21,280 You're probably already sick of me saying that but anyway this is how it's going to work. 215 00:14:21,280 --> 00:14:27,220 So we are exporting everything that is being exported or I'm sorry importing everything that's being 216 00:14:27,220 --> 00:14:31,300 exported as data and then we'll again looking from where. 217 00:14:31,300 --> 00:14:35,050 So here I'm going to say from when we have dot org slash. 218 00:14:35,080 --> 00:14:37,200 And then again the thing is going to be data. 219 00:14:37,630 --> 00:14:40,570 However the difference here is going to be very simple. 220 00:14:40,570 --> 00:14:46,700 If I'm gonna say notice I have age person and all of them are not defined. 221 00:14:46,720 --> 00:14:51,340 Now the reason for that is first of all it's going to be two reasons because I copy and paste in actually 222 00:14:51,340 --> 00:14:52,120 two times. 223 00:14:52,270 --> 00:14:53,350 That's not what I want. 224 00:14:53,540 --> 00:14:54,770 My apologies. 225 00:14:54,790 --> 00:14:58,070 So let me first deleted but the same result is gonna be here. 226 00:14:58,330 --> 00:15:03,110 And the reason for that result is that we are importing here everything has data. 227 00:15:03,520 --> 00:15:08,710 So in order to access it this is gonna be exactly the same how we work with an object where we have 228 00:15:08,710 --> 00:15:17,870 data dot then we have data that age and we have also data the heart and you obviously hopefully understand 229 00:15:17,870 --> 00:15:22,790 what's happening that everything we can access here with this variable that we had. 230 00:15:22,880 --> 00:15:28,490 So if you did name this orange then obviously you're going to be axis head here as well as being an 231 00:15:28,490 --> 00:15:29,080 orange. 232 00:15:29,180 --> 00:15:30,970 So that would be something that I would want to show. 233 00:15:31,310 --> 00:15:33,390 I also want to show you one more thing. 234 00:15:33,500 --> 00:15:37,470 So let me again comment this out just so you can see that this would be an option. 235 00:15:37,520 --> 00:15:42,210 And again I'm leaving this purposely for your reference so you understand how this will work. 236 00:15:42,320 --> 00:15:48,020 And I know there's kind of a bunch of comments but I find it a little bit useful than me just deleting 237 00:15:48,020 --> 00:15:53,600 it because I think that way at least you can go back and you'll be like OK so this is how it works with 238 00:15:53,930 --> 00:15:55,860 as we're importing everything. 239 00:15:56,030 --> 00:16:00,140 And this would work as we were having just selective imports. 240 00:16:00,260 --> 00:16:02,660 And in this case let me again come on this out. 241 00:16:02,660 --> 00:16:06,090 So I'm going to say it like this and knowledge change something in the data. 242 00:16:06,260 --> 00:16:09,500 So we're not limited to having this kind of syntax. 243 00:16:09,560 --> 00:16:12,780 So in this case again let me copy and paste it. 244 00:16:12,890 --> 00:16:16,100 So I'm going to say all these four values are gonna be exactly the same. 245 00:16:16,160 --> 00:16:22,010 How are we gonna change around a little bit as well as I'm gonna still comment out for your future reference. 246 00:16:22,430 --> 00:16:25,080 And now let me delete all these exports. 247 00:16:25,110 --> 00:16:26,600 Let's say something like this. 248 00:16:26,600 --> 00:16:31,250 So there's gonna be cases where you're going to see something like this which by the way again does 249 00:16:31,250 --> 00:16:32,580 exactly the same thing. 250 00:16:32,750 --> 00:16:38,210 That is the reason why I come in this house just so you see that it would works in a similar fashion 251 00:16:38,690 --> 00:16:43,910 where I can just say export then the syntax would be curly braces. 252 00:16:44,270 --> 00:16:46,760 And then we can just name whatever we're exporting. 253 00:16:46,760 --> 00:16:49,650 Name age person. 254 00:16:49,710 --> 00:16:54,490 And sure enough nothing breaks because everything works exactly the same way. 255 00:16:54,980 --> 00:17:01,130 So you can either do it this way where you're exporting one by one or you can do something like this. 256 00:17:01,290 --> 00:17:02,910 That would be named the imports. 257 00:17:02,910 --> 00:17:04,430 Again there's a little bit more to it. 258 00:17:04,460 --> 00:17:10,070 You can do some aliases right here and all that but I really don't want to clog your head because in 259 00:17:10,070 --> 00:17:17,080 most cases we again we're gonna be using either a simple name next ports as well as simple default export. 260 00:17:17,120 --> 00:17:20,100 So for me you probably wouldn't worry about it too much. 261 00:17:20,360 --> 00:17:25,400 As long as you understand that everything that we're gonna be naming obviously is gonna be imported 262 00:17:25,400 --> 00:17:25,970 and exported. 263 00:17:26,330 --> 00:17:29,630 So in this case we could have add the secret value if we wanted. 264 00:17:29,660 --> 00:17:35,450 We wouldn't be limited in that power here of course this wouldn't work in general because we explicitly 265 00:17:35,450 --> 00:17:38,900 need to use the export that does just would be a side note. 266 00:17:39,250 --> 00:17:39,490 Okay. 267 00:17:39,500 --> 00:17:40,640 What else we have. 268 00:17:40,640 --> 00:17:44,120 Why don't we have a look at a default export. 269 00:17:44,210 --> 00:17:50,540 How it would work as well as why don't I throw you a little mine grenade and we set up a new folder 270 00:17:51,050 --> 00:17:56,630 so within the source I'm going to say there's going to be new folder and I'm gonna call this components 271 00:17:57,410 --> 00:18:01,760 components and within the components let me create another folder. 272 00:18:01,850 --> 00:18:05,270 I didn't have to technically do it but let's just do it anyway. 273 00:18:05,270 --> 00:18:06,660 We're going to have another folder. 274 00:18:06,860 --> 00:18:13,910 Well we're gonna have I don't know header header and in this case within the header let's create another 275 00:18:14,180 --> 00:18:20,600 file in this case but this is gonna be a component and a common practice would be naming or components 276 00:18:20,600 --> 00:18:27,040 with capital letter so in this case I'm going to say banner J is what I would want in a batter. 277 00:18:27,070 --> 00:18:33,940 Well I could create our typical component that we have been creating the functional state component 278 00:18:34,240 --> 00:18:36,320 by again typing everything out. 279 00:18:36,370 --> 00:18:38,950 Import react yada yada yada. 280 00:18:39,250 --> 00:18:46,700 However now I'd like to show you the neat and awesome extension which would be this guy. 281 00:18:46,750 --> 00:18:48,160 This would be the react snippet. 282 00:18:48,670 --> 00:18:55,360 And at this point as you're looking at the documentation you should already start understanding what's 283 00:18:55,360 --> 00:19:01,240 happening because of course we haven't covered everything but we already have covered enough things 284 00:19:01,240 --> 00:19:07,600 so you can start being like okay I kind of understand at least the general idea here and the idea is 285 00:19:07,600 --> 00:19:08,580 very simple. 286 00:19:08,800 --> 00:19:14,530 The idea is that I can let's say if I want components at the moment don't look at this class component 287 00:19:15,030 --> 00:19:17,020 we all gonna cover it very shortly. 288 00:19:17,060 --> 00:19:24,320 Core as you're looking at a r FC which by the way let me just scroll down a little bit. 289 00:19:24,400 --> 00:19:29,020 This is gonna be a bunch of them but as you're looking at this guy what do you see. 290 00:19:29,020 --> 00:19:32,940 So there is an import from react not caring so far so good. 291 00:19:33,100 --> 00:19:38,050 And then we have this export default which we're gonna talk about literally in a second and then you 292 00:19:38,050 --> 00:19:39,280 have your function. 293 00:19:39,280 --> 00:19:44,980 So what's happening is instead of every time running back to your keyboard an import from react and 294 00:19:44,980 --> 00:19:50,910 do all of this and that what we can do is we can just type our FC and we're good to go and that's it. 295 00:19:50,940 --> 00:19:52,260 That's all we have to do. 296 00:19:52,270 --> 00:19:53,770 Let me show you how this is gonna work. 297 00:19:53,770 --> 00:19:57,910 And by the way this is again going to work the same with class based components which we're going to 298 00:19:57,910 --> 00:20:03,740 cover again in the following videos but the only thing I need to do is do this. 299 00:20:03,950 --> 00:20:05,710 Our FC that's it. 300 00:20:06,070 --> 00:20:07,390 I have my function. 301 00:20:07,510 --> 00:20:10,470 The name is gonna match by the way right away the file name. 302 00:20:10,750 --> 00:20:14,470 I have my imports I have this setup as a default. 303 00:20:14,470 --> 00:20:21,420 So in this second we're exactly gonna talk about it and let's write something here and let's say hello. 304 00:20:21,580 --> 00:20:22,030 Or you know what. 305 00:20:22,030 --> 00:20:24,400 Let's do having one this is gonna stand out. 306 00:20:24,480 --> 00:20:27,270 Love from Dan or my friends. 307 00:20:27,350 --> 00:20:28,100 I'm gonna save it. 308 00:20:28,840 --> 00:20:29,620 So far so good. 309 00:20:29,620 --> 00:20:30,580 Everything is working fine. 310 00:20:30,580 --> 00:20:31,600 I can just close this. 311 00:20:31,600 --> 00:20:38,000 I don't need that and then I'm gonna swing back again to the app and I would like to import this. 312 00:20:38,200 --> 00:20:40,840 However with default there's two things. 313 00:20:40,870 --> 00:20:48,130 First of all there can be only one default export from the module or from the file as well as with the 314 00:20:48,130 --> 00:20:48,890 default one. 315 00:20:49,330 --> 00:20:56,560 I can rename this whatever I want in the sense that if I'm gonna head over back to imports and I'm just 316 00:20:56,560 --> 00:21:03,040 gonna like to do it here in the app yes and if I'm gonna say import if I'm gonna write or change and 317 00:21:03,040 --> 00:21:06,670 then I'm going to be looking for the file I just need to use this variable. 318 00:21:06,670 --> 00:21:11,470 Common sense obviously would be naming this exactly what you were exporting. 319 00:21:11,530 --> 00:21:16,360 So if you're exporting as a banner even though you're exporting this as a default. 320 00:21:16,360 --> 00:21:21,970 Now let me show you what happens in the next year as you see that in the app we're also doing the same 321 00:21:21,970 --> 00:21:28,890 thing we're saying export default and then we're saying what we are exporting we're not naming it here. 322 00:21:28,900 --> 00:21:31,180 We're just saying okay I would like to export this app. 323 00:21:31,630 --> 00:21:34,540 However in the index J.S. This is where we importing. 324 00:21:34,780 --> 00:21:39,460 And by the way as you're looking at it you can see that a lot of things that we did in the previous 325 00:21:39,460 --> 00:21:41,070 video are exactly the same. 326 00:21:41,140 --> 00:21:45,940 There's few more additions like in next year says there's the service worker and that we don't care 327 00:21:45,940 --> 00:21:48,490 about but we have react react Damn. 328 00:21:48,600 --> 00:21:51,170 Then we are rendering what we rendering is there. 329 00:21:51,610 --> 00:21:55,450 Now we are getting the app from the default export. 330 00:21:55,450 --> 00:21:58,510 And in this case we are importing this and we're naming this app. 331 00:21:58,900 --> 00:22:05,340 However like I said I could have named this orange and also named this guy orange. 332 00:22:05,350 --> 00:22:09,620 Now this is important they do need to match but the moment I say with nothing happened. 333 00:22:09,700 --> 00:22:11,290 So my application doesn't break. 334 00:22:11,290 --> 00:22:14,920 And the reason is very simple because this is default export. 335 00:22:14,920 --> 00:22:21,190 However again the common practice would be naming at least similar to what you are exporting. 336 00:22:21,190 --> 00:22:28,740 So unless you are again a true rebel I would suggest at least staying with like a common practice. 337 00:22:28,750 --> 00:22:30,400 So let me finish here with an app. 338 00:22:30,430 --> 00:22:30,980 Yes. 339 00:22:31,060 --> 00:22:35,800 So like I said I could name this orange but why don't we stick to everything and I need to say banner 340 00:22:36,220 --> 00:22:37,760 and the difference you see or hear. 341 00:22:37,870 --> 00:22:42,070 So with the named export import I needed to name them. 342 00:22:42,160 --> 00:22:45,670 In this case I'm picking and choosing my value right now. 343 00:22:45,670 --> 00:22:48,440 So here I'm gonna be looking again for the banner. 344 00:22:48,460 --> 00:22:51,950 However the difference is again the banner is gonna be kind of nested right. 345 00:22:52,390 --> 00:22:54,460 Because we had the component the header. 346 00:22:54,460 --> 00:22:55,780 So why don't we start looking for it. 347 00:22:56,260 --> 00:22:59,210 And again the way we look for it is very similar. 348 00:22:59,290 --> 00:23:03,500 So we have here that then we're gonna be having the forward slash. 349 00:23:03,670 --> 00:23:08,310 Then I'm going to be looking for the component then I'm going to be looking for the header because obviously 350 00:23:08,320 --> 00:23:09,650 that is my folder structure. 351 00:23:09,880 --> 00:23:13,220 And then within the header we all gonna have our banner. 352 00:23:13,300 --> 00:23:15,370 So all this long line. 353 00:23:15,370 --> 00:23:16,830 And now finally we have the matter. 354 00:23:17,200 --> 00:23:22,910 So why don't we head over to our section that is being rendered and we'll just banner. 355 00:23:23,110 --> 00:23:28,960 And in this case what we're having is right away the Boehner and what else I would like to show you. 356 00:23:28,990 --> 00:23:30,430 I think that in the banner. 357 00:23:30,430 --> 00:23:33,530 Why don't we try it out to get again the data. 358 00:23:33,550 --> 00:23:37,480 Remember we could access also the data from the banner. 359 00:23:37,480 --> 00:23:43,480 It's not much just have J.S. Hauer in this case again the importing the past there's gonna be a little 360 00:23:43,480 --> 00:23:49,840 bit different because now we're looking from this file and we're looking all the way to the data which 361 00:23:49,840 --> 00:23:51,910 is technically right next to the object. 362 00:23:52,360 --> 00:23:53,240 So how we're gonna do that. 363 00:23:53,410 --> 00:23:59,220 Well first of all we I think are doing the not default but we are doing the name export. 364 00:23:59,260 --> 00:24:02,080 So in this case why don't we do import then in this case. 365 00:24:02,140 --> 00:24:03,540 I'm just going to be looking for a name. 366 00:24:03,570 --> 00:24:05,580 Is gonna work exactly the same with the rest of them. 367 00:24:05,980 --> 00:24:10,420 But the main purpose here is to show you the path so the path would work like this. 368 00:24:10,420 --> 00:24:13,410 So we have from then we have what. 369 00:24:13,420 --> 00:24:16,170 Well now in this case this is not going to be the same folder. 370 00:24:16,180 --> 00:24:17,920 So now we have to use to that. 371 00:24:17,920 --> 00:24:22,280 So this was the reasoning where I'm showing you how we would do this from this folder. 372 00:24:22,280 --> 00:24:27,310 So now we're looking in the header but obviously we already know that this is not going to mean header. 373 00:24:27,310 --> 00:24:31,480 So we can delete this and we need to say no you need to go one folder. 374 00:24:31,870 --> 00:24:37,180 So in this case where this is gonna be all that is gonna be already in the components now within the 375 00:24:37,180 --> 00:24:37,870 components. 376 00:24:37,870 --> 00:24:39,230 Then we have the data. 377 00:24:39,250 --> 00:24:43,190 So basically what happens is that I am not going to be looking in the same folder. 378 00:24:43,210 --> 00:24:48,450 This is not gonna be in header as well as this is not going to be in the component. 379 00:24:48,460 --> 00:24:52,630 This is gonna be in fact in source so that way you're doing this. 380 00:24:52,630 --> 00:24:58,030 Dot dot then you're leaving the folder again dot dot then you're leaving the folder. 381 00:24:58,030 --> 00:25:03,210 And then finally you reach the point eventually obviously where you're getting to the data. 382 00:25:03,220 --> 00:25:05,670 So in this case let me just test it out. 383 00:25:05,740 --> 00:25:07,720 I'm gonna say that I'm going to be looking for the name. 384 00:25:08,080 --> 00:25:09,400 So hello from banner. 385 00:25:09,460 --> 00:25:10,830 And then I have a John. 386 00:25:10,900 --> 00:25:12,660 So I know that everything is working out. 387 00:25:13,180 --> 00:25:21,700 So again in short named and default export then there's gonna be only one default export in most cases 388 00:25:21,700 --> 00:25:26,720 this is what's gonna happen you're just gonna create a component and the R FC. 389 00:25:26,810 --> 00:25:28,980 So let me give you this suggestion. 390 00:25:29,020 --> 00:25:34,090 So our FC is gonna be functional based component class based component is gonna be our C in which we 391 00:25:34,090 --> 00:25:39,670 will going to cover a little bit later and then the right away syntax is gonna be something like this 392 00:25:40,060 --> 00:25:44,110 but we can also rewrite this of course and the syntax wouldn't be for long. 393 00:25:44,140 --> 00:25:46,810 Let me again do the same thing like we did before. 394 00:25:46,900 --> 00:25:48,050 Let's come on this. 395 00:25:48,050 --> 00:25:49,560 So that would be one option. 396 00:25:49,630 --> 00:25:53,080 Not gonna be default one that the snippet is gonna give you. 397 00:25:53,110 --> 00:25:59,470 However we could have written this also like this or we have the function of course and then we're looking 398 00:25:59,470 --> 00:26:04,410 for a name let's say banner and we could have copy and pasted but a little bit of typing is not going 399 00:26:04,410 --> 00:26:05,230 to hurt us. 400 00:26:05,320 --> 00:26:10,540 And then in this case we're gonna do the same thing like it is in an app where we have default and then 401 00:26:10,540 --> 00:26:11,500 we're looking for the banner. 402 00:26:11,510 --> 00:26:15,330 So what I'm saying is I'm gonna be exporting this as a default. 403 00:26:15,500 --> 00:26:17,960 And the name of my export is gonna be banner. 404 00:26:18,220 --> 00:26:19,960 So let me copy and paste it here. 405 00:26:20,010 --> 00:26:25,760 I'm going to come in this out and that should do exactly the same thing where I don't have these errors. 406 00:26:25,810 --> 00:26:32,980 So in short this would be exports and imports as well as our snippets extension in our ReACT application.