In the last section we generated a new season's project I'm not going to change into that new directory
and then I'll start up my development server and side with NPM starts.
OK.
Well that starting up and I'm getting my browser automatically launched here.
I'll see the default re-act application up here.
There we go.
I'm now going to also start up my code editor inside that new seasons directory.
Right.
So here it is got my code editor right here inside the seasons project.
Now we've got a decent amount of work to do here.
The first thing that I want to do is pull in that semantic UI CSSA library.
We're going to depend upon semantic UI for taking care of those icons and a couple other pieces of styling
that we're going to realize that we need along the way.
So to Hookup semantic UI I'm going to search for semantic youguys CDN.
You know I browser again I'll find a link here at CDN JSE dot com.
And remember we're going to scroll down just about to the bottom of this list.
And find the C Ss file towards the bottom.
Here we go right here.
So I got semantic man CSSA that's the only file we need out of here.
So I got a copy that thing I'll go back over to my code editor of find that public folder open up the
index.
HMO file and then inside of here anywhere inside the head tag I'm going to put a new link with the rule
of style sheet and an H ref of that link.
So I'm going to piece it right in there like so and then I'll make sure that I terminate that link tag.
Now technically you don't actually need that forward slash.
We can just leave it like so.
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
to open up that network tab and see that I am loading semantic Mint's VSS.
OK.
So that's definitely loaded up.
Now that was definitely the easy part.
Let's now flip back over toward Ed..
Inside my SIRC directory.
Remember we get all these automatically generated files.
And I don't really like to use these in general.
So we're going to delete all of them so I'll highlight all them and alt delete and move to trash.
And then finally or make a new file inside they're called index.
Yes and this is where we're going to get started.
All right.
So I want to now flip over to a diagram that's going to help us think about the different components
that we're going to need to make to build this application out.
Now at first glance based upon what we have seen so far inside this mock up over here I think that we
might be able to get away with very few components inside this application.
We're going to eventually realize that's not quite the case.
But for now let's just kind of go with this.
So I think that we need in general two different components we probably need an app component that is
going to have a bunch of code inside of it that's going to be in charge of determining the location
of the user and the current month.
That app component is then going to take the current season it winter or summer or just ignoring fall
and spring for now.
And it's going to pass it as a prop down to a second component that we'll call season display this season
display component right here is what is going to be in charge of showing some actual icons and text
on the screen to tell the user hey it's winter or it's summer so likewise besides saying it is winter
right here the app could easily tell season display it is summer instead and the season display would
need to customize itself based upon that.
OK.
So let's now flip back over to our editor.
We're going to start to put together this app component and we'll also start to scaffold out the season
display inside of index thought yes I'm going to import re-act from react and I'll import react Dom
re-act dashed and then I'm going to make my app component.
I'm going to create it as a functional component for right now until we understand why we need to make
a class based component inside of your Iler return a div that says simply Hi there.
Or now and then after that I'll do my re-act Dom render.
I want to show an instance of my app component and then as the second argument to this thing I'm going
to provide a reference to that div with ID of root inside of our index.
Each e-mail file will say Documentum queries selector
and root like so.
All right so that's it.
Let's say this will flip back over and just make sure that everything is working.
Yes I see the text high there as small as it might be.
So everything looks good.
All right.
Let's now put together a little bit of scaffolding for that second component.
The seasoned display we're not going to be making use of this thing just yet.
We're going to focus on some other topics first.
But I just want to kind of scaffold this thing out or put together kind of a framework for the components
that we don't have to go back and work on it later when we're in the middle of putting this thing together.
All right.
So now inside the sarcy folder I'm going to make another new file called season display.
J.S. at the top we will import re-act or react or create another new functional component called season
display.
Now how this return a div that simply says something like on display.
And then finally at the bottom.
Let's not forget to export this components sold to an export default not Deeson season display like
so.
All right so we've got basically everything here prepped in ready to go.
So let's take a quick pause right here.
When we come back the next section we're going to start focusing on some of the biggest challenges that
we're going to come up against which is getting the user's physical location and determining the current
month.
So quick pause and I'll see you in just a minute.