In the section we're going to start talking about an application that we're going to build to get a
better idea of the differences between functional components and class based components with the application
we're going to make.
We're also going to learn a little bit about states and lifecycle events along the way.
These are all some very key important concepts in the world of react.
So we're going to spend a decent amount of time to make sure that you understand all that.
OK.
So here's the app we're going to build.
I'm going to tell you right from the get go.
This is a silly application.
It is silly doesn't really have a huge purpose to it but nonetheless it's going to be a simple application
that's going to make it very easy for you to understand exactly how class based components work and
how state works and lifecycle methods work.
Don't worry we're going to put together some much more interesting applications as the course goes on.
But right now I just want to focus on learning some of these key topics.
All right.
So what do we build it.
Well it's going to be an application that is going to detect what season the user is currently experiencing
outside like in the real world.
So we're going to say that if the user is located in the northern hemisphere that means we have to actually
detect our users physical location when they visit our application.
So if they're in the northern hemisphere and it's between October and March then it's probably going
to be winter.
So I want to print on the screen something like Bur. it's chilly and shows some snowflake icons.
If the user is in the southern hemisphere so they are visiting our application from any location on
the earth in the southern hemisphere and the month is between March and October.
That means it's winter for them.
People in the southern hemisphere and so I also want to show birr it's chilly.
And then for the obvious reverse cases over here.
So the case in which it is a user is in the northern hemisphere and it's between March and October.
I want to print up something that seems to indicate that it is currently summertime and maybe it's time
to hit the beach or something like that.
So essentially we're just detecting what season it is based on the user's location and their current
time or what month it is.
Now we're going to print some different content on the screen based upon that.
Like I said it seems like a silly application but there's going to be a ton of hidden challenges inside
of here that are going to require us to get a much better understanding of how re-act works.
So with that in mind when the quickly highlight some of the big challenges as it appears right now with
this application there are going to be more challenges and that we're going to run into besides the
ones that I'm just listing right here.
But I just want you to start thinking about what we're going to have to try to solve as we built this
application.
So first replica our first challenge we're going to run into this one is probably the most obvious one
we need to get the user's physical location.
So somehow in the browser we need to detect what the user's physical location is.
Now this is going to be a little bit easier than it seems at first glance but nonetheless there will
be a challenger to show you exactly how to do this.
As we start the application then the next thing that we need to do is somehow determine the current
month.
Now that's going to be definitely a little bit easier.
Javascript has some very easy to use API for determining the current date and time and also getting
the month number or what month it is essentially.
And finally and this one probably seems a little bit obvious we need to change text and some styling
on the screen based on the location and the month combined together.
So that's pretty much it.
That's what we're going to try to put together and that's some of the big challenges.
I want you to think about right now.
All right.
So Leslie I want to do very quickly is to generate a new application so I'm going to flip on over to
my terminal where I have my application still running from the last application we were built.
I'm going to stop this thing by hitting Control-C and then I'm going to go up one directory back into
my workspace folder of sorts.
And then once I'm back here I'm going to generate a new application with create re-act app and then
I'm going to call this one seasons like so I guess that's going to start the process of generating a
new application.
So let's take a quick pause right here and we'll continue in the next video.