1 00:00:00,510 --> 00:00:06,400 In the last section we generated a new season's project I'm not going to change into that new directory 2 00:00:07,200 --> 00:00:11,310 and then I'll start up my development server and side with NPM starts. 3 00:00:11,680 --> 00:00:12,150 OK. 4 00:00:12,280 --> 00:00:15,840 Well that starting up and I'm getting my browser automatically launched here. 5 00:00:15,840 --> 00:00:17,930 I'll see the default re-act application up here. 6 00:00:17,950 --> 00:00:18,690 There we go. 7 00:00:18,700 --> 00:00:23,720 I'm now going to also start up my code editor inside that new seasons directory. 8 00:00:23,880 --> 00:00:24,240 Right. 9 00:00:24,250 --> 00:00:28,510 So here it is got my code editor right here inside the seasons project. 10 00:00:28,550 --> 00:00:30,980 Now we've got a decent amount of work to do here. 11 00:00:30,980 --> 00:00:35,960 The first thing that I want to do is pull in that semantic UI CSSA library. 12 00:00:36,050 --> 00:00:42,080 We're going to depend upon semantic UI for taking care of those icons and a couple other pieces of styling 13 00:00:42,280 --> 00:00:45,440 that we're going to realize that we need along the way. 14 00:00:45,440 --> 00:00:52,050 So to Hookup semantic UI I'm going to search for semantic youguys CDN. 15 00:00:52,090 --> 00:00:56,680 You know I browser again I'll find a link here at CDN JSE dot com. 16 00:00:57,570 --> 00:01:01,300 And remember we're going to scroll down just about to the bottom of this list. 17 00:01:02,440 --> 00:01:04,870 And find the C Ss file towards the bottom. 18 00:01:07,010 --> 00:01:07,900 Here we go right here. 19 00:01:07,940 --> 00:01:11,610 So I got semantic man CSSA that's the only file we need out of here. 20 00:01:11,840 --> 00:01:17,570 So I got a copy that thing I'll go back over to my code editor of find that public folder open up the 21 00:01:17,570 --> 00:01:18,020 index. 22 00:01:18,060 --> 00:01:26,370 HMO file and then inside of here anywhere inside the head tag I'm going to put a new link with the rule 23 00:01:26,400 --> 00:01:30,310 of style sheet and an H ref of that link. 24 00:01:30,360 --> 00:01:35,800 So I'm going to piece it right in there like so and then I'll make sure that I terminate that link tag. 25 00:01:36,030 --> 00:01:37,980 Now technically you don't actually need that forward slash. 26 00:01:37,980 --> 00:01:40,150 We can just leave it like so. 27 00:01:40,320 --> 00:01:48,040 OK so now I'll save this file and if I go back over to my browser and refresh the page I should be able 28 00:01:48,040 --> 00:01:52,950 to open up that network tab and see that I am loading semantic Mint's VSS. 29 00:01:53,110 --> 00:01:53,310 OK. 30 00:01:53,320 --> 00:01:54,990 So that's definitely loaded up. 31 00:01:55,000 --> 00:01:56,920 Now that was definitely the easy part. 32 00:01:56,920 --> 00:01:59,120 Let's now flip back over toward Ed.. 33 00:01:59,680 --> 00:02:01,520 Inside my SIRC directory. 34 00:02:01,540 --> 00:02:04,280 Remember we get all these automatically generated files. 35 00:02:04,330 --> 00:02:06,310 And I don't really like to use these in general. 36 00:02:06,490 --> 00:02:13,220 So we're going to delete all of them so I'll highlight all them and alt delete and move to trash. 37 00:02:13,660 --> 00:02:18,830 And then finally or make a new file inside they're called index. 38 00:02:18,980 --> 00:02:21,800 Yes and this is where we're going to get started. 39 00:02:21,950 --> 00:02:22,820 All right. 40 00:02:22,820 --> 00:02:27,260 So I want to now flip over to a diagram that's going to help us think about the different components 41 00:02:27,260 --> 00:02:30,390 that we're going to need to make to build this application out. 42 00:02:30,410 --> 00:02:37,190 Now at first glance based upon what we have seen so far inside this mock up over here I think that we 43 00:02:37,190 --> 00:02:41,700 might be able to get away with very few components inside this application. 44 00:02:41,720 --> 00:02:44,140 We're going to eventually realize that's not quite the case. 45 00:02:44,210 --> 00:02:46,470 But for now let's just kind of go with this. 46 00:02:46,490 --> 00:02:51,530 So I think that we need in general two different components we probably need an app component that is 47 00:02:51,530 --> 00:02:56,060 going to have a bunch of code inside of it that's going to be in charge of determining the location 48 00:02:56,240 --> 00:02:58,060 of the user and the current month. 49 00:02:59,610 --> 00:03:05,340 That app component is then going to take the current season it winter or summer or just ignoring fall 50 00:03:05,340 --> 00:03:06,430 and spring for now. 51 00:03:06,660 --> 00:03:13,410 And it's going to pass it as a prop down to a second component that we'll call season display this season 52 00:03:13,410 --> 00:03:18,090 display component right here is what is going to be in charge of showing some actual icons and text 53 00:03:18,150 --> 00:03:24,140 on the screen to tell the user hey it's winter or it's summer so likewise besides saying it is winter 54 00:03:24,140 --> 00:03:28,940 right here the app could easily tell season display it is summer instead and the season display would 55 00:03:28,940 --> 00:03:32,090 need to customize itself based upon that. 56 00:03:32,540 --> 00:03:32,960 OK. 57 00:03:32,960 --> 00:03:34,910 So let's now flip back over to our editor. 58 00:03:34,910 --> 00:03:39,140 We're going to start to put together this app component and we'll also start to scaffold out the season 59 00:03:39,140 --> 00:03:48,980 display inside of index thought yes I'm going to import re-act from react and I'll import react Dom 60 00:03:50,000 --> 00:03:54,060 re-act dashed and then I'm going to make my app component. 61 00:03:54,260 --> 00:03:59,510 I'm going to create it as a functional component for right now until we understand why we need to make 62 00:03:59,510 --> 00:04:06,740 a class based component inside of your Iler return a div that says simply Hi there. 63 00:04:07,670 --> 00:04:15,460 Or now and then after that I'll do my re-act Dom render. 64 00:04:15,670 --> 00:04:20,980 I want to show an instance of my app component and then as the second argument to this thing I'm going 65 00:04:20,980 --> 00:04:25,900 to provide a reference to that div with ID of root inside of our index. 66 00:04:25,920 --> 00:04:29,230 Each e-mail file will say Documentum queries selector 67 00:04:31,910 --> 00:04:33,540 and root like so. 68 00:04:34,550 --> 00:04:35,920 All right so that's it. 69 00:04:36,260 --> 00:04:39,530 Let's say this will flip back over and just make sure that everything is working. 70 00:04:39,540 --> 00:04:42,260 Yes I see the text high there as small as it might be. 71 00:04:42,260 --> 00:04:43,700 So everything looks good. 72 00:04:44,090 --> 00:04:44,350 All right. 73 00:04:44,360 --> 00:04:48,210 Let's now put together a little bit of scaffolding for that second component. 74 00:04:48,290 --> 00:04:52,210 The seasoned display we're not going to be making use of this thing just yet. 75 00:04:52,220 --> 00:04:54,100 We're going to focus on some other topics first. 76 00:04:54,170 --> 00:04:59,210 But I just want to kind of scaffold this thing out or put together kind of a framework for the components 77 00:04:59,210 --> 00:05:03,800 that we don't have to go back and work on it later when we're in the middle of putting this thing together. 78 00:05:04,680 --> 00:05:04,940 All right. 79 00:05:04,950 --> 00:05:10,820 So now inside the sarcy folder I'm going to make another new file called season display. 80 00:05:10,850 --> 00:05:20,870 J.S. at the top we will import re-act or react or create another new functional component called season 81 00:05:20,960 --> 00:05:21,790 display. 82 00:05:23,810 --> 00:05:30,190 Now how this return a div that simply says something like on display. 83 00:05:31,350 --> 00:05:32,370 And then finally at the bottom. 84 00:05:32,400 --> 00:05:40,050 Let's not forget to export this components sold to an export default not Deeson season display like 85 00:05:40,050 --> 00:05:40,720 so. 86 00:05:41,180 --> 00:05:44,480 All right so we've got basically everything here prepped in ready to go. 87 00:05:44,670 --> 00:05:46,120 So let's take a quick pause right here. 88 00:05:46,140 --> 00:05:50,460 When we come back the next section we're going to start focusing on some of the biggest challenges that 89 00:05:50,460 --> 00:05:54,930 we're going to come up against which is getting the user's physical location and determining the current 90 00:05:54,930 --> 00:05:55,470 month. 91 00:05:55,470 --> 00:05:57,480 So quick pause and I'll see you in just a minute.