1 00:00:00,630 --> 00:00:04,980 We've just about wrapped up on the header I think that the last big things we have to take care of is 2 00:00:04,980 --> 00:00:09,750 making sure that the logo over here is actually clickable to send the user back to the route of our 3 00:00:09,750 --> 00:00:11,010 application. 4 00:00:11,010 --> 00:00:16,200 In addition we probably also want to make sure that this landing component right here has a little bit 5 00:00:16,200 --> 00:00:18,850 better marketing text of it than it has at present. 6 00:00:19,110 --> 00:00:23,970 So I think that we'll first start off with creating a separate landing component and wiring it up to 7 00:00:23,970 --> 00:00:28,530 our application and then we will also come back and fix up the logo and make sure that it is a link 8 00:00:28,530 --> 00:00:29,140 as well. 9 00:00:29,310 --> 00:00:30,740 So let's get to it. 10 00:00:31,230 --> 00:00:36,620 At present we can open up our client SIRC components app. 11 00:00:36,650 --> 00:00:42,430 Just file and if you recall we are still using a dummy component for the landing screen right now. 12 00:00:42,780 --> 00:00:48,570 So let's create a separate file to house all the markup that will make up our landing page or essentially 13 00:00:48,640 --> 00:00:53,500 the initial marketing page that a user will see in my component's directory. 14 00:00:53,500 --> 00:00:59,740 I'm going to make a new file called Landing Jesus and then inside there we'll put together some boilerplate 15 00:00:59,760 --> 00:01:01,840 for a functional component. 16 00:01:02,220 --> 00:01:12,480 So we'll say in port react from react we'll make a landing component function inside of there we'll 17 00:01:12,480 --> 00:01:16,510 return just a little bit of GSX just to get started. 18 00:01:16,620 --> 00:01:24,960 So I'll place a div inside of it will be in each one and will give it the text email me and then maybe 19 00:01:24,960 --> 00:01:30,540 right underneath it will place some just raw text and say something like collect 20 00:01:33,070 --> 00:01:38,460 feedback from your users something nice and simple. 21 00:01:39,040 --> 00:01:39,540 OK. 22 00:01:39,640 --> 00:01:44,850 I do want to make sure that the H-1 and the text here appears to be centered on the screen to do so 23 00:01:44,860 --> 00:01:49,840 we're going out on a little bit of styling on the GSX side of our application. 24 00:01:49,840 --> 00:01:55,800 So to the top level Dave right here I'll add on a style property that contains an object. 25 00:01:55,810 --> 00:01:58,290 So that's why we have two sets of curly braces here. 26 00:01:58,420 --> 00:02:03,100 One is to indicate that we're about to pass in some javascript and the second is the actual object that 27 00:02:03,100 --> 00:02:09,220 we're passing in and then we'll give it a text a line property of center and that's going to cause everything 28 00:02:09,220 --> 00:02:11,800 inside this div to be centered on the screen. 29 00:02:12,460 --> 00:02:15,930 And the very last step is to make sure that we export this component at the bottom. 30 00:02:16,000 --> 00:02:23,110 So we'll say export default landing and then the very last thing we do is make sure that we import this 31 00:02:23,110 --> 00:02:26,930 into our app component and use it inside of our router configuration. 32 00:02:27,220 --> 00:02:29,180 So we go back to the GSA file. 33 00:02:29,320 --> 00:02:31,870 I will find the dummy landing component. 34 00:02:32,080 --> 00:02:37,660 Now replace it with imports landing from landing like so. 35 00:02:38,110 --> 00:02:42,010 Now remember we already set up our route assuming that the component was named landing. 36 00:02:42,040 --> 00:02:44,940 So we don't have to change anything down here. 37 00:02:44,960 --> 00:02:46,670 OK let's test this out in the browser. 38 00:02:47,020 --> 00:02:50,620 When I flip back over I must have made a typo in here. 39 00:02:50,920 --> 00:02:51,400 Yes. 40 00:02:51,400 --> 00:02:55,660 You'll see that the error message says that the import statements have to be at the very top of the 41 00:02:55,660 --> 00:02:56,500 file. 42 00:02:56,500 --> 00:02:59,900 So we place the import statement after some declarations. 43 00:02:59,950 --> 00:03:05,110 Let's just move up the landing statement like so and save it and give it a shot again. 44 00:03:07,030 --> 00:03:07,370 OK. 45 00:03:07,400 --> 00:03:09,760 So this looks way better than before. 46 00:03:09,770 --> 00:03:12,710 Definitely gives us a little bit more of a marketing presence. 47 00:03:12,830 --> 00:03:18,580 Now again completely optional totally up to you if you want to really flesh out the marketing page here. 48 00:03:18,620 --> 00:03:24,050 You can very easily go back to that landing component and out on as much stuff in there as you wish. 49 00:03:24,110 --> 00:03:30,890 So images videos text fancy animations you know anything you could possibly want would be appropriate 50 00:03:30,890 --> 00:03:33,110 to dump into the landing component. 51 00:03:33,110 --> 00:03:38,300 Again for us we are not really concerned quite so much about styling in this application or in this 52 00:03:38,300 --> 00:03:38,940 course. 53 00:03:39,020 --> 00:03:43,410 This is way more about figuring out the really complex topics on the javascript side of things. 54 00:03:43,430 --> 00:03:48,470 So I'm going to say that this is probably enough to have for the marketing side of our application. 55 00:03:48,930 --> 00:03:49,270 OK. 56 00:03:49,300 --> 00:03:50,980 So we've got the land component put together. 57 00:03:50,990 --> 00:03:55,490 Now the other thing that I had said that we needed to work on was to make sure that the link up here 58 00:03:55,550 --> 00:03:57,530 or the logo up here was clickable. 59 00:03:57,530 --> 00:04:02,210 So whenever a user clicks on this thing they should be able to go back to the root route of our application 60 00:04:02,600 --> 00:04:06,800 and that starts to get important when the user starts to navigate to some deeply nested page in our 61 00:04:06,800 --> 00:04:07,650 application. 62 00:04:07,700 --> 00:04:12,080 We always want to make sure that they have the ability to get back to kind of like the core experience 63 00:04:12,080 --> 00:04:14,280 or the core page and side of our app. 64 00:04:14,300 --> 00:04:16,890 So let's take care of that step inside the next section.