And once we get a hold of a set of files let's open up the zip file install all our dependencies.
Fire up the dev server and take a look at the file and folder structure.
So I have my downloads that is of course my zip file that is going to be our starter project.
I'm just gonna drag and drop it to my desktop and you know what.
In this case I'm going to rename it.
I'm going to say that the name is gonna be store.
I'm gonna open up my favorite text editor by the name and visual studio called Drag and drop the folder
and then like I said we need to do two things.
We do need to install first the dependencies as well as we would want to fire up the dev server.
So I'm gonna run the command of npm install and then right away I'm going to run NPM start.
She's gonna fire up the dev server NPM start.
Now I'm also gonna write a way open up browser window just so half side by side so there's gonna be
two browser windows one smaller browser window and then one bigger one.
So let me set up the side by side for the small browser window.
And this is where we're going to take a look at everything that we're doing as we're developing.
And also once in a while I would want to show you how everything looks on a bigger screen.
So I'm gonna go here for a bigger browser window.
I'm currently of course we haven't installed dependencies yet.
That's the reason why we don't have anything on local host three thousand.
But you should see there hello from app component and then also I'm going to do the same thing on a
smaller browser window.
So I'm going to go with local host three thousand.
And again the same thing we're gonna get some global styles and we're gonna have a low from app component.
As far as our folder and file setup we're gonna have a folder called assets where we're just gonna have
images.
So these are gonna be images that we're gonna be using in the project.
Then we're going to have the components where we're gonna have all the components that we're gonna have
in a project and for each and every component.
Currently the only thing we're gonna have is the heading One.
So we're going return and getting one from the component and it's gonna say let's save hello from hero
or hello from alert or hello from logging link and you get the gist and also you're gonna notice that
I set up all my components using the regular function syntax instead of using the arrow function.
If you don't like it then of course you can change it around.
I just prefer the irregular functions syntax better.
That's the reason why all my components have this particular syntax.
And in order to do that faster if let's say you don't like it you can just head over to extensions.
Make sure that you have this iOS 7 react redux graphical extension and then if you head over back to
the file you can just delete everything you have and I believe the snippet was R A F C E AND THEN YOU'RE
GONNA HAVE RIGHT AWAY YOUR component made we are all functions index and then it's exported as default
again I prefer the other syntax better that's the reason why all the components have the regular function
syntax then we have the context where we're going to have our global context.
1 for card 1 for products 1 for users.
And currently we just have the empty comments there.
So nothing much there.
Then we're gonna have the pages.
So these are gonna be all the pages that we're gonna have in the project starting from the about.
And then all the way to a product J us and then we're gonna have a strappy folder strategy folder is
going to have a functions they're gonna gonna communicate with strappy so we're gonna have four log
in user registered user as well the submitting the order and again for now we just have the empty comments
in there and then we have your tools.
We're all gonna have some helper functions not many to tell you honestly.
Only two we're gonna have the local card.
This is just gonna be while we're developing the card we're gonna have some dummy data.
That's the reason why the file is there and then we're gonna have the URL.
Now the URL is currently empty but essentially the where I would want to set it up is that since we're
gonna have multiple modes of deployment meaning we're gonna first use the you are all just efficient
product from the API that I set up then we're gonna set up our local backend so our strappy project
is gonna be on our local computer so then we're gonna have another year.
And finally once we deploy the project then again we're gonna change the URL.
And since I wouldn't want to hop around all over my application and just keep on changing the URL I
just made a simple file where we're just gonna have the string of what the current you are all is and
then we're going to in fact import that whatever we would want to use the Euro so that way if I need
to change the euro let's say from the local development to a production well then I just changed the
euro and then it automatically exchanged anywhere an application that we're using.
Not a big deal but I just find it easier instead of again hopping around and looking for work or I have
the URL string used.
So that was just much more easier.
And then we have the app Jess where we're gonna have our pages as well as the react router but currently
it just displays again the same thing having one with hello from app component.
And then of course we have all the styles since like I already said all the CSX is already premade.
So if you were going to head over to index CSX you're going to see that these are all the styles that
we're using since I use these CSX variables.
If you don't like the colors and all that you can just take a look at what variable was used when and
then of course just change that particular value.
So if you don't like the primary color just change the color whatever you'd want.
If you don't like the font again just change the font and then the way it's gonna work is as we're developing.
I'm just gonna grab these glasses so there's specific class.
I'm just gonna grab the class if you're interested of heading over and actually inspecting what the
class does.
Just head over to index assess and then just look for that class.
So that way we don't need to spend unnecessary time on setting up to see assess.
Also we have the package Jason where you're going to see that we have these axioms installed.
Also we have reactor stripe elements and we have react icons and react around her down.
So these are the packages that we're going to use throughout the project.
And lastly within the public folder you're also gonna find the redirect and this is just a file that's
necessary in your for notify and react rather to play nicely otherwise for let's say a single product
page well then there's issues essentially it doesn't display the pages we're looking for.
So in order for both of them to place nice with each other we just need to have this redirect file with
this particular content.
If you're interested more in what actually does.
Just again Google notify and react louder dominant.
That's one of the first things that are gonna pop up right.
So that's gonna be our setup and now we can start working on our project.