1 00:00:00,180 --> 00:00:01,030 Not bad, not bad. 2 00:00:01,130 --> 00:00:10,200 We now know how we can add access to our reactor project, but in a previous video, I mentioned that 3 00:00:10,200 --> 00:00:16,480 in order to access Joske world in Gentex, we need to add these CURLEE pressures. 4 00:00:16,980 --> 00:00:19,110 So let me expand on that. 5 00:00:19,560 --> 00:00:26,060 So essentially, we're going to take a look at the other options we have as far as adding JavaScript 6 00:00:26,310 --> 00:00:28,200 directly and our. 7 00:00:29,250 --> 00:00:34,500 Now, before we do anything, though, I would want to do a little bit of spring cleanup. 8 00:00:35,600 --> 00:00:42,290 Just because I'm looking at the file and I think it's getting quite busy now at this point, I will 9 00:00:42,290 --> 00:00:51,170 switch from these three separate components to one component component and then I'll add all my return 10 00:00:51,170 --> 00:00:51,650 in there. 11 00:00:51,910 --> 00:00:53,570 Again, that is up to you. 12 00:00:53,570 --> 00:00:56,930 If you want to keep everything a separate component, you can definitely do it. 13 00:00:57,230 --> 00:01:01,070 My goal was to showcase that no one is stopping you. 14 00:01:01,400 --> 00:01:06,800 But in general, my preference is not to go to crazy as far as splitting up. 15 00:01:07,070 --> 00:01:12,860 So in here, the only thing that I would want is where I have all the returns, so I'll just place them 16 00:01:12,860 --> 00:01:13,080 here. 17 00:01:13,250 --> 00:01:17,330 So for example, in this book article, I'm going to have the image. 18 00:01:17,750 --> 00:01:25,250 I'm going to have my having one and also add a little bit more things in here now and here. 19 00:01:25,250 --> 00:01:28,520 Of course, I stood side by side, so right away I have the error. 20 00:01:28,850 --> 00:01:32,990 And that as far as the styling, that's not usually my preference. 21 00:01:33,320 --> 00:01:35,700 So I'll just remove it altogether. 22 00:01:36,050 --> 00:01:37,430 So almost all. 23 00:01:37,650 --> 00:01:42,040 Please keep in mind, you always have reference to the files we have been working on. 24 00:01:42,410 --> 00:01:48,670 So here are right after 30 heading for or having one, I'll place my heading for our move. 25 00:01:48,680 --> 00:01:53,690 All my components that I have will save. 26 00:01:53,930 --> 00:01:59,080 And then, of course, I'm going to go back to the seats that are added in the previous video, certainly 27 00:01:59,130 --> 00:01:59,270 here. 28 00:01:59,300 --> 00:02:07,430 Of course, we would just need to change it where if I remember correctly, the color that I had was 29 00:02:07,430 --> 00:02:08,180 a hashtag. 30 00:02:08,930 --> 00:02:17,750 So let me go back hashtag and six one seven and D nine eight, then letter spacing. 31 00:02:17,750 --> 00:02:18,980 I'm not going to add that. 32 00:02:19,280 --> 00:02:26,900 And by the way, I messed that up here, so it's not f it is six and then one else font size I guess 33 00:02:26,900 --> 00:02:27,410 was different. 34 00:02:27,410 --> 00:02:27,740 Right. 35 00:02:27,770 --> 00:02:34,220 So font size and we're looking for zero point twenty five arms. 36 00:02:34,970 --> 00:02:42,030 And also we'll add a little bit of margin to the top margin top and we go with zero point twenty five 37 00:02:42,040 --> 00:02:42,530 Orian's. 38 00:02:42,690 --> 00:02:43,110 That's it. 39 00:02:43,550 --> 00:02:46,120 Now of course, we set everything up correctly. 40 00:02:46,550 --> 00:02:48,280 So back and in next year. 41 00:02:48,740 --> 00:02:55,490 Now let's take a look at what else can we do as far as the Joska, because in a previous video, we 42 00:02:55,850 --> 00:02:59,390 had a look of how we can add a success. 43 00:02:59,870 --> 00:03:06,590 But of course, we can do way more than that again in order to go back to a JavaScript world. 44 00:03:06,830 --> 00:03:10,910 Why do we need to do is to have curly braces. 45 00:03:11,190 --> 00:03:16,380 So now I would want to replace this one with some kind of variable value. 46 00:03:16,880 --> 00:03:20,810 Now, I'm going to start here where I'm going to say const and title. 47 00:03:21,910 --> 00:03:28,660 And that is going to be equal to whatever text I have, so I love you to the moon and back. 48 00:03:29,050 --> 00:03:32,740 Of course, I'll set this up as a string, so copy and paste. 49 00:03:33,160 --> 00:03:39,940 And in here, once I go back to the Joska world, how do I access the variables JavaScript? 50 00:03:40,150 --> 00:03:42,610 And simply I just write a title. 51 00:03:42,610 --> 00:03:45,490 Correct, because that is the name of my variable. 52 00:03:45,970 --> 00:03:52,150 So now, of course, I'm not hard coding this anymore because in here this is sitting in a variable. 53 00:03:52,660 --> 00:03:59,740 And if I'll just start adding essays here, of course, you can see that this value also. 54 00:03:59,830 --> 00:04:00,240 Right. 55 00:04:00,250 --> 00:04:00,910 Or what changes. 56 00:04:01,420 --> 00:04:05,050 And if you want, of course, we can keep this outside as well. 57 00:04:05,440 --> 00:04:09,460 Now, are you always going to keep the variables inside the function or outside? 58 00:04:09,670 --> 00:04:10,600 Well, that depends. 59 00:04:10,630 --> 00:04:14,030 A lot of times you'll be getting this is something we haven't covered yet. 60 00:04:14,320 --> 00:04:15,870 So it really depends. 61 00:04:15,880 --> 00:04:22,130 I'm just showing you the options where you can store those variables for this particular example. 62 00:04:22,540 --> 00:04:26,890 And then if I would want to have the author, I'm going to create another one. 63 00:04:27,820 --> 00:04:33,850 So there's going to be a variable outside this time, just so you can see that it will still work. 64 00:04:34,300 --> 00:04:42,310 So let me grab this value and then, of course, I'm going to have my author like so now wonderful about 65 00:04:42,310 --> 00:04:48,540 setting up JavaScript here in the U.S. that it must return a value. 66 00:04:48,700 --> 00:04:50,490 So it has to be an expression. 67 00:04:50,500 --> 00:04:57,260 It cannot be a statement saying here, let's create a paragraph and let's just start that out. 68 00:04:57,370 --> 00:05:01,870 So we have here a JavaScript, but I'm going to write a statement. 69 00:05:02,260 --> 00:05:05,810 So say let X is equal to your six. 70 00:05:06,080 --> 00:05:12,510 Now, the moment I'll say it, I will have a big fat error where it's going to point to it. 71 00:05:12,820 --> 00:05:17,920 So essentially, we always need to pass something here that returns the value. 72 00:05:18,160 --> 00:05:19,690 So now let me comment this out. 73 00:05:19,930 --> 00:05:26,920 By the way, the way we comment out in RSX, we have calibres and then we have Slash and then the star 74 00:05:27,010 --> 00:05:27,460 now. 75 00:05:28,330 --> 00:05:31,570 I'm using the shortcut, which is command and then forward. 76 00:05:32,320 --> 00:05:40,300 But if you want to check it out, how to actually do that as far as your setup, then look for the edit 77 00:05:40,420 --> 00:05:43,320 and then you're looking for this toggle line comment. 78 00:05:43,330 --> 00:05:48,410 And as you can see, in my case, it is a command and then Porgie. 79 00:05:48,610 --> 00:05:50,740 That's the shortcut that I'm using. 80 00:05:51,070 --> 00:05:56,290 Also, as a side note, if you want to check out all the shortcuts that you have and the reason why 81 00:05:56,290 --> 00:05:58,810 I'm showing that, because not everyone uses a map. 82 00:05:59,230 --> 00:06:03,640 So, of course, some are a little bit different for the windows. 83 00:06:03,820 --> 00:06:08,550 Just go to Visual Studio code, you know, open up in a new window. 84 00:06:08,680 --> 00:06:13,230 And by the way, I'll open up also right away, a new browser window. 85 00:06:13,570 --> 00:06:19,660 And then once you open up before you drag and drop anything, just look for printable keyboard cheat 86 00:06:19,670 --> 00:06:23,560 sheet and this is where you'll find for your operating system. 87 00:06:23,860 --> 00:06:29,530 Now, I'm not saying that you need to sit for one month and memorize them, but, for example, if you'll 88 00:06:29,530 --> 00:06:37,670 learn one keyboard shortcut today, trust me, it will overall improve your workflow tremendously. 89 00:06:38,020 --> 00:06:39,790 So that is a quick side note. 90 00:06:40,270 --> 00:06:42,600 And of course, we're heading back to our project. 91 00:06:42,970 --> 00:06:44,330 So that's how we're coming out. 92 00:06:44,350 --> 00:06:50,270 We cannot have here a statement, but if we'll set up an expression, everything will work. 93 00:06:50,740 --> 00:06:56,410 Now, if I'll try to do the same thing, for example, with the paragraph and in here, I'll past six 94 00:06:56,590 --> 00:06:57,450 plus six. 95 00:06:57,820 --> 00:07:03,420 Now, of course, I'm returning a value and as a result, I'm going to have this 12. 96 00:07:03,910 --> 00:07:08,020 So that's how we can work with JavaScript in the. 97 00:07:08,950 --> 00:07:10,270 So we set up here. 98 00:07:11,310 --> 00:07:14,580 That means we're going back to a just plan. 99 00:07:14,890 --> 00:07:19,450 And then, of course, as long as we're setting up expression, we are good to go. 100 00:07:19,600 --> 00:07:22,650 Now, of course, we can do tons of cool things in here. 101 00:07:22,870 --> 00:07:25,150 For example, I have the author now. 102 00:07:25,150 --> 00:07:29,280 What is the property or I'm sorry, what is the method that we can use on a string? 103 00:07:30,100 --> 00:07:33,220 We can go to, for example, uppercase. 104 00:07:33,220 --> 00:07:33,670 Correct. 105 00:07:34,060 --> 00:07:39,750 And I could just invoke it and I'll see that my value right away is invoked. 106 00:07:40,180 --> 00:07:48,970 So these are just few things that we can do now that we know that we can set up JavaScript in objects. 107 00:07:49,300 --> 00:07:55,510 And essentially you can see that we right away make our way more dynamic. 108 00:07:56,050 --> 00:07:59,560 It just means that we don't have to hardcourt everything.