I did us very small refactoring. So as you can see, I've introduced our loading property in our state, that is default true. I have removed the test get method and have created a component did mount, we felt that it's a react related method, in which I'm going to take up to retrieve the list of articles as soon as the component is mounted. So, when I get back the articles I set the loading property to false even here, so, this is our new render method. So we take the loading property from the state. If we are loading if you are still learning we just show up simple my such loading articles otherwise We are going to create our carts according to the articles in the state.

So if you are fast enough, you can check here loading loading articles before the e commerce title and articles are shown. Now let's see how we can add some style here. For example, what if we have if you want to have the title, center it uppercase and with some margin, of course the first thing we can do we can use some bootstrap classes for example, tax center to center it takes uppercase to make it uppercase. And for example, we can have our vertical margin of five. So if we save here what we have but I would like to introduce the concept of standard components as you can see here, this is the common to Eastern All stellar components I have already done it. So what we are going to do is to create for example, ecommerce title, ecommerce title and we are using styled components right here.

So for example, we will have ecommerce title that is tired dot div dot not sorry that h1 and we import import styling from started components. And we can have here for example, text center margin Donal 15 pixels z Excel Text throngs for per case and should be everything he really is. If you want to increase the margin, this is it. And it's interesting because we can use PDO query here inside so for example, we can do let's say fleet and you can have for example color green. So if we are going to increase, this is green. Okay, so this is very interesting.

So, we want to treat again and we Want to create some margin in the cart? This is just an exercise. Of course you can use classes but cart with top margin. So in this case, it's not an HTML element elements. So what we can do, what we should do is to use it like this. So card and what we do is to use two, create our marching talk.

Here's our margin. The last thing we see here you we just we just create a small border. In the bottom of our image so for example, we can do like this. And we just create or the bottom one piece. So, for example, with some color and we're currently emoji becomes like this