1
00:00:00,440 --> 00:00:06,270
And once we get a hold of a set of files let's open up the zip file install all our dependencies.

2
00:00:06,270 --> 00:00:10,940
Fire up the dev server and take a look at the file and folder structure.

3
00:00:11,130 --> 00:00:17,250
So I have my downloads that is of course my zip file that is going to be our starter project.

4
00:00:17,250 --> 00:00:21,010
I'm just gonna drag and drop it to my desktop and you know what.

5
00:00:21,030 --> 00:00:22,950
In this case I'm going to rename it.

6
00:00:22,950 --> 00:00:25,550
I'm going to say that the name is gonna be store.

7
00:00:25,710 --> 00:00:32,160
I'm gonna open up my favorite text editor by the name and visual studio called Drag and drop the folder

8
00:00:32,550 --> 00:00:34,760
and then like I said we need to do two things.

9
00:00:34,920 --> 00:00:40,530
We do need to install first the dependencies as well as we would want to fire up the dev server.

10
00:00:40,950 --> 00:00:47,930
So I'm gonna run the command of npm install and then right away I'm going to run NPM start.

11
00:00:48,060 --> 00:00:51,920
She's gonna fire up the dev server NPM start.

12
00:00:52,460 --> 00:00:58,650
Now I'm also gonna write a way open up browser window just so half side by side so there's gonna be

13
00:00:58,650 --> 00:01:02,910
two browser windows one smaller browser window and then one bigger one.

14
00:01:02,910 --> 00:01:07,150
So let me set up the side by side for the small browser window.

15
00:01:07,230 --> 00:01:11,380
And this is where we're going to take a look at everything that we're doing as we're developing.

16
00:01:11,420 --> 00:01:15,910
And also once in a while I would want to show you how everything looks on a bigger screen.

17
00:01:16,050 --> 00:01:18,890
So I'm gonna go here for a bigger browser window.

18
00:01:18,960 --> 00:01:21,940
I'm currently of course we haven't installed dependencies yet.

19
00:01:22,140 --> 00:01:26,400
That's the reason why we don't have anything on local host three thousand.

20
00:01:26,550 --> 00:01:32,640
But you should see there hello from app component and then also I'm going to do the same thing on a

21
00:01:32,670 --> 00:01:34,080
smaller browser window.

22
00:01:34,080 --> 00:01:36,720
So I'm going to go with local host three thousand.

23
00:01:36,720 --> 00:01:43,590
And again the same thing we're gonna get some global styles and we're gonna have a low from app component.

24
00:01:43,590 --> 00:01:51,030
As far as our folder and file setup we're gonna have a folder called assets where we're just gonna have

25
00:01:51,240 --> 00:01:52,230
images.

26
00:01:52,230 --> 00:01:55,770
So these are gonna be images that we're gonna be using in the project.

27
00:01:55,810 --> 00:02:00,750
Then we're going to have the components where we're gonna have all the components that we're gonna have

28
00:02:00,750 --> 00:02:03,420
in a project and for each and every component.

29
00:02:03,420 --> 00:02:07,120
Currently the only thing we're gonna have is the heading One.

30
00:02:07,140 --> 00:02:12,480
So we're going return and getting one from the component and it's gonna say let's save hello from hero

31
00:02:12,840 --> 00:02:18,810
or hello from alert or hello from logging link and you get the gist and also you're gonna notice that

32
00:02:18,870 --> 00:02:25,830
I set up all my components using the regular function syntax instead of using the arrow function.

33
00:02:25,830 --> 00:02:28,550
If you don't like it then of course you can change it around.

34
00:02:28,560 --> 00:02:32,060
I just prefer the irregular functions syntax better.

35
00:02:32,060 --> 00:02:35,560
That's the reason why all my components have this particular syntax.

36
00:02:35,760 --> 00:02:40,680
And in order to do that faster if let's say you don't like it you can just head over to extensions.

37
00:02:40,680 --> 00:02:47,670
Make sure that you have this iOS 7 react redux graphical extension and then if you head over back to

38
00:02:47,670 --> 00:02:56,070
the file you can just delete everything you have and I believe the snippet was R A F C E AND THEN YOU'RE

39
00:02:56,070 --> 00:03:03,630
GONNA HAVE RIGHT AWAY YOUR component made we are all functions index and then it's exported as default

40
00:03:04,020 --> 00:03:10,080
again I prefer the other syntax better that's the reason why all the components have the regular function

41
00:03:10,080 --> 00:03:15,450
syntax then we have the context where we're going to have our global context.

42
00:03:15,500 --> 00:03:18,290
1 for card 1 for products 1 for users.

43
00:03:18,300 --> 00:03:22,530
And currently we just have the empty comments there.

44
00:03:22,530 --> 00:03:24,060
So nothing much there.

45
00:03:24,150 --> 00:03:25,670
Then we're gonna have the pages.

46
00:03:25,710 --> 00:03:30,620
So these are gonna be all the pages that we're gonna have in the project starting from the about.

