1
00:00:00,570 --> 00:00:06,690
I think I'm going to go with Klown option, so let me select copy, then I'm back on my desktop.

2
00:00:07,060 --> 00:00:10,170
I'm going to zoom in just so I can see that I'm not doing any sorcery.

3
00:00:10,410 --> 00:00:15,590
So KDDI desktop, then, of course, we would want to run and get clone.

4
00:00:15,930 --> 00:00:17,430
We will get our project.

5
00:00:17,640 --> 00:00:18,930
And then I'm right away.

6
00:00:18,940 --> 00:00:22,560
I can open up my text that are drag and drop my folder.

7
00:00:22,710 --> 00:00:28,710
Now, of course you can rename it if you want, since I have the name as a star Project Redux tutorial

8
00:00:28,710 --> 00:00:29,030
card.

9
00:00:29,280 --> 00:00:31,350
That is probably annoying to some people.

10
00:00:31,590 --> 00:00:36,780
So I'm just going to go with a redux card and then a drag and drop my folder.

11
00:00:37,080 --> 00:00:42,540
Then I would want to open up the browser window just so I can see the code side by side.

12
00:00:42,750 --> 00:00:47,250
So essentially the project that I'm working on side by side and then of course text that are on the

13
00:00:47,250 --> 00:00:47,730
other one.

14
00:00:48,210 --> 00:00:49,380
So let me set them up.

15
00:00:49,380 --> 00:00:52,260
For some reason, I keep on messing this up.

16
00:00:52,290 --> 00:00:54,630
OK, let me set them up side by side.

17
00:00:54,810 --> 00:00:56,820
Now you'll need to run NPM install.

18
00:00:56,850 --> 00:01:02,910
So in this case, I'm opening up the integrated terminal and the command for that is control and tactics.

19
00:01:03,180 --> 00:01:06,710
So I'm going to go out and install and I'm a writer.

20
00:01:06,720 --> 00:01:09,030
We're going to run ampm start.

21
00:01:09,240 --> 00:01:14,970
So that will spin up the other server and you'll right away see how our starting project will look like.

22
00:01:15,210 --> 00:01:19,530
Now, I do want to mention that I right away installed all the dependencies as well.

23
00:01:19,740 --> 00:01:22,980
And more specifically, we're talking about two dependencies.

24
00:01:23,160 --> 00:01:30,330
So we'll have a redux that is responsible for storing our data and then giving us a method to update

25
00:01:30,330 --> 00:01:38,250
our data and then we'll react redux that will allow us to connect our Redock store to our react application.

26
00:01:38,250 --> 00:01:41,400
Because you need to understand that redox can be used.

27
00:01:41,400 --> 00:01:45,720
Not only would react, you can use with whichever front end library you would want.

28
00:01:45,720 --> 00:01:54,300
For example, angle or view is just on its own responsible for storing the data and then giving us methods

29
00:01:54,300 --> 00:01:55,440
to update that data.

30
00:01:55,710 --> 00:02:01,020
In order to connect readers to our REACT application, we will need react redux.

31
00:02:01,140 --> 00:02:04,560
But of course, once we get to that point, I'll talk about it in great detail.

32
00:02:04,860 --> 00:02:08,670
Just keep in mind that both dependencies have been installed.

33
00:02:08,970 --> 00:02:13,680
I once my starter project is ready to go, I can close my integrated terminal.

34
00:02:13,920 --> 00:02:18,840
And then, like I said, essentially we have the whole application apart from the functionality.

35
00:02:19,110 --> 00:02:24,480
Now, let me also open this up in the bigger browser window, just because there's going to be some

36
00:02:24,480 --> 00:02:27,840
times where I would want to show you how it looks like on a bigger screen.

37
00:02:28,110 --> 00:02:34,080
So we have the Navar, we have our icon with the amount of items we have in our time being.

38
00:02:34,260 --> 00:02:35,790
It's hard coded to zero.

