I think I'm going to go with Klown option, so let me select copy, then I'm back on my desktop.
I'm going to zoom in just so I can see that I'm not doing any sorcery.
So KDDI desktop, then, of course, we would want to run and get clone.
We will get our project.
And then I'm right away.
I can open up my text that are drag and drop my folder.
Now, of course you can rename it if you want, since I have the name as a star Project Redux tutorial
card.
That is probably annoying to some people.
So I'm just going to go with a redux card and then a drag and drop my folder.
Then I would want to open up the browser window just so I can see the code side by side.
So essentially the project that I'm working on side by side and then of course text that are on the
other one.
So let me set them up.
For some reason, I keep on messing this up.
OK, let me set them up side by side.
Now you'll need to run NPM install.
So in this case, I'm opening up the integrated terminal and the command for that is control and tactics.
So I'm going to go out and install and I'm a writer.
We're going to run ampm start.
So that will spin up the other server and you'll right away see how our starting project will look like.
Now, I do want to mention that I right away installed all the dependencies as well.
And more specifically, we're talking about two dependencies.
So we'll have a redux that is responsible for storing our data and then giving us a method to update
our data and then we'll react redux that will allow us to connect our Redock store to our react application.
Because you need to understand that redox can be used.
Not only would react, you can use with whichever front end library you would want.
For example, angle or view is just on its own responsible for storing the data and then giving us methods
to update that data.
In order to connect readers to our REACT application, we will need react redux.
But of course, once we get to that point, I'll talk about it in great detail.
Just keep in mind that both dependencies have been installed.
I once my starter project is ready to go, I can close my integrated terminal.
And then, like I said, essentially we have the whole application apart from the functionality.
Now, let me also open this up in the bigger browser window, just because there's going to be some
times where I would want to show you how it looks like on a bigger screen.
So we have the Navar, we have our icon with the amount of items we have in our time being.
It's hard coded to zero.
Then, of course, some kind of title and then three items with title price remove option.
Again, nothing is happening as you're clicking.
Neither anything is happening as you're clicking on increase or decrease and line some kind of image
for the item all the way in the bottom.
We have clear cut again.
You can press all day long.
Nothing will happen and then we will have our total.
As far as the file and folder structure, it's as straightforward as it gets.
So I have the list.
I'm just rendering the list.
Since there's no functionality now, my list is located in the core items.
It is represented there and then each item is represented as an object and for the object we have properties
and then values, for example, tile price image, as well as the amount which initially is set to one
that in objects.
I get those items and I also get two components.
I get the number that is just a dumb component that displays currently the title and my current icon.
And then I have the cart container and then in the cart container as a prop, I pass in my current items
and the proper name is Cart again.
Normally you would set up some kind of state value, but in our case, since we'll use redux later anyway,
I just went the easy way and passed it down as a prop.
So it's not here even as a state value.
And then in the card container and you can find the three components in the components folder.
You can see that card container will receive my card prob.
Now I did set up some default parameters just in case.
I don't know, the card is not there since I have a dependency here.
The If statement since I'm checking for the length.
That's why I added here the default parameters where if everything goes bananas at least it will be
an empty array and then we have a if statement.
So if the array will be empty, essentially card length is equal to zero then we'll display your bag.
Escalante If not, then we are iterating over my card, prop my right and then for each and every item
I'm returning the cart item.
So that's what you see right here.
And of course, up on the top, we're importing that card item and then we pass all the properties that
we have in the object down to a item and then in the cart item.
Can we get those properties as props, image, title, price and amount, and then one by one we're
just displaying?
Of course, we have the buttons that currently do not have any kind of functionality, but essentially
it is just a list that we're displaying now.
Feel free to pause the video and get familiar with an application.
But now I will switch gears and we'll spend a few minutes talking about redux in Leadville.