47
00:03:30,660 --> 00:03:37,080
And then all the way to a product J us and then we're gonna have a strappy folder strategy folder is

48
00:03:37,080 --> 00:03:42,420
going to have a functions they're gonna gonna communicate with strappy so we're gonna have four log

49
00:03:42,420 --> 00:03:49,590
in user registered user as well the submitting the order and again for now we just have the empty comments

50
00:03:49,590 --> 00:03:51,420
in there and then we have your tools.

51
00:03:51,450 --> 00:03:54,700
We're all gonna have some helper functions not many to tell you honestly.

52
00:03:54,720 --> 00:03:57,640
Only two we're gonna have the local card.

53
00:03:57,660 --> 00:04:01,520
This is just gonna be while we're developing the card we're gonna have some dummy data.

54
00:04:01,680 --> 00:04:05,460
That's the reason why the file is there and then we're gonna have the URL.

55
00:04:05,520 --> 00:04:11,960
Now the URL is currently empty but essentially the where I would want to set it up is that since we're

56
00:04:11,970 --> 00:04:18,650
gonna have multiple modes of deployment meaning we're gonna first use the you are all just efficient

57
00:04:18,660 --> 00:04:26,880
product from the API that I set up then we're gonna set up our local backend so our strappy project

58
00:04:27,150 --> 00:04:31,510
is gonna be on our local computer so then we're gonna have another year.

59
00:04:31,680 --> 00:04:35,850
And finally once we deploy the project then again we're gonna change the URL.

60
00:04:35,850 --> 00:04:42,000
And since I wouldn't want to hop around all over my application and just keep on changing the URL I

61
00:04:42,000 --> 00:04:49,260
just made a simple file where we're just gonna have the string of what the current you are all is and

62
00:04:49,260 --> 00:04:54,930
then we're going to in fact import that whatever we would want to use the Euro so that way if I need

63
00:04:54,930 --> 00:05:01,310
to change the euro let's say from the local development to a production well then I just changed the

64
00:05:01,310 --> 00:05:06,260
euro and then it automatically exchanged anywhere an application that we're using.

65
00:05:06,260 --> 00:05:11,720
Not a big deal but I just find it easier instead of again hopping around and looking for work or I have

66
00:05:11,720 --> 00:05:13,910
the URL string used.

67
00:05:13,910 --> 00:05:16,190
So that was just much more easier.

68
00:05:16,250 --> 00:05:22,850
And then we have the app Jess where we're gonna have our pages as well as the react router but currently

69
00:05:22,850 --> 00:05:27,770
it just displays again the same thing having one with hello from app component.

70
00:05:27,770 --> 00:05:34,370
And then of course we have all the styles since like I already said all the CSX is already premade.

71
00:05:34,370 --> 00:05:39,740
So if you were going to head over to index CSX you're going to see that these are all the styles that

72
00:05:39,740 --> 00:05:43,030
we're using since I use these CSX variables.

73
00:05:43,040 --> 00:05:49,310
If you don't like the colors and all that you can just take a look at what variable was used when and

74
00:05:49,310 --> 00:05:51,670
then of course just change that particular value.

75
00:05:51,740 --> 00:05:55,670
So if you don't like the primary color just change the color whatever you'd want.

76
00:05:55,760 --> 00:06:01,730
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.

77
00:06:01,730 --> 00:06:05,230
I'm just gonna grab these glasses so there's specific class.

78
00:06:05,240 --> 00:06:11,000
I'm just gonna grab the class if you're interested of heading over and actually inspecting what the

79
00:06:11,000 --> 00:06:12,050
class does.

80
00:06:12,050 --> 00:06:15,660
Just head over to index assess and then just look for that class.

81
00:06:15,830 --> 00:06:21,050
So that way we don't need to spend unnecessary time on setting up to see assess.

82
00:06:21,050 --> 00:06:27,050
Also we have the package Jason where you're going to see that we have these axioms installed.

83
00:06:27,080 --> 00:06:34,170
Also we have reactor stripe elements and we have react icons and react around her down.

84
00:06:34,310 --> 00:06:37,920
So these are the packages that we're going to use throughout the project.

85
00:06:37,940 --> 00:06:45,110
And lastly within the public folder you're also gonna find the redirect and this is just a file that's

86
00:06:45,110 --> 00:06:52,700
necessary in your for notify and react rather to play nicely otherwise for let's say a single product

87
00:06:52,700 --> 00:06:57,610
page well then there's issues essentially it doesn't display the pages we're looking for.

88
00:06:57,650 --> 00:07:03,740
So in order for both of them to place nice with each other we just need to have this redirect file with

89
00:07:03,740 --> 00:07:05,040
this particular content.

90
00:07:05,180 --> 00:07:07,890
If you're interested more in what actually does.

91
00:07:07,900 --> 00:07:11,070
Just again Google notify and react louder dominant.

92
00:07:11,090 --> 00:07:14,350
That's one of the first things that are gonna pop up right.

93
00:07:14,690 --> 00:07:18,700
So that's gonna be our setup and now we can start working on our project.