39
00:02:36,030 --> 00:02:41,430
Then, of course, some kind of title and then three items with title price remove option.

40
00:02:41,430 --> 00:02:43,200
Again, nothing is happening as you're clicking.

41
00:02:43,470 --> 00:02:49,470
Neither anything is happening as you're clicking on increase or decrease and line some kind of image

42
00:02:49,470 --> 00:02:51,330
for the item all the way in the bottom.

43
00:02:51,330 --> 00:02:52,710
We have clear cut again.

44
00:02:53,070 --> 00:02:54,390
You can press all day long.

45
00:02:54,580 --> 00:02:57,630
Nothing will happen and then we will have our total.

46
00:02:58,110 --> 00:03:03,720
As far as the file and folder structure, it's as straightforward as it gets.

47
00:03:03,720 --> 00:03:05,070
So I have the list.

48
00:03:05,490 --> 00:03:07,020
I'm just rendering the list.

49
00:03:07,020 --> 00:03:11,490
Since there's no functionality now, my list is located in the core items.

50
00:03:11,610 --> 00:03:18,810
It is represented there and then each item is represented as an object and for the object we have properties

51
00:03:18,810 --> 00:03:25,800
and then values, for example, tile price image, as well as the amount which initially is set to one

52
00:03:26,100 --> 00:03:27,750
that in objects.

53
00:03:27,750 --> 00:03:30,750
I get those items and I also get two components.

54
00:03:31,080 --> 00:03:37,080
I get the number that is just a dumb component that displays currently the title and my current icon.

55
00:03:37,290 --> 00:03:44,970
And then I have the cart container and then in the cart container as a prop, I pass in my current items

56
00:03:44,970 --> 00:03:47,410
and the proper name is Cart again.

57
00:03:47,430 --> 00:03:53,550
Normally you would set up some kind of state value, but in our case, since we'll use redux later anyway,

58
00:03:53,790 --> 00:03:57,330
I just went the easy way and passed it down as a prop.

59
00:03:57,330 --> 00:04:00,300
So it's not here even as a state value.

60
00:04:00,540 --> 00:04:05,910
And then in the card container and you can find the three components in the components folder.

61
00:04:06,150 --> 00:04:09,980
You can see that card container will receive my card prob.

62
00:04:10,260 --> 00:04:14,040
Now I did set up some default parameters just in case.

63
00:04:14,040 --> 00:04:18,450
I don't know, the card is not there since I have a dependency here.

64
00:04:18,450 --> 00:04:20,670
The If statement since I'm checking for the length.

65
00:04:20,880 --> 00:04:26,730
That's why I added here the default parameters where if everything goes bananas at least it will be

66
00:04:26,730 --> 00:04:29,460
an empty array and then we have a if statement.

67
00:04:29,760 --> 00:04:36,540
So if the array will be empty, essentially card length is equal to zero then we'll display your bag.

68
00:04:36,540 --> 00:04:45,030
Escalante If not, then we are iterating over my card, prop my right and then for each and every item

69
00:04:45,240 --> 00:04:47,070
I'm returning the cart item.

70
00:04:47,310 --> 00:04:48,810
So that's what you see right here.

71
00:04:49,020 --> 00:04:54,870
And of course, up on the top, we're importing that card item and then we pass all the properties that

72
00:04:54,870 --> 00:04:59,760
we have in the object down to a item and then in the cart item.

73
00:05:00,030 --> 00:05:06,600
Can we get those properties as props, image, title, price and amount, and then one by one we're

74
00:05:06,600 --> 00:05:07,630
just displaying?

75
00:05:07,890 --> 00:05:13,650
Of course, we have the buttons that currently do not have any kind of functionality, but essentially

76
00:05:13,830 --> 00:05:17,060
it is just a list that we're displaying now.

77
00:05:17,070 --> 00:05:21,150
Feel free to pause the video and get familiar with an application.

78
00:05:21,480 --> 00:05:27,650
But now I will switch gears and we'll spend a few minutes talking about redux in Leadville.