1 00:00:00,980 --> 00:00:04,730 In the section we're going to start talking about an application that we're going to build to get a 2 00:00:04,730 --> 00:00:10,220 better idea of the differences between functional components and class based components with the application 3 00:00:10,220 --> 00:00:10,880 we're going to make. 4 00:00:10,880 --> 00:00:15,560 We're also going to learn a little bit about states and lifecycle events along the way. 5 00:00:15,590 --> 00:00:19,200 These are all some very key important concepts in the world of react. 6 00:00:19,250 --> 00:00:22,730 So we're going to spend a decent amount of time to make sure that you understand all that. 7 00:00:23,120 --> 00:00:23,410 OK. 8 00:00:23,420 --> 00:00:25,050 So here's the app we're going to build. 9 00:00:25,070 --> 00:00:26,870 I'm going to tell you right from the get go. 10 00:00:26,900 --> 00:00:28,730 This is a silly application. 11 00:00:28,730 --> 00:00:34,880 It is silly doesn't really have a huge purpose to it but nonetheless it's going to be a simple application 12 00:00:35,090 --> 00:00:40,100 that's going to make it very easy for you to understand exactly how class based components work and 13 00:00:40,100 --> 00:00:42,550 how state works and lifecycle methods work. 14 00:00:42,560 --> 00:00:46,730 Don't worry we're going to put together some much more interesting applications as the course goes on. 15 00:00:46,790 --> 00:00:51,200 But right now I just want to focus on learning some of these key topics. 16 00:00:51,200 --> 00:00:51,460 All right. 17 00:00:51,470 --> 00:00:52,510 So what do we build it. 18 00:00:52,700 --> 00:00:59,270 Well it's going to be an application that is going to detect what season the user is currently experiencing 19 00:00:59,390 --> 00:01:01,130 outside like in the real world. 20 00:01:01,430 --> 00:01:06,350 So we're going to say that if the user is located in the northern hemisphere that means we have to actually 21 00:01:06,350 --> 00:01:09,920 detect our users physical location when they visit our application. 22 00:01:10,160 --> 00:01:14,720 So if they're in the northern hemisphere and it's between October and March then it's probably going 23 00:01:14,720 --> 00:01:15,520 to be winter. 24 00:01:15,680 --> 00:01:20,840 So I want to print on the screen something like Bur. it's chilly and shows some snowflake icons. 25 00:01:22,010 --> 00:01:27,470 If the user is in the southern hemisphere so they are visiting our application from any location on 26 00:01:27,470 --> 00:01:31,910 the earth in the southern hemisphere and the month is between March and October. 27 00:01:31,910 --> 00:01:33,230 That means it's winter for them. 28 00:01:33,230 --> 00:01:38,140 People in the southern hemisphere and so I also want to show birr it's chilly. 29 00:01:38,290 --> 00:01:40,780 And then for the obvious reverse cases over here. 30 00:01:40,780 --> 00:01:45,440 So the case in which it is a user is in the northern hemisphere and it's between March and October. 31 00:01:45,460 --> 00:01:49,510 I want to print up something that seems to indicate that it is currently summertime and maybe it's time 32 00:01:49,510 --> 00:01:51,750 to hit the beach or something like that. 33 00:01:51,760 --> 00:01:59,170 So essentially we're just detecting what season it is based on the user's location and their current 34 00:01:59,170 --> 00:02:00,680 time or what month it is. 35 00:02:00,690 --> 00:02:04,280 Now we're going to print some different content on the screen based upon that. 36 00:02:04,330 --> 00:02:10,090 Like I said it seems like a silly application but there's going to be a ton of hidden challenges inside 37 00:02:10,090 --> 00:02:15,280 of here that are going to require us to get a much better understanding of how re-act works. 38 00:02:15,280 --> 00:02:20,620 So with that in mind when the quickly highlight some of the big challenges as it appears right now with 39 00:02:20,620 --> 00:02:25,390 this application there are going to be more challenges and that we're going to run into besides the 40 00:02:25,390 --> 00:02:27,470 ones that I'm just listing right here. 41 00:02:27,550 --> 00:02:31,420 But I just want you to start thinking about what we're going to have to try to solve as we built this 42 00:02:31,420 --> 00:02:32,740 application. 43 00:02:32,740 --> 00:02:36,850 So first replica our first challenge we're going to run into this one is probably the most obvious one 44 00:02:36,850 --> 00:02:40,350 we need to get the user's physical location. 45 00:02:40,420 --> 00:02:45,830 So somehow in the browser we need to detect what the user's physical location is. 46 00:02:45,950 --> 00:02:50,110 Now this is going to be a little bit easier than it seems at first glance but nonetheless there will 47 00:02:50,110 --> 00:02:52,650 be a challenger to show you exactly how to do this. 48 00:02:52,660 --> 00:02:57,120 As we start the application then the next thing that we need to do is somehow determine the current 49 00:02:57,120 --> 00:02:57,810 month. 50 00:02:57,810 --> 00:02:59,460 Now that's going to be definitely a little bit easier. 51 00:02:59,460 --> 00:03:05,100 Javascript has some very easy to use API for determining the current date and time and also getting 52 00:03:05,190 --> 00:03:09,650 the month number or what month it is essentially. 53 00:03:09,720 --> 00:03:14,210 And finally and this one probably seems a little bit obvious we need to change text and some styling 54 00:03:14,210 --> 00:03:17,730 on the screen based on the location and the month combined together. 55 00:03:18,140 --> 00:03:19,000 So that's pretty much it. 56 00:03:19,010 --> 00:03:21,990 That's what we're going to try to put together and that's some of the big challenges. 57 00:03:22,010 --> 00:03:24,280 I want you to think about right now. 58 00:03:24,290 --> 00:03:24,680 All right. 59 00:03:24,680 --> 00:03:29,870 So Leslie I want to do very quickly is to generate a new application so I'm going to flip on over to 60 00:03:29,870 --> 00:03:36,290 my terminal where I have my application still running from the last application we were built. 61 00:03:36,290 --> 00:03:41,360 I'm going to stop this thing by hitting Control-C and then I'm going to go up one directory back into 62 00:03:41,360 --> 00:03:43,480 my workspace folder of sorts. 63 00:03:43,610 --> 00:03:49,910 And then once I'm back here I'm going to generate a new application with create re-act app and then 64 00:03:49,940 --> 00:03:56,250 I'm going to call this one seasons like so I guess that's going to start the process of generating a 65 00:03:56,250 --> 00:03:57,150 new application. 66 00:03:57,150 --> 00:04:00,270 So let's take a quick pause right here and we'll continue in the next video.