1 00:00:01,130 --> 00:00:04,620 In this section we're going to start making a couple of changes to our project. 2 00:00:04,760 --> 00:00:09,140 I'm inside of my code editor and I'm going to open up my SIRC directory. 3 00:00:09,180 --> 00:00:12,830 Remember our goal right now is to get a better idea of how GSX works. 4 00:00:12,830 --> 00:00:17,840 So I want to delete all the code inside this SIRC directory and we're going to replace it with one or 5 00:00:17,840 --> 00:00:22,580 two files in which we're going to experiment to in just a little bit and we'll get a better idea of 6 00:00:22,580 --> 00:00:24,660 exactly how GSX works. 7 00:00:24,680 --> 00:00:31,070 So I'm going to highlight everything inside of the SIRC folder just the sarcy folder and I'm going to 8 00:00:31,160 --> 00:00:32,240 delete all of it. 9 00:00:34,130 --> 00:00:39,470 All right so now the Cercy directory is empty once it's empty on then going to create a new file inside 10 00:00:39,470 --> 00:00:41,420 they're called index Dot. 11 00:00:41,480 --> 00:00:42,580 Yes. 12 00:00:42,590 --> 00:00:44,790 Now the name of this file is very special. 13 00:00:44,810 --> 00:00:50,240 So make sure you call your file index Staci as well I'll tell you a little bit later on why this file 14 00:00:50,240 --> 00:00:51,180 is so special. 15 00:00:52,260 --> 00:00:57,600 Now when I create this new file I can flip back over to my browser where I have my re-act application 16 00:00:57,600 --> 00:00:59,570 running at localhost 3000. 17 00:00:59,850 --> 00:01:03,180 If I refreshed the page you'll notice that it's now completely white. 18 00:01:03,180 --> 00:01:05,230 Nothing at all shows up. 19 00:01:05,220 --> 00:01:08,430 So right now let's set a very small short term goal. 20 00:01:08,430 --> 00:01:14,040 Let's say that we want to figure out how to use react to get some content to appear on the screen once 21 00:01:14,040 --> 00:01:17,210 we figure out how to get some content to appear on screen using react. 22 00:01:17,280 --> 00:01:21,450 We'll then be able to start to play around with GSX a little bit and get a better idea of the rules 23 00:01:21,450 --> 00:01:22,410 around it. 24 00:01:22,830 --> 00:01:28,740 So in order to get some content to appear I'm going to put some comments into my index G-S file that 25 00:01:28,740 --> 00:01:29,720 I just created. 26 00:01:29,970 --> 00:01:33,870 I'm going to place three comments inside of here that are going to guide me through the process of getting 27 00:01:33,870 --> 00:01:37,880 content to show on the screen when using re-act. 28 00:01:38,030 --> 00:01:45,590 So the first comment I'm going to put in here I'm going to say import the react and react Dom libraries. 29 00:01:45,680 --> 00:01:51,200 Remember back when we were using code pen we had to actually add it react and react Dom as dependencies 30 00:01:51,200 --> 00:01:52,280 to our project. 31 00:01:52,310 --> 00:01:55,230 So we essentially have to go through a similar step here as well. 32 00:01:56,030 --> 00:01:59,390 I'll then give myself a little bit space and I'll put down my next step. 33 00:01:59,410 --> 00:02:03,650 So the second step will be to create a re-act component. 34 00:02:04,120 --> 00:02:08,120 We spoke very briefly about Riadh components back when we worked on code pen. 35 00:02:08,130 --> 00:02:11,910 So we'll talk a little bit more about what Riak components are in just a little bit. 36 00:02:12,230 --> 00:02:17,620 And then finally look at myself all that more space and put on one more comment down here I'll say take 37 00:02:17,620 --> 00:02:21,470 the real component and show it on the screen. 38 00:02:22,160 --> 00:02:23,000 OK so that's it. 39 00:02:23,000 --> 00:02:27,530 It's a three step process to get some content to show up on the screen of our browser. 40 00:02:27,560 --> 00:02:29,630 Let's begin right now with Step number one. 41 00:02:29,780 --> 00:02:34,070 I want to import the react in react Dom libraries in order to do so. 42 00:02:34,100 --> 00:02:44,300 I'm going to write out import re-act from re-act and then import reac Dom from re-act dash Dom. 43 00:02:44,790 --> 00:02:45,080 OK. 44 00:02:45,090 --> 00:02:49,430 So just right there with these two lines of code we've got a lot of crazy stuff going on. 45 00:02:49,500 --> 00:02:53,760 I want to talk to you a little bit about exactly what import statements are and why we have to use them 46 00:02:53,760 --> 00:02:54,330 at all. 47 00:02:54,570 --> 00:02:59,850 But before I do I want you to take special note and make sure that you put capital D.O.A. in in your 48 00:02:59,850 --> 00:03:01,260 import statement as well. 49 00:03:02,310 --> 00:03:04,250 OK so what's with the import statement. 50 00:03:04,250 --> 00:03:08,100 You'll recall that back over on the other project we worked on over on pen. 51 00:03:08,180 --> 00:03:10,120 We didn't have to write an import statement. 52 00:03:10,250 --> 00:03:12,850 We just added react and react Dohm to our project. 53 00:03:12,860 --> 00:03:14,520 And that was pretty much it. 54 00:03:14,840 --> 00:03:17,120 Well now that we're using it create re-act up. 55 00:03:17,150 --> 00:03:20,450 We're using a bundler system called web pack. 56 00:03:20,600 --> 00:03:23,250 Well talk about what web pack is and why we're using it. 57 00:03:23,330 --> 00:03:28,010 But for right now all we need to understand is that every file that we create inside of our project 58 00:03:28,160 --> 00:03:31,400 is essentially its own tiny little universe. 59 00:03:32,160 --> 00:03:37,830 Any code that we write inside this file is not going to be automatically shared or made available with 60 00:03:37,890 --> 00:03:40,170 other files and vice versa. 61 00:03:40,170 --> 00:03:45,660 So in other words if we want to get access to any libraries or any other code that we write inside of 62 00:03:45,660 --> 00:03:50,880 our project we have to write a import statement like the one you see right here. 63 00:03:51,180 --> 00:03:54,560 Now import statements have a lot of different rules around the syntax of them. 64 00:03:54,630 --> 00:03:58,070 We'll investigate a lot of the different syntax rules a little bit later on. 65 00:03:58,380 --> 00:04:03,220 But right now let's just kind of examine the import statement that we're making use of. 66 00:04:03,260 --> 00:04:03,560 All right. 67 00:04:03,570 --> 00:04:05,930 So a quick diagram. 68 00:04:06,010 --> 00:04:08,110 So first we place the import keyword. 69 00:04:08,140 --> 00:04:13,390 This tells javascript that we want to reach out to either a dependency or a another file inside of our 70 00:04:13,390 --> 00:04:14,310 project. 71 00:04:14,350 --> 00:04:19,270 So import statements like this can be used to import either dependencies or packages that we install 72 00:04:19,270 --> 00:04:24,560 to our project such as react and react dom or files that you an author. 73 00:04:24,610 --> 00:04:29,320 The second word is going to the name of a variable that we want to take all the code from that dependency 74 00:04:29,350 --> 00:04:32,000 or file and assign to. 75 00:04:32,110 --> 00:04:33,580 Now I said that kind of awkwardly. 76 00:04:33,580 --> 00:04:37,060 Essentially what's going on here is we're going to reach out to the re-act dependency. 77 00:04:37,090 --> 00:04:42,870 We're going to take all the code inside that dependency and then assign it to this re-act variable. 78 00:04:42,870 --> 00:04:47,910 Now one thing to be aware of is that the name of this variable right here does not have to be exactly 79 00:04:47,910 --> 00:04:48,720 react. 80 00:04:48,750 --> 00:04:54,600 We could very easily rename it to something like my react if we wanted to but in general we follow a 81 00:04:54,600 --> 00:04:59,640 convention where we name our variable along with the name of the library itself. 82 00:04:59,670 --> 00:05:01,390 So it's a library name it's react. 83 00:05:01,710 --> 00:05:06,480 We assign it to a variable called react if the name of the variable of the library is random we assign 84 00:05:06,480 --> 00:05:08,100 it to a variable called react. 85 00:05:08,250 --> 00:05:11,020 And so on. 86 00:05:11,040 --> 00:05:12,630 Next up the from keyword. 87 00:05:12,660 --> 00:05:18,000 Pretty much says we want to pull code from a file or a dependency and then finally we list either the 88 00:05:18,150 --> 00:05:23,370 dependency that we want to import from or a path to the file that we want to import. 89 00:05:23,370 --> 00:05:29,130 In the case that we are importing a file that you and I create ourselves now if we list out a dependency 90 00:05:29,130 --> 00:05:34,850 right here what's going to happen is javascript is going to say OK I see you want react. 91 00:05:34,860 --> 00:05:39,630 It's then going to look inside of the node modules directory and it's going to try to find a folder 92 00:05:39,690 --> 00:05:42,360 inside of your called react. 93 00:05:42,360 --> 00:05:48,820 So if you scroll way down inside that node modules folder all the way to the Ares you're going to see 94 00:05:48,820 --> 00:05:52,230 that we have a folder called re-act right here. 95 00:05:52,250 --> 00:05:56,900 So when we say import re-act from react that means go and find the re-act folder inside the node modules 96 00:05:56,900 --> 00:05:59,400 directory and get all the code from inside there. 97 00:05:59,600 --> 00:06:01,800 And then the same thing with react on as well. 98 00:06:01,910 --> 00:06:04,320 You'll see the react on folder is right there. 99 00:06:04,400 --> 00:06:09,230 So if we wanted to we could technically import any of the different folders that you see inside of our 100 00:06:09,230 --> 00:06:10,720 node modules directory. 101 00:06:10,730 --> 00:06:16,080 We could also install more modules into the stone modules directory and import those as well. 102 00:06:16,250 --> 00:06:20,960 But in general obviously we only import the dependencies we actually want to use and really care about 103 00:06:22,530 --> 00:06:23,160 OK. 104 00:06:23,670 --> 00:06:29,280 Now quick thing I want to mention here you're seeing the import syntax for pulling code from another 105 00:06:29,280 --> 00:06:30,960 file or a dependency. 106 00:06:30,960 --> 00:06:36,240 If you've ever worked with they know J.S. project before you might have seen a slightly different way 107 00:06:36,240 --> 00:06:41,760 of requiring in other files or dependencies one which uses something called the require function. 108 00:06:41,760 --> 00:06:46,550 So just as a quick example you might have seen code in the past that looks something like this. 109 00:06:46,590 --> 00:06:48,600 Re-act equals require react. 110 00:06:48,600 --> 00:06:51,370 You don't have to write that I want to show you a quick example. 111 00:06:51,400 --> 00:06:56,690 Tony very quickly tell you about the difference between a required statement and an import statement. 112 00:06:56,850 --> 00:07:01,170 We make use of an import statement that is a reference to a module system called. 113 00:07:01,200 --> 00:07:08,040 Yes 2015 modules this module system is essentially a set of rules that describes how code can be shared 114 00:07:08,040 --> 00:07:10,560 between different javascript files. 115 00:07:10,570 --> 00:07:13,400 There is a different Woggles system called common. 116 00:07:13,500 --> 00:07:20,350 Yes this is a different set of rules that also governs how to share code between different files. 117 00:07:21,540 --> 00:07:27,030 If we're using yes 2015 modules and that's what you and I are using we use the import syntax in order 118 00:07:27,030 --> 00:07:29,300 to import other files or other code. 119 00:07:29,460 --> 00:07:35,060 But if we make use of the common G-S module system we make use of the require syntax instead. 120 00:07:35,070 --> 00:07:39,840 So if you've ever seen these two different types of import or require statements essentially they're 121 00:07:39,840 --> 00:07:43,610 just making use of different module systems. 122 00:07:43,740 --> 00:07:46,610 So I think that's pretty good for this first step right here. 123 00:07:46,680 --> 00:07:49,280 Just two lines of code but there's a lot of knowledge to be had. 124 00:07:49,440 --> 00:07:50,660 Let's take a quick pause right here. 125 00:07:50,670 --> 00:07:54,040 We'll come back in the next section and we're going to start to create our re-act component.