1 00:00:00,350 --> 00:00:05,490 In the last section we started putting together some of the very core elements of the client side of 2 00:00:05,490 --> 00:00:06,530 our application. 3 00:00:06,570 --> 00:00:11,460 We deleted all the boilerplate we got inside of our SIRC directory except for that register service 4 00:00:11,460 --> 00:00:15,540 worker file and then we created a brand new index dodgiest file. 5 00:00:15,870 --> 00:00:23,640 As a reminder the Create react up application is set up to assume that there is an index file inside 6 00:00:23,640 --> 00:00:28,350 of your S or C directory and that it is the root file of your application. 7 00:00:28,380 --> 00:00:31,500 So we did not pick the name index not just here at random. 8 00:00:31,500 --> 00:00:35,070 This is something that is enforced automatically by Create re-act out. 9 00:00:35,670 --> 00:00:39,460 So we've now got the start of some boiler plate for next door Jasc File. 10 00:00:39,510 --> 00:00:44,940 We're going to continue in this section by creating our actual route component and then using the re-act 11 00:00:45,060 --> 00:00:48,640 Dom render call to get that component to show up on the screen. 12 00:00:48,960 --> 00:00:53,070 After that we'll then start to do some of the redux setup and then we'll continue with some of the re-act 13 00:00:53,070 --> 00:00:54,620 router setup as well. 14 00:00:54,660 --> 00:00:56,070 So let's get to it. 15 00:00:56,610 --> 00:01:03,000 I want to first start off by creating a sort of starter place for our app component inside of a new 16 00:01:03,000 --> 00:01:03,760 file. 17 00:01:03,840 --> 00:01:09,150 We'll import it into this index digest file and then use the react on Dot rendered call to actually 18 00:01:09,150 --> 00:01:10,520 show it. 19 00:01:10,530 --> 00:01:15,420 So I'm going to find my SIRC directory inside there or make a new folder. 20 00:01:15,540 --> 00:01:20,160 That's going to Houghs all the different components that we're going to have inside of our application. 21 00:01:20,160 --> 00:01:25,920 I'm going to call this file or seemy this folder the components directory and then inside of the components 22 00:01:25,920 --> 00:01:29,930 directory I'll make a new file called app. 23 00:01:30,050 --> 00:01:30,840 Yes. 24 00:01:31,020 --> 00:01:37,830 Now notice on using a capital Asier in general we're going to be using a very consistent name strategy 25 00:01:37,890 --> 00:01:41,230 inside of our application especially on the client side. 26 00:01:41,460 --> 00:01:48,870 If a given file is exploring a class or a reactive component of any type be it a functional component 27 00:01:48,900 --> 00:01:50,640 or a class based component. 28 00:01:50,640 --> 00:01:57,930 We will label it with a capital letter but if the file returns just a function or just a series of functions 29 00:01:57,930 --> 00:02:03,060 or something like that we will label it with a lowercase leading character. 30 00:02:03,140 --> 00:02:06,070 And so a good example of that would be like the index digest file. 31 00:02:06,240 --> 00:02:07,830 It's not exporting a component. 32 00:02:07,890 --> 00:02:09,640 So we use a lowercase letter. 33 00:02:09,810 --> 00:02:13,770 The app will export a component so we're going to use uppercase. 34 00:02:14,480 --> 00:02:14,760 OK. 35 00:02:14,820 --> 00:02:19,770 So now inside the app component we'll put down a little bit of boilerplate in here just to get started. 36 00:02:19,800 --> 00:02:28,770 So import re-act from react at the top we'll create our app components right now we'll leave it as just 37 00:02:28,770 --> 00:02:31,650 a simple functional component. 38 00:02:31,650 --> 00:02:37,080 We will say that this thing is going to return a div that contains the text. 39 00:02:37,410 --> 00:02:39,360 Hi there. 40 00:02:39,360 --> 00:02:42,600 And then we'll export the component at the very bottom. 41 00:02:43,610 --> 00:02:43,930 OK. 42 00:02:43,950 --> 00:02:49,260 So again kind of assuming that we're on the same page regarding re-act here we have created a functional 43 00:02:49,260 --> 00:02:55,740 component and it returns a little bit of GSX the GSX says that we want to create a div that contains 44 00:02:55,740 --> 00:02:56,270 the text. 45 00:02:56,280 --> 00:02:57,450 Hi there. 46 00:02:57,450 --> 00:03:02,760 We then take that newly created component and export it at the very bottom of the file with the export 47 00:03:02,760 --> 00:03:04,410 default syntax. 48 00:03:04,410 --> 00:03:09,570 You'll also notice that we've kind of changed over from using require statements to using import statements 49 00:03:09,570 --> 00:03:11,550 at the top as well as reminder. 50 00:03:11,550 --> 00:03:16,680 We are now using import statements because on the front end we are making use of Web pack in babbel 51 00:03:16,950 --> 00:03:21,460 which gives us very easy access to E.S. 2015 modules. 52 00:03:21,600 --> 00:03:27,660 Whereas on the back end we're making use of no J S which has really only good support for common G-S 53 00:03:27,660 --> 00:03:33,060 modules right now in common J.S. modules use the require syntax instead. 54 00:03:33,760 --> 00:03:34,040 OK. 55 00:03:34,050 --> 00:03:35,270 So we'll save this file. 56 00:03:35,370 --> 00:03:40,350 We're now going to import it into the index on file and then just make sure we can get it to show up 57 00:03:40,440 --> 00:03:41,340 on the screen. 58 00:03:41,700 --> 00:03:51,900 So inside of index not Jesus I will import app from component's slash app will then show the app component. 59 00:03:52,290 --> 00:03:58,590 So we'll say app make sure that you use the GSX tags inside of here because react on don't render expects 60 00:03:58,620 --> 00:04:05,910 a component instance which would create which we create by using GSX tags then as a second argument 61 00:04:06,090 --> 00:04:11,760 we have to provide a reference to an existing Dom node inside of our html document. 62 00:04:11,880 --> 00:04:18,400 Now inside the client public directory we get the very root index. 63 00:04:18,440 --> 00:04:22,920 HTL file that is used to house the Riak side of our application. 64 00:04:22,920 --> 00:04:28,590 So if we open up the index at each HTML file and you'll see all this boilerplate each email in here 65 00:04:28,590 --> 00:04:29,400 already. 66 00:04:29,910 --> 00:04:36,500 If we scroll on down to the body tag you'll find the div with an ID of root. 67 00:04:36,510 --> 00:04:41,430 So this is going to be the very root div of our application and it's going to be where we render are 68 00:04:41,430 --> 00:04:43,190 re-act application 2. 69 00:04:43,200 --> 00:04:48,870 So essentially as a second argument to react on don't read or call we have to pass a reference to this 70 00:04:48,870 --> 00:04:50,390 div right here. 71 00:04:50,730 --> 00:04:57,770 So to do so I'll flip back over to the index file and as a second argument I'll pass in document doc 72 00:04:57,810 --> 00:05:05,900 queries selector and give myself a new line here so that you can still see everything on the screen. 73 00:05:08,000 --> 00:05:14,420 And then we'll select that div with idea of route by saying pound it like so. 74 00:05:15,210 --> 00:05:15,620 OK. 75 00:05:15,680 --> 00:05:19,320 So it's like pretty or collapse it to one line anyways whatever. 76 00:05:19,340 --> 00:05:21,470 That's fine. 77 00:05:21,560 --> 00:05:21,840 All right. 78 00:05:21,860 --> 00:05:25,760 I think we're ready to now test this out inside the browser and make sure that we've kind of got square 79 00:05:25,760 --> 00:05:28,620 one put away before we start to dive into the redux stuff. 80 00:05:28,790 --> 00:05:33,720 So let's start our server back up and just verify that we can see the app component on the screen. 81 00:05:33,980 --> 00:05:37,660 We'll then take a break and continue with the redux setup. 82 00:05:37,690 --> 00:05:42,920 So going to flip back over to my counsel it looks like those three modules that we installed have successfully 83 00:05:42,920 --> 00:05:44,710 been installed. 84 00:05:44,720 --> 00:05:50,180 Notice that we are still inside of our client directory but to start up our server we have to make sure 85 00:05:50,180 --> 00:05:52,620 that we are inside of our server directory. 86 00:05:52,940 --> 00:05:59,210 So I'm going to change back out to my server directory and then once inside of here I'll start up my 87 00:05:59,210 --> 00:06:04,090 server side of development mode with the command and run dev like so 88 00:06:07,410 --> 00:06:08,330 OK. 89 00:06:08,870 --> 00:06:12,290 So looks like we get a little bit of an error message here. 90 00:06:12,860 --> 00:06:17,660 So you might see an error message that says something like re-act scripts start and something like Riak 91 00:06:17,660 --> 00:06:18,200 scripts. 92 00:06:18,200 --> 00:06:19,400 Command not found. 93 00:06:19,550 --> 00:06:22,200 So if you see this at this point in time it's totally fine. 94 00:06:22,220 --> 00:06:27,200 This is a little issue that we're going to start fix up inside of our client side application. 95 00:06:27,260 --> 00:06:30,180 If you do not see this issue that's totally fine as well. 96 00:06:30,200 --> 00:06:35,360 It might be that the Create re-act up boilerplate has this all fixed up so let's continue in the next 97 00:06:35,360 --> 00:06:36,100 section. 98 00:06:36,140 --> 00:06:40,250 We'll talk about why we are seeing this error message and we'll talk about exactly how we're going to 99 00:06:40,250 --> 00:06:41,090 fix it. 100 00:06:41,150 --> 00:06:43,460 So quick break and I'll see you in the next section.